# Ninna UI v0.6.0

> Ninna UI v0.6.0 — a production-ready, open-source React component library with 69 accessible components across 12 tree-shakeable npm packages. It features zero-runtime CSS theming with oklch perceptual colors, native Tailwind CSS v4.1 support, Radix-powered accessibility (WCAG 2.1 AA), 98 data-slot CSS customization targets, and 5 built-in theme presets. No ThemeProvider, no tailwind.config.ts, no JavaScript theming overhead. Compatible with React 19, Vite 7, Next.js 15, and React Router v7.
> Website: https://ninna-ui.dev
> GitHub: https://github.com/ninna-ui/ninna-ui
> npm: https://www.npmjs.com/org/ninna-ui
> RSS: https://ninna-ui.dev/rss.xml
> AI Discovery: https://ninna-ui.dev/.well-known/ai

Ninna UI is a production-ready React component library that combines Chakra-level component quality with DaisyUI-simple CSS theming. Accessible components across 12 tree-shakeable packages. Zero JavaScript theming runtime - pure CSS custom properties with oklch perceptual colors and guaranteed WCAG AA contrast.

## CRITICAL: How AI agents should use Ninna UI

0. **Use version 0.6.0 or later.** All @ninna-ui packages are at 0.6.0 on npm. Always install with @latest (e.g. `pnpm add @ninna-ui/core@latest @ninna-ui/primitives@latest`). Do NOT use 0.1.0 — it is an obsolete early release.
1. ALWAYS import a component from the exact package in the "Component Import Map" below. Do NOT guess the package.
2. Each component lives in exactly ONE package. The same name is never exported from two packages.
3. Read the "Common Mistakes" section before writing code.
4. For full props/types, fetch https://ninna-ui.dev/llms-full.txt (auto-generated API reference is at the top).
5. A copy-pasteable project rules file is at https://ninna-ui.dev/ninna-ui-rules.md (drop into AGENTS.md / .cursorrules).

## Why Ninna UI (Key Differentiators)

1. **CSS-First Theming** - One CSS import for a complete design system. No ThemeProvider, no context wrappers, no JavaScript configuration. Zero hydration cost.
2. **Radix Accessibility, Zero API Leakage** - Radix primitives wrapped behind clean TypeScript engine interfaces. Your code never imports Radix.
3. **Tailwind CSS v4.1 Native** - CSS-first configuration. No tailwind.config.ts. Automated @source inline() safelisting for npm consumers.
4. **oklch Perceptual Colors** - All 8 semantic colors use oklch color space for perceptually uniform results and guaranteed WCAG AA contrast.
5. **data-slot CSS Targets** - Target any component internal element with plain CSS selectors. No !important hacks, no component forks.
6. **12 Tree-Shakeable Packages** - ESM-only, sideEffects-free. Install only what you need. No monolithic runtime.

## Packages

- @ninna-ui/core - Design system engine: TypeScript tokens, Tailwind class mappings, 5 CSS theme presets with oklch colors
- @ninna-ui/primitives - 17 exports (Core UI building blocks: buttons, text, badges, links, lists)
- @ninna-ui/feedback - 14 exports (Status & feedback: alerts, toasts, progress, skeletons, loaders)
- @ninna-ui/forms - 28 exports (Form controls: inputs, selects, checkboxes, sliders, field wrappers)
- @ninna-ui/layout - 12 exports (Layout primitives: box, stack, flex, grid, container, spacing)
- @ninna-ui/overlays - 5 exports (Floating UI: modals, drawers, popovers, tooltips, dropdown menus)
- @ninna-ui/navigation - 5 exports (Navigation: tabs, accordions, breadcrumbs, pagination, steppers)
- @ninna-ui/data-display - 7 exports (Data presentation: cards, tables, stats, timelines, calendars, trees)
- @ninna-ui/code-block - 1 exports (Syntax-highlighted code block with a built-in regex tokenizer (no Prism/Shiki))
- @ninna-ui/utils - Internal only (cn(), composeRefs, createContext). DO NOT import directly.
- @ninna-ui/react-internal - Internal only (Radix engine adapters). DO NOT import directly.
- @ninna-ui/cli - Project scaffolding CLI with 3 framework templates

