Installation

Get started with Ninna UI. Use the CLI for instant setup or pick your framework for a manual guide.

CLI (Recommended)

The fastest way to get started. Scaffolds a complete project with your preferred framework and theme preset.

npx @ninna-ui/cli init my-app

The CLI prompts you to choose a framework (Vite, Next.js, or React Router) and a theme preset, then creates a ready-to-run project with all dependencies configured.

Options

-t vite-react|nextjs|react-router

Choose framework without prompt

--preset default|ocean|sunset|forest|minimal

Choose theme preset

--skip-install

Scaffold only, skip npm install

Pick Your Framework

Follow a step-by-step manual setup guide for your framework of choice.

Vite

Recommended

Best choice for single-page applications. Uses @tailwindcss/vite plugin.

View guide

Next.js

SSR

Best choice for server-rendered applications. Uses @tailwindcss/postcss.

View guide

React Router

Full-stack React framework with SSR. Uses @tailwindcss/vite plugin.

View guide

Available Packages

Install only the packages you need. All component packages auto-install @ninna-ui/core.

Component Packages

Package	Components	Install
`@ninna-ui/primitives`	Button, Badge, Avatar, IconButton, Heading, Text, Link, Divider, Code, Blockquote, List, Kbd, Mark	`pnpm add @ninna-ui/primitives`
`@ninna-ui/feedback`	Alert, Toast, Toaster, Progress, CircularProgress, Loading, Skeleton, Status, EmptyState	`pnpm add @ninna-ui/feedback`
`@ninna-ui/forms`	Input, Textarea, Checkbox, Switch, RadioGroup, Select, Slider, NumberInput, PinInput, FileUpload, Field, FormControl, FormGroup, InputGroup	`pnpm add @ninna-ui/forms`
`@ninna-ui/layout`	Box, Container, Stack, Flex, Grid, SimpleGrid, Center, Wrap, AspectRatio, Separator	`pnpm add @ninna-ui/layout`
`@ninna-ui/overlays`	Modal, Drawer, Popover, Tooltip, DropdownMenu	`pnpm add @ninna-ui/overlays`
`@ninna-ui/navigation`	Tabs, Accordion, Breadcrumbs, Pagination, Stepper	`pnpm add @ninna-ui/navigation`
`@ninna-ui/data-display`	Card, Stat, Table, DataTable, Timeline, Tree, Calendar	`pnpm add @ninna-ui/data-display`
`@ninna-ui/code-block`	CodeBlock (syntax-highlighted code display)	`pnpm add @ninna-ui/code-block`

Install all component packages at once:

pnpm add @ninna-ui/primitives @ninna-ui/feedback @ninna-ui/forms @ninna-ui/layout @ninna-ui/overlays @ninna-ui/navigation @ninna-ui/data-display @ninna-ui/code-block

Utility Packages

Package	Description	Install
`@ninna-ui/core`	Design tokens, class mappings, 5 CSS theme presets	auto-installed
`@ninna-ui/cli`	Project scaffolding CLI	`npx @ninna-ui/cli init my-app`