Skip to main content
ninna-ui
Cheatsheet

Ninna UI Cheatsheet

A quick reference for installing, theming, and using Ninna UI components. Bookmark this page for everyday lookups.

Installation

# Scaffold a new project
npx @ninna-ui/cli init my-app -t vite-react

# Or install individual packages
npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms \
  @ninna-ui/layout @ninna-ui/overlays @ninna-ui/navigation \
  @ninna-ui/data-display @ninna-ui/feedback

CSS Setup (required)

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

Theme Presets

@import "@ninna-ui/core/theme/presets/default.css";  /* purple */
@import "@ninna-ui/core/theme/presets/ocean.css";     /* blue */
@import "@ninna-ui/core/theme/presets/sunset.css";    /* orange */
@import "@ninna-ui/core/theme/presets/forest.css";    /* green */
@import "@ninna-ui/core/theme/presets/minimal.css";   /* mono */

Dark Mode Toggle

// Toggle dark mode (no provider needed)
document.documentElement.classList.toggle("dark");

Component Import Map

import { Button, Text, Heading, Badge, Avatar } from "@ninna-ui/primitives";
import { Alert, Toast, Progress, Skeleton, Spinner } from "@ninna-ui/feedback";
import { Input, Select, Checkbox, Switch, Field, Textarea } from "@ninna-ui/forms";
import { Box, Stack, VStack, HStack, Flex, Grid, Container } from "@ninna-ui/layout";
import { Modal, Drawer, Popover, Tooltip, DropdownMenu } from "@ninna-ui/overlays";
import { Tabs, Accordion, Breadcrumbs, Pagination, Stepper } from "@ninna-ui/navigation";
import { Card, Table, Stat, Timeline, Calendar, Tree } from "@ninna-ui/data-display";
import { CodeBlock } from "@ninna-ui/code-block";

Common Props

<Button color="primary" variant="solid" size="md">Click</Button>
<Badge variant="soft" color="success">Active</Badge>
<Alert variant="outline" color="warning">Heads up</Alert>

// Colors: primary, secondary, success, warning, danger, info, accent, neutral
// Variants: solid, soft, outline, ghost
// Sizes: sm, md, lg

Layout Primitives

<VStack gap="4">...</VStack>      {/* vertical stack */}
<HStack gap="3">...</HStack>      {/* horizontal stack */}
<SimpleGrid columns={3} gap="4">  {/* fixed columns */}
<Grid cols={2} gap="4">...</Grid>  {/* CSS grid */}
<Container maxW="4xl">...</Container>

Overlays (Modal, Drawer, etc.)

import { Modal } from "@ninna-ui/overlays";

<Modal>
  <Modal.Trigger asChild>
    <Button>Open</Button>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Header>Title</Modal.Header>
    <Modal.Body>Content</Modal.Body>
    <Modal.Footer>Actions</Modal.Footer>
  </Modal.Content>
</Modal>

Forms

import { Field, Input, Switch } from "@ninna-ui/forms";

<Field label="Email" hint="We'll never share">
  <Input type="email" placeholder="you@example.com" />
</Field>

<Switch defaultChecked onCheckedChange={(v) => console.log(v)} />

Data-slot Customization

/* Target any component internal via data-slot */
[data-slot="button"] {
  border-radius: 9999px;
}

/* Or via Tailwind utility */
<Button className="data-[slot=button]:rounded-full">
  Rounded
</Button>

cn() Helper

import { cn } from "@ninna-ui/primitives";

<div className={cn("p-4 bg-base-100", isActive && "bg-primary/10")} />
Full DocsFAQUse CasesBlocks