## Component Import Map (exact imports — do not guess)

### @ninna-ui/primitives
Avatar -> import { Avatar } from "@ninna-ui/primitives";
AvatarGroup -> import { AvatarGroup } from "@ninna-ui/primitives";
Badge -> import { Badge } from "@ninna-ui/primitives";
Blockquote -> import { Blockquote } from "@ninna-ui/primitives";
Button -> import { Button } from "@ninna-ui/primitives";
Code -> import { Code } from "@ninna-ui/primitives";
Divider -> import { Divider } from "@ninna-ui/primitives";
Heading -> import { Heading } from "@ninna-ui/primitives";
IconButton -> import { IconButton } from "@ninna-ui/primitives";
Kbd -> import { Kbd } from "@ninna-ui/primitives";
Link -> import { Link } from "@ninna-ui/primitives";
LinkBox -> import { LinkBox } from "@ninna-ui/primitives";
LinkOverlay -> import { LinkOverlay } from "@ninna-ui/primitives";
List -> import { List } from "@ninna-ui/primitives";
ListItem -> import { ListItem } from "@ninna-ui/primitives";
Mark -> import { Mark } from "@ninna-ui/primitives";
Text -> import { Text } from "@ninna-ui/primitives";

### @ninna-ui/feedback
Alert -> import { Alert } from "@ninna-ui/feedback";
CircularProgress -> import { CircularProgress } from "@ninna-ui/feedback";
EmptyState -> import { EmptyState } from "@ninna-ui/feedback";
Loading -> import { Loading } from "@ninna-ui/feedback";
Progress -> import { Progress } from "@ninna-ui/feedback";
Skeleton -> import { Skeleton } from "@ninna-ui/feedback";
SkeletonCircle -> import { SkeletonCircle } from "@ninna-ui/feedback";
SkeletonText -> import { SkeletonText } from "@ninna-ui/feedback";
Status -> import { Status } from "@ninna-ui/feedback";
toast -> import { toast } from "@ninna-ui/feedback";
Toast -> import { Toast } from "@ninna-ui/feedback";
Toaster -> import { Toaster } from "@ninna-ui/feedback";
ToastProvider -> import { ToastProvider } from "@ninna-ui/feedback";
useToast -> import { useToast } from "@ninna-ui/feedback";

### @ninna-ui/forms
Checkbox -> import { Checkbox } from "@ninna-ui/forms";
CheckboxGroup -> import { CheckboxGroup } from "@ninna-ui/forms";
CheckboxGroupItem -> import { CheckboxGroupItem } from "@ninna-ui/forms";
Field -> import { Field } from "@ninna-ui/forms";
FileUpload -> import { FileUpload } from "@ninna-ui/forms";
FileUploadItem -> import { FileUploadItem } from "@ninna-ui/forms";
FormControl -> import { FormControl } from "@ninna-ui/forms";
FormGroup -> import { FormGroup } from "@ninna-ui/forms";
FormLabel -> import { FormLabel } from "@ninna-ui/forms";
FormMessage -> import { FormMessage } from "@ninna-ui/forms";
HiddenField -> import { HiddenField } from "@ninna-ui/forms";
Input -> import { Input } from "@ninna-ui/forms";
InputAddon -> import { InputAddon } from "@ninna-ui/forms";
InputGroup -> import { InputGroup } from "@ninna-ui/forms";
NumberInput -> import { NumberInput } from "@ninna-ui/forms";
PinInput -> import { PinInput } from "@ninna-ui/forms";
RadioCard -> import { RadioCard } from "@ninna-ui/forms";
RadioGroup -> import { RadioGroup } from "@ninna-ui/forms";
RadioGroupItem -> import { RadioGroupItem } from "@ninna-ui/forms";
Select -> import { Select } from "@ninna-ui/forms";
SelectGroup -> import { SelectGroup } from "@ninna-ui/forms";
SelectItem -> import { SelectItem } from "@ninna-ui/forms";
SelectSeparator -> import { SelectSeparator } from "@ninna-ui/forms";
Slider -> import { Slider } from "@ninna-ui/forms";
Switch -> import { Switch } from "@ninna-ui/forms";
Textarea -> import { Textarea } from "@ninna-ui/forms";
useFormControl -> import { useFormControl } from "@ninna-ui/forms";
useFormControlProps -> import { useFormControlProps } from "@ninna-ui/forms";

