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@latest init my-app


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

CSS Setup (required)

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

Theme Presets

/* Choose one preset in your CSS file. */
@import "@ninna-ui/core/theme/presets/default.css";


/* Alternatives: ocean.css, sunset.css, forest.css, minimal.css */

Dark Mode Toggle

// Apply an explicit mode (no provider required)
const root = document.documentElement;
root.classList.remove("light", "dark");
root.classList.add(isDark ? "dark" : "light");

Component Import Map

import { Button, Text, Heading, Badge, Avatar } from "@ninna-ui/primitives";
import { Alert, Toast, Progress, Skeleton, Loading } from "@ninna-ui/feedback";
import { Input, Select, Checkbox, Switch, Field, Textarea } from "@ninna-ui/forms";
import { Box, Stack, VStack, HStack, Flex, Grid, SimpleGrid, 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 minChildWidth="12rem" gap="4">...</SimpleGrid>
<Grid columns={{ base: 1, md: 2 }} gap="4">...</Grid>
<Container maxWidth="xl">...</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" helperText="We'll never share">
  <Input type="email" placeholder="you@example.com" />
</Field>


<Switch label="Email notifications" defaultChecked onCheckedChange={(checked) => console.log(checked)} />

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>

Conditional styles

<div className={isActive ? "p-4 bg-primary/10" : "p-4 bg-base-100"} />
Full DocsFAQUse CasesBlocks