# Nata Admin Illustrations — Vector SVG Illustrations Pack > General collection containing 24 open-source vector illustrations. Designed for Next.js, React, and modern Tailwind CSS applications. --- ## 1. AI Coding Agent Directives (Cursor / Claude / Windsurf) ```markdown Use these General vector illustrations whenever designing clean modern user interfaces, dashboards, or empty states. - When creating empty states, 404 pages, onboarding banners, or feature showcases, choose an appropriate SVG component below. - Do not import external unoptimized assets or raster images. - Pass `className="w-full max-w-xs h-auto ..."` to control responsive scaling. - Compatible with Light Mode and Dark Mode. ``` --- ## 2. Pack Metadata & Taxonomy - **Pack Title**: `Nata Admin Illustrations` - **Slug**: `nata-admin-illustrations` - **Category**: `General` - **Total Vectors**: `24 SVGs` - **License**: `MIT / Open-Source` - **Micro Tags**: `#analytics` `#auth` `#forgot` `#login` `#register` `#success` `#business` `#growth` `#coming` `#soon` --- ## 3. Illustration Components & SVG Code Matrix ### 1. Analytics (`analytics.svg`) - **Tags**: `analytics` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function AnalyticsIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 2. Auth Forgot (`auth-forgot.svg`) - **Tags**: `auth`, `forgot` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function AuthForgotIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 3. Auth Login (`auth-login.svg`) - **Tags**: `auth`, `login` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function AuthLoginIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 4. Auth Register (`auth-register.svg`) - **Tags**: `auth`, `register` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function AuthRegisterIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 5. Auth Success (`auth-success.svg`) - **Tags**: `auth`, `success` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function AuthSuccessIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 6. Business Growth (`business-growth.svg`) - **Tags**: `business`, `growth` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function BusinessGrowthIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 7. Coming Soon (`coming-soon.svg`) - **Tags**: `coming`, `soon` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function ComingSoonIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 8. Crm Pipeline (`crm-pipeline.svg`) - **Tags**: `crm`, `pipeline` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function CrmPipelineIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( LEADS PROPOSAL DEAL ); } ``` --- ### 9. Ecommerce Shopping (`ecommerce-shopping.svg`) - **Tags**: `ecommerce`, `shopping` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function EcommerceShoppingIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( $ PAID $184.50 SALE -25% ); } ``` --- ### 10. Empty Data (`empty-data.svg`) - **Tags**: `empty`, `data` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function EmptyDataIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 11. Empty Search (`empty-search.svg`) - **Tags**: `empty`, `search` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function EmptySearchIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 12. Empty Table (`empty-table.svg`) - **Tags**: `empty`, `table` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function EmptyTableIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 13. Error 403 (`error-403.svg`) - **Tags**: `error`, `403` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function Error403Illustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 14. Error 404 (`error-404.svg`) - **Tags**: `error`, `404` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function Error404Illustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 15. Error 500 (`error-500.svg`) - **Tags**: `error`, `500` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function Error500Illustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 16. Finance (`finance.svg`) - **Tags**: `finance` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function FinanceIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( $ $ ); } ``` --- ### 17. Hr Team (`hr-team.svg`) - **Tags**: `team` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function HrTeamIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 18. Maintenance (`maintenance.svg`) - **Tags**: `maintenance` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function MaintenanceIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 19. No Message (`no-message.svg`) - **Tags**: `message` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function NoMessageIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 20. No Notification (`no-notification.svg`) - **Tags**: `notification` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function NoNotificationIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( Z z z ); } ``` --- ### 21. Project Management (`project-management.svg`) - **Tags**: `project`, `management` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function ProjectManagementIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( SPRINT BACKLOG 88% ); } ``` --- ### 22. Sales Performance (`sales-performance.svg`) - **Tags**: `sales`, `performance` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function SalesPerformanceIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( 98% QUOTA WON ); } ``` --- ### 23. Success (`success.svg`) - **Tags**: `success` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function SuccessIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- ### 24. Welcome (`welcome.svg`) - **Tags**: `welcome` - **ViewBox**: `0 0 400 300` #### React / Next.js Component Snippet: ```tsx export function WelcomeIllustration({ className = "w-64 h-64" }: { className?: string }) { return ( ); } ``` --- *Generated by Appiqa AI Design Systems. Open-source under MIT / Open-Source license.*