### @ninna-ui/layout
AspectRatio -> import { AspectRatio } from "@ninna-ui/layout";
Box -> import { Box } from "@ninna-ui/layout";
Center -> import { Center } from "@ninna-ui/layout";
Container -> import { Container } from "@ninna-ui/layout";
Flex -> import { Flex } from "@ninna-ui/layout";
Grid -> import { Grid } from "@ninna-ui/layout";
HStack -> import { HStack } from "@ninna-ui/layout";
Separator -> import { Separator } from "@ninna-ui/layout";
SimpleGrid -> import { SimpleGrid } from "@ninna-ui/layout";
Stack -> import { Stack } from "@ninna-ui/layout";
VStack -> import { VStack } from "@ninna-ui/layout";
Wrap -> import { Wrap } from "@ninna-ui/layout";

### @ninna-ui/overlays
Drawer -> import { Drawer } from "@ninna-ui/overlays";
DropdownMenu -> import { DropdownMenu } from "@ninna-ui/overlays";
Modal -> import { Modal } from "@ninna-ui/overlays";
Popover -> import { Popover } from "@ninna-ui/overlays";
Tooltip -> import { Tooltip } from "@ninna-ui/overlays";

### @ninna-ui/navigation
Accordion -> import { Accordion } from "@ninna-ui/navigation";
Breadcrumbs -> import { Breadcrumbs } from "@ninna-ui/navigation";
Pagination -> import { Pagination } from "@ninna-ui/navigation";
Stepper -> import { Stepper } from "@ninna-ui/navigation";
Tabs -> import { Tabs } from "@ninna-ui/navigation";

### @ninna-ui/data-display
Calendar -> import { Calendar } from "@ninna-ui/data-display";
Card -> import { Card } from "@ninna-ui/data-display";
DataTable -> import { DataTable } from "@ninna-ui/data-display";
Stat -> import { Stat } from "@ninna-ui/data-display";
Table -> import { Table } from "@ninna-ui/data-display";
Timeline -> import { Timeline } from "@ninna-ui/data-display";
Tree -> import { Tree } from "@ninna-ui/data-display";

### @ninna-ui/code-block
CodeBlock -> import { CodeBlock } from "@ninna-ui/code-block";

## Component Lookup (alphabetical)

```
Accordion            ->  @ninna-ui/navigation
Alert                ->  @ninna-ui/feedback
AspectRatio          ->  @ninna-ui/layout
Avatar               ->  @ninna-ui/primitives
AvatarGroup          ->  @ninna-ui/primitives
Badge                ->  @ninna-ui/primitives
Blockquote           ->  @ninna-ui/primitives
Box                  ->  @ninna-ui/layout
Breadcrumbs          ->  @ninna-ui/navigation
Button               ->  @ninna-ui/primitives
Calendar             ->  @ninna-ui/data-display
Card                 ->  @ninna-ui/data-display
Center               ->  @ninna-ui/layout
Checkbox             ->  @ninna-ui/forms
CheckboxGroup        ->  @ninna-ui/forms
CheckboxGroupItem    ->  @ninna-ui/forms
CircularProgress     ->  @ninna-ui/feedback
Code                 ->  @ninna-ui/primitives
CodeBlock            ->  @ninna-ui/code-block
Container            ->  @ninna-ui/layout
DataTable            ->  @ninna-ui/data-display
Divider              ->  @ninna-ui/primitives
Drawer               ->  @ninna-ui/overlays
DropdownMenu         ->  @ninna-ui/overlays
EmptyState           ->  @ninna-ui/feedback
Field                ->  @ninna-ui/forms
FileUpload           ->  @ninna-ui/forms
FileUploadItem       ->  @ninna-ui/forms
Flex                 ->  @ninna-ui/layout
FormControl          ->  @ninna-ui/forms
FormGroup            ->  @ninna-ui/forms
FormLabel            ->  @ninna-ui/forms
FormMessage          ->  @ninna-ui/forms
Grid                 ->  @ninna-ui/layout
Heading              ->  @ninna-ui/primitives
HiddenField          ->  @ninna-ui/forms
HStack               ->  @ninna-ui/layout
IconButton           ->  @ninna-ui/primitives
Input                ->  @ninna-ui/forms
InputAddon           ->  @ninna-ui/forms
InputGroup           ->  @ninna-ui/forms
Kbd                  ->  @ninna-ui/primitives
Link                 ->  @ninna-ui/primitives
LinkBox              ->  @ninna-ui/primitives
LinkOverlay          ->  @ninna-ui/primitives
List                 ->  @ninna-ui/primitives
ListItem             ->  @ninna-ui/primitives
Loading              ->  @ninna-ui/feedback
Mark                 ->  @ninna-ui/primitives
Modal                ->  @ninna-ui/overlays
NumberInput          ->  @ninna-ui/forms
Pagination           ->  @ninna-ui/navigation
PinInput             ->  @ninna-ui/forms
Popover              ->  @ninna-ui/overlays
Progress             ->  @ninna-ui/feedback
RadioCard            ->  @ninna-ui/forms
RadioGroup           ->  @ninna-ui/forms
RadioGroupItem       ->  @ninna-ui/forms
Select               ->  @ninna-ui/forms
SelectGroup          ->  @ninna-ui/forms
SelectItem           ->  @ninna-ui/forms
SelectSeparator      ->  @ninna-ui/forms
Separator            ->  @ninna-ui/layout
SimpleGrid           ->  @ninna-ui/layout
Skeleton             ->  @ninna-ui/feedback
SkeletonCircle       ->  @ninna-ui/feedback
SkeletonText         ->  @ninna-ui/feedback
Slider               ->  @ninna-ui/forms
Stack                ->  @ninna-ui/layout
Stat                 ->  @ninna-ui/data-display
Status               ->  @ninna-ui/feedback
Stepper              ->  @ninna-ui/navigation
Switch               ->  @ninna-ui/forms
Table                ->  @ninna-ui/data-display
Tabs                 ->  @ninna-ui/navigation
Text                 ->  @ninna-ui/primitives
Textarea             ->  @ninna-ui/forms
Timeline             ->  @ninna-ui/data-display
toast                ->  @ninna-ui/feedback
Toast                ->  @ninna-ui/feedback
Toaster              ->  @ninna-ui/feedback
ToastProvider        ->  @ninna-ui/feedback
Tooltip              ->  @ninna-ui/overlays
Tree                 ->  @ninna-ui/data-display
useFormControl       ->  @ninna-ui/forms
useFormControlProps  ->  @ninna-ui/forms
useToast             ->  @ninna-ui/feedback
VStack               ->  @ninna-ui/layout
Wrap                 ->  @ninna-ui/layout
```

## Common Mistakes (read before writing code)

- Overlays (Modal, Drawer, Popover, Tooltip, DropdownMenu) live in @ninna-ui/overlays — NOT @ninna-ui/primitives.
- Layout primitives (Box, Stack, HStack, VStack, Flex, Grid, Container, Center, Wrap, SimpleGrid, AspectRatio, Separator) live in @ninna-ui/layout.
- Never import from @ninna-ui/react-internal or @ninna-ui/utils — they are internal and not published for app use.
- There is NO tailwind.config.ts. Tailwind v4 is CSS-first: configure via the CSS @import only.
- CSS setup is REQUIRED: @import "tailwindcss"; then @import "@ninna-ui/core/theme/presets/default.css";
- VStack/HStack/Stack gap takes a STRING token (gap="4"), not a number.
- IconButton requires an `icon` prop (<IconButton icon={<Bell />} />) — it does not take children.
- Flex wrap takes a string (wrap="wrap"), not a boolean.
- Put input icons inside InputGroup via the `startElement`/`endElement` props, not a leftIcon prop on Input.
- Checkbox/Switch use the onCheckedChange callback, not onChange.
- Compound components are accessed via dot-notation (Modal.Trigger, Modal.Content, DropdownMenu.Item, etc.).
- Always import each component from the exact package shown in the Component Import Map below — do not guess.
- All @ninna-ui packages are at v0.6.0 on npm. Always install with @latest (e.g. pnpm add @ninna-ui/core@latest). Do NOT use 0.1.0 — it is an obsolete early release with a different API.

## Quick Start

```bash
npx @ninna-ui/cli init my-app
```

## Manual Installation

```bash
pnpm add @ninna-ui/core@latest @ninna-ui/primitives@latest @ninna-ui/feedback@latest @ninna-ui/forms@latest @ninna-ui/layout@latest @ninna-ui/overlays@latest @ninna-ui/navigation@latest @ninna-ui/data-display@latest
```

## CSS Setup (Required)

```css
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
@variant dark (&:is(.dark *));
```

## Usage Example

```tsx
import { Button } from "@ninna-ui/primitives";
import { Alert } from "@ninna-ui/feedback";
import { Input, Field } from "@ninna-ui/forms";
import { VStack } from "@ninna-ui/layout";
import { Modal } from "@ninna-ui/overlays";

export default function App() {
  return (
    <VStack gap="4">
      <Field label="Email">
        <Input placeholder="you@example.com" />
      </Field>
      <Button color="primary">Submit</Button>
      <Alert color="success" variant="soft">All components support 8 semantic colors and 5 variants.</Alert>
      <Modal>
        <Modal.Trigger asChild>
          <Button>Open</Button>
        </Modal.Trigger>
        <Modal.Content>Hello from an overlay component.</Modal.Content>
      </Modal>
    </VStack>
  );
}
```

## Theme Presets (5)

- default - Purple/Magenta, vibrant and electric
- ocean - Blue/Cyan, cool and professional
- sunset - Orange/Rose, warm and bold
- forest - Green/Amber, natural and earthy
- minimal - Monochrome, clean and understated

## Framework Support

- Vite 7 + React 19 (SPA) - @tailwindcss/vite plugin
- Next.js 15 App Router (SSR) - @tailwindcss/postcss plugin
- React Router v7 (SSR/SPA) - @tailwindcss/vite plugin
- Astro - @tailwindcss/vite plugin

## UI Blocks (free, copy-paste ready)

All blocks are free and built entirely with Ninna UI + Tailwind CSS v4. Copy the source code and paste into any React project.

### How to use blocks
1. Browse: https://ninna-ui.dev/blocks
2. Pick a block and click "Copy" to grab the full source code
3. Paste into your React project and customize with Tailwind CSS

### Data & Dashboards (14 blocks)
- Activity Feed: https://ninna-ui.dev/blocks/activity-feed
- Analytics Overview: https://ninna-ui.dev/blocks/analytics-overview
- Calendar with Events: https://ninna-ui.dev/blocks/calendar-events
- Service Status Page: https://ninna-ui.dev/blocks/cloud-infrastructure-status
- Crypto Portfolio Dashboard: https://ninna-ui.dev/blocks/crypto-portfolio-dashboard
- Dashboard: https://ninna-ui.dev/blocks/dashboard
- Data Table with Filters: https://ninna-ui.dev/blocks/data-table-filters
- Empty State Showcase: https://ninna-ui.dev/blocks/empty-state-showcase
- Log Viewer: https://ninna-ui.dev/blocks/log-viewer
- RBAC Permissions Matrix: https://ninna-ui.dev/blocks/rbac-permissions-matrix
- Report Builder Filters: https://ninna-ui.dev/blocks/report-builder-filters
- Stat Cards Grid: https://ninna-ui.dev/blocks/stat-cards-grid
- Activity Timeline: https://ninna-ui.dev/blocks/timeline-activity
- Transaction History: https://ninna-ui.dev/blocks/transaction-history
- Category page: https://ninna-ui.dev/blocks/data-display

### AI Interfaces (5 blocks)
- AI Chat Interface: https://ninna-ui.dev/blocks/ai-chat-interface
- AI Code Viewer: https://ninna-ui.dev/blocks/ai-code-viewer
- AI Document Analyzer: https://ninna-ui.dev/blocks/ai-document-analyzer
- AI Generative Editor: https://ninna-ui.dev/blocks/ai-generative-editor
- AI Prompt Input: https://ninna-ui.dev/blocks/ai-prompt-input
- Category page: https://ninna-ui.dev/blocks/ai-interfaces

### Application UI (20 blocks)
- API Keys Settings: https://ninna-ui.dev/blocks/api-keys-settings
- Billing Settings: https://ninna-ui.dev/blocks/billing-settings
- Command Palette: https://ninna-ui.dev/blocks/command-palette
- Data Export Modal: https://ninna-ui.dev/blocks/data-export-modal
- File Manager View: https://ninna-ui.dev/blocks/file-manager-view
- File Upload Zone: https://ninna-ui.dev/blocks/file-upload-zone
- Media Gallery: https://ninna-ui.dev/blocks/media-gallery
- Notifications Panel: https://ninna-ui.dev/blocks/notifications-panel
- Onboarding Wizard: https://ninna-ui.dev/blocks/onboarding-wizard
- Project Kanban Board: https://ninna-ui.dev/blocks/project-kanban-board
- Search Results Page: https://ninna-ui.dev/blocks/search-results-page
- Settings Page: https://ninna-ui.dev/blocks/settings-page
- Sidebar Navigation: https://ninna-ui.dev/blocks/sidebar-navigation
- Subscription Quotas: https://ninna-ui.dev/blocks/subscription-quotas
- Team Management: https://ninna-ui.dev/blocks/team-management
- Transfer Funds Form: https://ninna-ui.dev/blocks/transfer-funds-form
- User Preferences Center: https://ninna-ui.dev/blocks/user-preferences-center
- User Profile: https://ninna-ui.dev/blocks/user-profile
- Wallet Balance Cards: https://ninna-ui.dev/blocks/wallet-balance-cards
- Webhook Management: https://ninna-ui.dev/blocks/webhook-management
- Category page: https://ninna-ui.dev/blocks/application-ui

### Blog & Content (8 blocks)
- Article Card Grid: https://ninna-ui.dev/blocks/article-cards
- Article Page: https://ninna-ui.dev/blocks/article-page
- Author Profile Card: https://ninna-ui.dev/blocks/author-profile-card
- Blog Category Filter: https://ninna-ui.dev/blocks/blog-category-filter
- Changelog: https://ninna-ui.dev/blocks/changelog
- Comments Section: https://ninna-ui.dev/blocks/comments-section
- Newsletter Subscribe: https://ninna-ui.dev/blocks/newsletter-section
- Reading Progress: https://ninna-ui.dev/blocks/reading-progress
- Category page: https://ninna-ui.dev/blocks/blog-ui

### Authentication (6 blocks)
- Sign In: https://ninna-ui.dev/blocks/authentication-login
- Magic Link Auth: https://ninna-ui.dev/blocks/authentication-magic-link
- OTP Verification: https://ninna-ui.dev/blocks/authentication-otp-verify
- Reset Password: https://ninna-ui.dev/blocks/authentication-reset-password
- Sign Up: https://ninna-ui.dev/blocks/authentication-signup
- OAuth Social Wall: https://ninna-ui.dev/blocks/authentication-social-wall
- Category page: https://ninna-ui.dev/blocks/authentication

### Marketing (13 blocks)
- Bento Grid Features: https://ninna-ui.dev/blocks/bento-grid-features
- Cookie Consent: https://ninna-ui.dev/blocks/cookie-consent
- Feature Comparison: https://ninna-ui.dev/blocks/feature-comparison-table
- Mega Footer: https://ninna-ui.dev/blocks/footer-mega
- Integrations Grid: https://ninna-ui.dev/blocks/integrations-grid
- Split Marketing Hero: https://ninna-ui.dev/blocks/landing-hero-split
- Logo Cloud: https://ninna-ui.dev/blocks/logo-cloud
- Newsletter Popup: https://ninna-ui.dev/blocks/newsletter-popup
- Professional Portfolio Grid: https://ninna-ui.dev/blocks/professional-portfolio-grid
- Scrolling Logo Ticker: https://ninna-ui.dev/blocks/scrolling-logo-ticker
- Social Profile Links: https://ninna-ui.dev/blocks/social-profile-links
- Social Proof Banner: https://ninna-ui.dev/blocks/social-proof-banner
- Video Showcase: https://ninna-ui.dev/blocks/video-showcase
- Category page: https://ninna-ui.dev/blocks/marketing

### E-Commerce (9 blocks)
- Checkout Form: https://ninna-ui.dev/blocks/checkout-form
- Ecommerce Filters: https://ninna-ui.dev/blocks/ecommerce-filters
- Invoice / Receipt: https://ninna-ui.dev/blocks/invoice-receipt
- Multi-Step Checkout: https://ninna-ui.dev/blocks/multi-step-checkout
- Order Confirmation: https://ninna-ui.dev/blocks/order-confirmation
- Product Card Grid: https://ninna-ui.dev/blocks/product-card-grid
- Product Detail Page: https://ninna-ui.dev/blocks/product-detail-page
- Shopping Cart: https://ninna-ui.dev/blocks/shopping-cart
- Wishlist Page: https://ninna-ui.dev/blocks/wishlist-page
- Category page: https://ninna-ui.dev/blocks/ecommerce

### Page Sections (12 blocks)
- Contact Form: https://ninna-ui.dev/blocks/contact-form
- Call to Action Banner: https://ninna-ui.dev/blocks/cta-banner
- FAQ Section: https://ninna-ui.dev/blocks/faq-accordion
- Features Grid: https://ninna-ui.dev/blocks/features-grid
- Hero Header: https://ninna-ui.dev/blocks/hero-header
- Hero Video Background: https://ninna-ui.dev/blocks/hero-video-background
- How It Works: https://ninna-ui.dev/blocks/how-it-works
- Pricing Comparison Grid: https://ninna-ui.dev/blocks/pricing-comparison-grid
- Pricing Table: https://ninna-ui.dev/blocks/pricing-table
- Stats & Metrics: https://ninna-ui.dev/blocks/stats-counter
- Team Grid: https://ninna-ui.dev/blocks/team-grid
- Testimonials Carousel: https://ninna-ui.dev/blocks/testimonials-carousel
- Category page: https://ninna-ui.dev/blocks/page-sections

### Error & Status Pages (5 blocks)
- Error 403 - Forbidden: https://ninna-ui.dev/blocks/error-403
- Error 404 - Not Found: https://ninna-ui.dev/blocks/error-404
- Error 500 - Server Error: https://ninna-ui.dev/blocks/error-500
- Rate Limit (429): https://ninna-ui.dev/blocks/error-rate-limit
- Maintenance Page: https://ninna-ui.dev/blocks/maintenance
- Category page: https://ninna-ui.dev/blocks/error-pages

## Documentation

- Landing page: https://ninna-ui.dev/
- Introduction: https://ninna-ui.dev/docs
- Blocks hub: https://ninna-ui.dev/blocks
- Getting started: https://ninna-ui.dev/getting-started/installation
- Theming guide: https://ninna-ui.dev/getting-started/theming
- Styling guide: https://ninna-ui.dev/getting-started/styling
- Color system: https://ninna-ui.dev/getting-started/colors
- Next.js guide: https://ninna-ui.dev/getting-started/nextjs
- Vite guide: https://ninna-ui.dev/getting-started/vite
- React Router guide: https://ninna-ui.dev/getting-started/react-router
- Astro guide: https://ninna-ui.dev/getting-started/astro
- Library comparison: https://ninna-ui.dev/comparison
- shadcn/ui vs Ninna UI: https://ninna-ui.dev/compare/shadcn-vs-ninna-ui
- Chakra UI vs Ninna UI: https://ninna-ui.dev/compare/chakra-vs-ninna-ui
- Mantine vs Ninna UI: https://ninna-ui.dev/compare/mantine-vs-ninna-ui
- DaisyUI vs Ninna UI: https://ninna-ui.dev/compare/daisyui-vs-ninna-ui
- Radix UI vs Ninna UI: https://ninna-ui.dev/compare/radix-vs-ninna-ui
- Material UI (MUI) vs Ninna UI: https://ninna-ui.dev/compare/mui-vs-ninna-ui
- HeroUI vs Ninna UI: https://ninna-ui.dev/compare/heroui-vs-ninna-ui
- Ark UI vs Ninna UI: https://ninna-ui.dev/compare/ark-ui-vs-ninna-ui
- Bootstrap vs Ninna UI: https://ninna-ui.dev/compare/bootstrap-vs-ninna-ui
- Bulma vs Ninna UI: https://ninna-ui.dev/compare/bulma-vs-ninna-ui
- Ant Design vs Ninna UI: https://ninna-ui.dev/compare/ant-design-vs-ninna-ui
- Flowbite vs Ninna UI: https://ninna-ui.dev/compare/flowbite-vs-ninna-ui
- Preline UI vs Ninna UI: https://ninna-ui.dev/compare/preline-vs-ninna-ui
- Park UI vs Ninna UI: https://ninna-ui.dev/compare/park-ui-vs-ninna-ui
- Aceternity UI vs Ninna UI: https://ninna-ui.dev/compare/aceternity-vs-ninna-ui
- Tremor vs Ninna UI: https://ninna-ui.dev/compare/tremor-vs-ninna-ui
- Headless UI vs Ninna UI: https://ninna-ui.dev/compare/headlessui-vs-ninna-ui
- shadcn/ui alternative: https://ninna-ui.dev/alternative/shadcn
- Chakra UI alternative: https://ninna-ui.dev/alternative/chakra
- Mantine alternative: https://ninna-ui.dev/alternative/mantine
- DaisyUI alternative: https://ninna-ui.dev/alternative/daisyui
- Radix UI alternative: https://ninna-ui.dev/alternative/radix
- Material UI (MUI) alternative: https://ninna-ui.dev/alternative/mui
- HeroUI alternative: https://ninna-ui.dev/alternative/heroui
- Ark UI alternative: https://ninna-ui.dev/alternative/ark-ui
- Bootstrap alternative: https://ninna-ui.dev/alternative/bootstrap
- Bulma alternative: https://ninna-ui.dev/alternative/bulma
- Ant Design alternative: https://ninna-ui.dev/alternative/ant-design
- Flowbite alternative: https://ninna-ui.dev/alternative/flowbite
- Preline UI alternative: https://ninna-ui.dev/alternative/preline
- Park UI alternative: https://ninna-ui.dev/alternative/park-ui
- Aceternity UI alternative: https://ninna-ui.dev/alternative/aceternity
- Tremor alternative: https://ninna-ui.dev/alternative/tremor
- Headless UI alternative: https://ninna-ui.dev/alternative/headlessui
- FAQ: https://ninna-ui.dev/faq
- Cheatsheet: https://ninna-ui.dev/cheatsheet
- React UI libraries guide: https://ninna-ui.dev/react-ui-libraries
- Tailwind CSS v4 components: https://ninna-ui.dev/tailwind-css-components
- Use cases (dashboard, SaaS, admin, portfolio, settings): https://ninna-ui.dev/use-cases
- Features (zero-runtime theming, oklch, accessibility, data-slot): https://ninna-ui.dev/features
- Listicles (best React libraries, Tailwind components, accessible UI): https://ninna-ui.dev/listicles
- Blog (migration guides, tutorials, deep dives): https://ninna-ui.dev/blog
- About Ninna UI: https://ninna-ui.dev/about
- AI project rules (copy into your repo): https://ninna-ui.dev/ninna-ui-rules.md
- Full component API reference: https://ninna-ui.dev/llms-full.txt
- RSS feed: https://ninna-ui.dev/rss.xml
- Atom feed: https://ninna-ui.dev/atom.xml
- JSON feed: https://ninna-ui.dev/feed.json
- AI discovery JSON: https://ninna-ui.dev/.well-known/ai
- AI usage policy: https://ninna-ui.dev/.well-known/ai.txt

## Links

- Website: https://ninna-ui.dev
- GitHub: https://github.com/ninna-ui/ninna-ui
- npm: https://www.npmjs.com/org/ninna-ui