Sharp UI

A sharp-edged component registry for React. All components are unstyled at the token level - you control the design through CSS variables - and installed directly into your project via the shadcn CLI rather than imported from a package.

Preview: https://sharp.dragos.cc

Installation

Quick setup

Run this in your project root:

npx @nemu-ai/sharp-ui

This configures shadcn, registers the @nemu-ai scope, and injects all CSS variables and global styles into your globals.css automatically.

Manual setup

1. Initialize shadcn (skip if already done):

npx shadcn@latest init

2. Add the Sharp UI registry to your components.json:

{
  "registries": {
    "@nemu-ai": "https://sharp.dragos.cc/r/{name}.json"
  }
}

3. Install base styles and utilities:

npx shadcn@latest add @nemu-ai/utils

This injects all CSS variables and global styles into your globals.css automatically. No manual imports needed.

Adding components

npx shadcn@latest add @nemu-ai/button
npx shadcn@latest add @nemu-ai/input
npx shadcn@latest add @nemu-ai/dialog

Requirements

• React 18 or 19
• Tailwind CSS v4
• TypeScript (recommended)

Some components have peer dependencies that the CLI installs automatically:

• motion - accordion, command palette, date range picker, drawer, dropzone, progress, rating
• @base-ui-components/react - button, dialog
• @tabler/icons-react - icon, and any component that depends on icon
• @tanstack/react-table - data table

Globals

CSS variables and global styles are injected into your globals.css automatically during init. No manual imports needed.

All components read from CSS custom properties. Override any variable in your own stylesheet to retheme everything at once.

CSS variables

Surface and text

| Variable | Default (light) | Purpose | | ---------------------- | --------------- | ---------------------------------------------------------- | | --background | #ffffff | Page and component background | | --foreground | #0f172a | Primary text | | --foreground-subtle | #64748b | Secondary labels, placeholders, helper text | | --muted-foreground | #475569 | Descriptions, captions, dimmed content | | --card | #ffffff | Card surface background | | --card-foreground | #0f172a | Text on cards | | --popover | #ffffff | Popover and dropdown background | | --popover-foreground | #0f172a | Text in popovers | | --surface-alt | #f8fafc | Slightly elevated surface - sidebar, table headers, footer | | --surface-hover | #f1f5f9 | Hover state background for surface elements | | --muted | #f8fafc | Muted container - skeleton base, icon backgrounds | | --accent | #f1f5f9 | Accent surface - table row hover | | --accent-foreground | #0f172a | Text on accent surface |

Borders and inputs

| Variable | Default (light) | Purpose | | ----------------- | --------------- | ----------------------------------------------- | | --border | #e2e8f0 | Default border on most components | | --border-strong | #cbd5e1 | Elevated border - input fields, select triggers | | --border-focus | #005bff | Border color when an input is focused | | --input | #cbd5e1 | Input border in its default state | | --ring | #005bff | Focus ring color | | --radius | 3px | Global border radius used by all components |

Semantic colors

Each semantic color ships a solid variant, a soft (low-opacity) background, a soft border, and a foreground.

| Variable | Purpose | | -------------------------------------------- | -------------------------------------------------------- | | --primary / --primary-foreground | Brand blue - used on primary buttons and selected states | | --secondary / --secondary-foreground | Neutral secondary surface | | --destructive / --destructive-foreground | Error actions and danger states | | --warning / --warning-foreground | Warning states | | --success / --success-foreground | Success states |

Blue palette

| Variable | Purpose | | -------------------- | --------------------------------------------------------- | | --blue | Primary interactive blue | | --blue-hover | Hover shade of blue | | --blue-active | Active/pressed shade of blue | | --blue-soft | Low-opacity blue background - selected items, info badges | | --blue-soft-border | Border to pair with --blue-soft | | --blue-foreground | Text on solid blue backgrounds |

Green palette

| Variable | Purpose | | --------------------- | ---------------------------------- | | --green | Success green | | --green-soft | Low-opacity green background | | --green-soft-border | Border to pair with --green-soft | | --green-foreground | Text on solid green backgrounds |

Amber palette

| Variable | Purpose | | --------------------- | ---------------------------------- | | --amber | Warning amber | | --amber-soft | Low-opacity amber background | | --amber-soft-border | Border to pair with --amber-soft | | --amber-foreground | Text on solid amber backgrounds |

Red palette

| Variable | Purpose | | ------------------- | -------------------------------- | | --red | Danger red | | --red-soft | Low-opacity red background | | --red-soft-border | Border to pair with --red-soft | | --red-foreground | Text on solid red backgrounds |

Violet palette

| Variable | Purpose | | ---------------------- | ----------------------------------- | | --violet | Violet accent | | --violet-soft | Low-opacity violet background | | --violet-soft-border | Border to pair with --violet-soft |

Misc

| Variable | Purpose | | ----------------- | ------------------------------------------------- | | --kbd-bg | Keyboard shortcut chip background | | --modal-overlay | Semi-transparent backdrop for dialogs and drawers |

Dark mode is handled by the .dark class on the root element. All variables are redefined under .dark - no further changes are needed in component code.

Keyframe animations used internally:

• content-show / content-hide - dialog entry and exit
• overlay-show / overlay-hide - backdrop fade
• dropdown-in - dropdown and popover entry

The ::selection color is set to --primary with white text. Scrollbars are styled to 4 px with --border-strong thumb color.

Utility

cn(...classes) - merges Tailwind class names using clsx + tailwind-merge. Installed at lib/cn.ts.

import { cn } from "@/lib/cn";

<div className={cn("base-class", condition && "conditional-class")} />;

Icon

Dynamic icon wrapper around @tabler/icons-react. Pass any Tabler icon name in kebab-case.

import { Icon } from "@/components/ui/icon";

<Icon name="check" size={16} />
<Icon name="chevron-down" size={20} className="text-[var(--foreground-subtle)]" />

Props:

| Prop | Type | Default | Description | | ----------- | --------------- | ------- | ----------------------------------------------------- | | name | string | - | Tabler icon name in kebab-case (e.g. "info-circle") | | size | number | 20 | Icon size in px | | className | string | - | Additional classes | | style | CSSProperties | - | Inline styles |

Components

Accordion

Expand/collapse sections with animated height transition. Multiple items can be open simultaneously.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

<Accordion defaultOpen={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Sharp UI?</AccordionTrigger>
    <AccordionContent>
      A sharp-edged component registry for React.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>
      Use the shadcn CLI with the registry URL.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Accordion props:

| Prop | Type | Default | Description | | ------------- | ---------- | ------- | ----------------------------- | | defaultOpen | string[] | [] | Values of items open on mount | | className | string | - | |

AccordionItem props:

| Prop | Type | Default | Description | | ----------- | -------- | ------- | ----------------- | | value | string | - | Unique identifier | | className | string | - | |

Alert

Inline feedback banner. Renders an icon, title, and description in a colored container.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert variant="info">
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>A new region is available.</AlertDescription>
</Alert>

<Alert variant="danger">
  <AlertTitle>Deployment failed</AlertTitle>
  <AlertDescription>Check the build logs for details.</AlertDescription>
</Alert>

Alert props:

| Prop | Type | Default | Description | | ----------- | ---------------------------------------------- | -------- | --------------------- | | variant | "info" \| "success" \| "warning" \| "danger" | "info" | Color scheme and icon | | className | string | - | |

• info - blue, info-circle icon
• success - green, check icon
• warning - amber, alert-circle icon
• danger - red, circle-x icon

Avatar

Initials-based avatar with size variants. AvatarStack renders a horizontal overlap of avatars with an overflow count.

import { Avatar, AvatarStack } from "@/components/ui/avatar";

<Avatar initials="JD" size="md" />

<AvatarStack
  avatars={[{ initials: "JD" }, { initials: "RA" }, { initials: "MK" }]}
  max={2}
/>

Avatar props:

| Prop | Type | Default | Description | | ----------- | ---------------------- | ------- | -------------------------------------------- | | initials | string | - | Up to two characters displayed in the avatar | | size | "sm" \| "md" \| "lg" | "md" | sm = 32px, md = 40px, lg = 56px | | className | string | - | |

AvatarStack props:

| Prop | Type | Default | Description | | ----------- | ------------------------ | ------- | ----------------------------------- | | avatars | { initials: string }[] | - | List of avatar data | | max | number | - | Truncate after this many, show +N | | className | string | - | |

Badge

Compact status chip. Supports a dot indicator for live status.

import { Badge } from "@/components/ui/badge";

<Badge variant="primary">Active</Badge>
<Badge variant="success" dot>Online</Badge>
<Badge variant="destructive">Failed</Badge>

Badge props:

| Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------- | | variant | "default" \| "primary" \| "blue" \| "success" \| "green" \| "warning" \| "amber" \| "destructive" \| "red" \| "violet" \| "secondary" \| "outline" \| "solid" | "default" | Color scheme | | dot | boolean | false | Show a small dot before the label | | className | string | - | |

primary and blue are identical. success and green are identical. warning and amber are identical. destructive and red are identical. secondary and violet are identical.

Banner

Full-width notification container with title, description, and action slots.

import {
  Banner,
  BannerTitle,
  BannerDescription,
  BannerAction,
} from "@/components/ui/banner";

<Banner>
  <BannerTitle>Update available</BannerTitle>
  <BannerDescription>Version 2.4.0 is ready to deploy.</BannerDescription>
  <BannerAction>
    <Button size="sm">Deploy now</Button>
  </BannerAction>
</Banner>;

All sub-components accept children and className.

Breadcrumb

Hierarchical navigation trail.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>API keys</BreadcrumbPage>
  </BreadcrumbItem>
</Breadcrumb>;

BreadcrumbLink renders an <a> when href is provided, otherwise a <span>.

Button

Built on @base-ui-components/react/button. Forwards refs and supports a loading spinner that preserves button width.

import { Button } from "@/components/ui/button";

<Button>Deploy</Button>
<Button variant="secondary" size="sm">Cancel</Button>
<Button variant="destructive">Delete project</Button>
<Button loading>Saving...</Button>

Props:

| Prop | Type | Default | Description | | --------- | ------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------- | | variant | "primary" \| "secondary" \| "destructive" \| "destructive-outline" \| "ghost" \| "link" \| "warning" \| "success" | "primary" | Visual style | | size | "sm" \| "md" \| "lg" | "md" | sm = 40px height, md = 56px, lg = 64px | | loading | boolean | false | Disables the button and shows an animated spinner in place of children |

All native <button> attributes are forwarded.

• primary - solid blue, uses --blue / --blue-hover / --blue-active
• secondary - bordered, uses --border-strong and --surface-alt on hover
• destructive - bordered red label, fills red on hover
• destructive-outline - transparent with red border
• ghost - no border, fills --surface-alt on hover
• link - inline text link with animated underline, uses --blue
• warning - soft amber background, fills amber on hover
• success - soft green background, fills green on hover

Calendar

Embedded single-month calendar for date selection.

import { Calendar } from "@/components/ui/calendar";

const [date, setDate] = useState<Date>();

<Calendar selected={date} onChange={setDate} />;

Props:

| Prop | Type | Default | Description | | ----------- | ---------------------- | ------- | --------------------------------- | | selected | Date | - | Currently selected date | | onChange | (date: Date) => void | - | Called when the user picks a date | | className | string | - | |

Today's date is marked with a small blue dot. Days from adjacent months are rendered in a muted color. The calendar is uncontrolled by default for the current month view.

Card

Surface container with optional title, description, and footer.

import {
  Card,
  CardTitle,
  CardDescription,
  CardFooter,
} from "@/components/ui/card";

<Card>
  <CardTitle>API keys</CardTitle>
  <CardDescription>Manage your personal access tokens.</CardDescription>
  <p>Content goes here.</p>
  <CardFooter>
    <Button size="sm">Create key</Button>
  </CardFooter>
</Card>;

All sub-components accept children and className. The footer is right-aligned with a top border.

Checkbox

Styled checkbox that visually replaces the native control.

import { Checkbox } from "@/components/ui/checkbox";

<Checkbox
  label="Enable notifications"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>;

Props:

| Prop | Type | Default | Description | | ---------- | -------------------- | ------- | ----------------------------------- | | label | string | - | Label rendered next to the checkbox | | checked | boolean | - | | | onChange | ChangeEventHandler | - | | | disabled | boolean | - | |

All other native <input> attributes are forwarded.

Chip

Tag with an optional remove button. Use inside MultiSelect or standalone for displaying selected filters.

import { Chip } from "@/components/ui/chip";

<Chip label="react" variant="info" onRemove={() => remove("react")} />;

Props:

| Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------- | ----------- | ------------------------------------ | | label | string | - | Displayed text | | variant | "default" \| "success" \| "warning" \| "danger" \| "info" | "default" | Color scheme | | onRemove | () => void | - | If provided, an × button is rendered | | className | string | - | |

Command palette

Full-screen command palette with keyboard navigation, search, and optional tabs. Triggered by your own button or key binding.

import {
  CommandPalette,
  CommandGroup,
  CommandItem,
} from "@/components/ui/command-palette";

const [open, setOpen] = useState(false);

<CommandPalette open={open} onClose={() => setOpen(false)}>
  <CommandGroup label="Navigation">
    <CommandItem
      label="Dashboard"
      shortcut={["G", "D"]}
      onSelect={() => router.push("/dashboard")}
    />
    <CommandItem
      label="Settings"
      shortcut={["G", "S"]}
      onSelect={() => router.push("/settings")}
    />
  </CommandGroup>
  <CommandGroup label="Actions">
    <CommandItem
      label="New project"
      shortcut={["N"]}
      onSelect={() => setNewProjectOpen(true)}
    />
  </CommandGroup>
</CommandPalette>;

With tabs:

import {
  CommandPalette,
  CommandTab,
  CommandGroup,
  CommandItem,
} from "@/components/ui/command-palette";

<CommandPalette open={open} onClose={() => setOpen(false)}>
  <CommandTab label="Commands" placeholder="Search commands...">
    <CommandGroup label="Navigation">
      <CommandItem label="Dashboard" onSelect={() => {}} />
    </CommandGroup>
  </CommandTab>
  <CommandTab label="Files" count={12} placeholder="Search files...">
    <CommandGroup label="Recent">
      <CommandItem
        label="schema.prisma"
        meta="Modified today"
        onSelect={() => {}}
      />
    </CommandGroup>
  </CommandTab>
</CommandPalette>;

Keyboard: up/down arrows to navigate, enter to select, escape to close, tab to switch between tabs.

CommandPalette props:

| Prop | Type | Default | Description | | ----------- | ------------ | ------- | ---------------------------------- | | open | boolean | - | Controls visibility | | onClose | () => void | - | Called on escape or backdrop click | | className | string | - | Applied to the palette panel |

CommandItem props:

| Prop | Type | Default | Description | | ---------- | ------------ | ------- | ---------------------------------------- | | label | string | - | Displayed name | | icon | ReactNode | - | Optional icon before the label | | shortcut | string[] | - | Keyboard shortcut keys rendered as chips | | meta | string | - | Secondary text rendered at the right | | onSelect | () => void | - | Called when the item is activated |

CommandGroup props:

| Prop | Type | Description | | ------- | -------- | --------------- | | label | string | Section heading |

CommandTab props:

| Prop | Type | Description | | ------------- | -------- | ------------------------------------- | | label | string | Tab label | | count | number | Optional badge count on the tab | | placeholder | string | Search input placeholder for this tab |

Data table

Sortable, paginated table built on TanStack Table v8. Column definitions follow the TanStack ColumnDef API.

import { DataTable } from "@/components/ui/data-table";
import type { ColumnDef } from "@/components/ui/data-table";

type User = { name: string; email: string; role: string };

const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name", size: 200 },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "role", header: "Role", size: 120 },
];

<DataTable columns={columns} data={users} pageSize={20} />;

Props:

| Prop | Type | Default | Description | | ----------- | -------------------- | ------- | --------------------------- | | data | TData[] | - | Row data | | columns | ColumnDef<TData>[] | - | TanStack column definitions | | pageSize | number | 10 | Rows per page | | sortable | boolean | true | Enable column sorting | | paginated | boolean | true | Show pagination footer | | className | string | - | |

Date range picker

Two-month calendar with preset ranges and apply/cancel actions.

import { DateRangePicker } from "@/components/ui/date-range-picker";

const [range, setRange] = useState<[Date, Date]>([new Date(), new Date()]);

<DateRangePicker value={range} onChange={setRange} />;

Props:

| Prop | Type | Default | Description | | ----------- | ------------------------------- | ------- | ---------------------------- | | value | [Date, Date] | - | Selected start and end dates | | onChange | (range: [Date, Date]) => void | - | | | className | string | - | |

Dialog

Accessible modal built on @base-ui-components/react/dialog. Animated entry and exit. Closes on backdrop click or escape.

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogBody,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog";

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogContent>
    <DialogClose />
    <DialogHeader>
      <DialogTitle>Confirm deletion</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogBody>
      All data associated with this project will be permanently deleted.
    </DialogBody>
    <DialogFooter>
      <Button variant="secondary" size="sm" onClick={() => setOpen(false)}>
        Cancel
      </Button>
      <Button variant="destructive" size="sm">
        Delete
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Dialog props:

| Prop | Type | Default | Description | | --------- | ------------ | ------- | ----------- | | open | boolean | - | | | onClose | () => void | - | |

DialogContent defaults to max-w-[520px]. Pass className to widen or constrain it. DialogClose renders an × button in the top-right corner.

Divider

Horizontal or vertical rule.

import { Divider } from "@/components/ui/divider";

<Divider />
<Divider orientation="vertical" />

Props:

| Prop | Type | Default | Description | | ------------- | ---------------------------- | -------------- | ----------- | | orientation | "horizontal" \| "vertical" | "horizontal" | | | className | string | - | |

Drawer

Animated side sheet that slides in from the right. Closes on backdrop click or escape.

import {
  Drawer,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerSection,
} from "@/components/ui/drawer";

<Drawer open={open} onClose={() => setOpen(false)}>
  <DrawerHeader>
    <div>
      <DrawerTitle>Team member</DrawerTitle>
      <DrawerDescription>Manage access and roles.</DrawerDescription>
    </div>
  </DrawerHeader>
  <DrawerSection>
    <p>Content here.</p>
  </DrawerSection>
</Drawer>;

Drawer props:

| Prop | Type | Default | Description | | ----------- | ------------ | ------- | ---------------------------------------------- | | open | boolean | - | | | onClose | () => void | - | | | className | string | - | Applied to the panel, max-w 440px by default |

DrawerSection adds a bottom border except on the last child.

Dropdown menu

Click-triggered dropdown with labels, items, separators, shortcuts, and nested sub-menus.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="secondary" size="sm">
      Options
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuItem onClick={() => router.push("/settings")}>
      Settings
      <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={signOut}>Sign out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

DropdownMenuContent props:

| Prop | Type | Default | Description | | ------- | ------------------ | --------- | -------------------------------------------- | | align | "start" \| "end" | "start" | Horizontal alignment relative to the trigger |

Dropzone

Drag-and-drop file upload area. Files are displayed below the zone with a simulated progress indicator.

import { Dropzone } from "@/components/ui/dropzone";

<Dropzone maxSize={25} onFilesChange={(files) => setFiles(files)} />;

Props:

| Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | ------------------------------------------ | | maxSize | number | 25 | Maximum file size in MB shown in the label | | onFilesChange | (files: UploadedFile[]) => void | - | Called when files are added or removed | | className | string | - | |

UploadedFile shape: { name: string; size: string; progress: number }.

Empty state

Centered placeholder for views with no content.

import {
  EmptyState,
  EmptyStateIcon,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateAction,
} from "@/components/ui/empty-state";
import { Icon } from "@/components/ui/icon";

<EmptyState>
  <EmptyStateIcon>
    <Icon name="inbox" size={40} />
  </EmptyStateIcon>
  <EmptyStateTitle>No deployments yet</EmptyStateTitle>
  <EmptyStateDescription>
    Push your first commit to trigger a deployment.
  </EmptyStateDescription>
  <EmptyStateAction>
    <Button size="sm">Read the docs</Button>
  </EmptyStateAction>
</EmptyState>;

All sub-components accept children and className.

Frame

Panel and browser chrome containers for dashboard layouts.

Frame is a simple bordered container. BrowserFrame adds a mock browser toolbar with traffic-light dots and a URL bar.

import { Frame, FrameHeader, FrameTitle, FrameAction, FrameContent, BrowserFrame } from "@/components/ui/frame";

<Frame>
  <FrameHeader>
    <FrameTitle>Team settings</FrameTitle>
    <FrameAction>
      <Button size="sm">Save</Button>
    </FrameAction>
  </FrameHeader>
  <FrameContent>
    <Switch label="Two-factor auth" />
  </FrameContent>
</Frame>

<BrowserFrame url="app.example.com/dashboard">
  <p>Preview content</p>
</BrowserFrame>

BrowserFrame props:

| Prop | Type | Default | Description | | ----- | -------- | --------------- | ---------------------------------- | | url | string | "example.com" | Text shown in the mock address bar |

Input

Floating-label text input. The label transitions from placeholder position to a small uppercase label above the field when the input is focused or has a value.

import { Input } from "@/components/ui/input";

<Input label="Email" type="email" value={email} onChange={e => setEmail(e.target.value)} />
<Input label="Password" type="password" />
<Input label="Notes" multiline rows={5} />
<Input label="Username" error="Username is already taken." />
<Input label="API key" help="Only shown once. Store it somewhere safe." />

Props:

| Prop | Type | Default | Description | | ------------- | ------------ | -------- | ----------------------------------------------------------------------- | | label | string | - | Required. Doubles as the floating label and accessible label | | type | string | "text" | Standard input type. "password" automatically adds a show/hide toggle | | error | string | - | Displays below the field in red and turns the border red | | help | string | - | Displays below the field in muted color. Suppressed when error is set | | multiline | boolean | false | Renders a <textarea> instead of <input> | | rows | number | 4 | Row count when multiline is true | | iconRight | ReactNode | - | Custom icon rendered in the right slot | | onIconClick | () => void | - | Click handler for the right icon |

All other native <input> attributes are forwarded.

Key value

Definition list for displaying structured metadata.

import { KeyValue, KeyValueItem } from "@/components/ui/key-value";

<KeyValue>
  <KeyValueItem label="Region" value="us-east-1" />
  <KeyValueItem label="Node ID" value="node_01j2k3l4m5n6" />
  <KeyValueItem label="Created" value="2024-08-14" />
</KeyValue>;

KeyValueItem props:

| Prop | Type | Description | | ------- | -------- | ---------------------------------------------------------------- | | label | string | Left column | | value | string | Right column. Rendered in monospace when the label contains "id" |

Multi select

Searchable multi-value select with inline chip display.

import { MultiSelect, MultiSelectOption } from "@/components/ui/multi-select";

<MultiSelect
  values={selected}
  onChange={setSelected}
  placeholder="Choose frameworks..."
>
  <MultiSelectOption value="react" label="React" />
  <MultiSelectOption value="vue" label="Vue" />
  <MultiSelectOption value="svelte" label="Svelte" />
</MultiSelect>;

MultiSelect props:

| Prop | Type | Default | Description | | ------------- | ---------------------------- | --------------- | ------------------------------ | | values | string[] | [] | Selected values | | onChange | (values: string[]) => void | - | | | placeholder | string | "Add tags..." | Shown when nothing is selected |

OTP

One-time password digit input. Auto-advances on input and handles backspace navigation between cells.

import { OTP } from "@/components/ui/otp";

const [code, setCode] = useState(Array(6).fill(""));

<OTP length={6} value={code} onChange={setCode} />;

Props:

| Prop | Type | Default | Description | | ----------- | --------------------------- | ------- | ------------------------------------- | | length | number | 6 | Number of digit cells | | value | string[] | - | Controlled value, one string per cell | | onChange | (value: string[]) => void | - | | | className | string | - | |

Only numeric input is accepted.

Pagination

Page navigation with prev/next and numbered page buttons.

import { Pagination } from "@/components/ui/pagination";

<Pagination currentPage={page} totalPages={12} onPageChange={setPage} />;

Props:

| Prop | Type | Description | | -------------- | ------------------------ | ----------------------- | | currentPage | number | Active page (1-indexed) | | totalPages | number | Total number of pages | | onPageChange | (page: number) => void | |

Popover

Anchored floating panel. Can be uncontrolled (manages its own open state) or controlled.

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverTitle,
  PopoverBody,
  PopoverFooter,
  PopoverItem,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger>
    <Button variant="secondary" size="sm">
      Columns
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Visible columns</PopoverTitle>
    <PopoverBody>
      <PopoverItem
        label="Name"
        checked={cols.name}
        onChange={(v) => setCols((c) => ({ ...c, name: v }))}
      />
      <PopoverItem
        label="Email"
        checked={cols.email}
        onChange={(v) => setCols((c) => ({ ...c, email: v }))}
      />
    </PopoverBody>
    <PopoverFooter>
      <Button size="sm">Apply</Button>
    </PopoverFooter>
  </PopoverContent>
</Popover>;

Controlled usage: pass open and onOpenChange to Popover.

PopoverItem renders a labeled checkbox row.

Progress

Animated progress bar using a Motion layout animation.

import { Progress } from "@/components/ui/progress";

<Progress value={72} max={100} />;

Props:

| Prop | Type | Default | Description | | ----------- | -------- | ------- | -------------------- | | value | number | - | Current value | | max | number | 100 | Maximum value | | className | string | - | Applied to the track |

Radio

Styled radio input. Group multiple Radio components using a shared name.

import { Radio } from "@/components/ui/radio";

<Radio name="plan" value="free" label="Free" checked={plan === "free"} onChange={() => setPlan("free")} />
<Radio name="plan" value="pro" label="Pro" checked={plan === "pro"} onChange={() => setPlan("pro")} />

Props:

| Prop | Type | Description | | ---------- | -------------------- | ---------------------- | | name | string | Groups radios together | | value | string | Value for this option | | label | string | Label text | | checked | boolean | | | onChange | ChangeEventHandler | | | disabled | boolean | |

Rating

Star rating input with animated scale on interaction.

import { Rating } from "@/components/ui/rating";

<Rating value={rating} onChange={setRating} max={5} size="md" />;

Props:

| Prop | Type | Default | Description | | ---------- | ------------------------- | ------- | --------------------------------------- | | value | number | 0 | Current rating | | onChange | (value: number) => void | - | | | max | number | 5 | Number of stars | | size | "sm" \| "md" \| "lg" | "md" | Star icon size (14, 20, or 26 px) | | disabled | boolean | false | |

Segmented control

Button-group toggle for mutually exclusive options. A common alternative to tabs when the options are short.

import {
  SegmentedControl,
  SegmentedControlItem,
} from "@/components/ui/segmented-control";

<SegmentedControl value={view} onChange={setView}>
  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
  <SegmentedControlItem value="list">List</SegmentedControlItem>
  <SegmentedControlItem value="table">Table</SegmentedControlItem>
</SegmentedControl>;

SegmentedControl props:

| Prop | Type | Description | | ---------- | ------------------------- | ---------------------- | | value | string | Currently active value | | onChange | (value: string) => void | |

Select

Custom single-value select dropdown. Matches the height of the Input component.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from "@/components/ui/select";

<Select value={region} onValueChange={setRegion}>
  <SelectTrigger>
    <SelectValue placeholder="Select region" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>United States</SelectLabel>
      <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
      <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

Select props:

| Prop | Type | Description | | --------------- | ------------------------- | ------------------------- | | value | string | Controlled selected value | | onValueChange | (value: string) => void | |

Skeleton

Loading placeholder with a shimmer animation.

import { Skeleton } from "@/components/ui/skeleton";

<Skeleton width="100%" height={16} />
<Skeleton width={200} height={12} className="mt-2" />

Props:

| Prop | Type | Default | Description | | ----------- | ------------------ | -------- | ----------- | | width | string \| number | "100%" | | | height | string \| number | "12px" | | | className | string | - | |

Slider

Mouse-drag range input. Fires onChange on release.

import { Slider } from "@/components/ui/slider";

<Slider value={volume} onChange={setVolume} min={0} max={100} />;

Props:

| Prop | Type | Default | Description | | ---------- | ------------------------- | ------- | ----------- | | value | number | - | | | onChange | (value: number) => void | - | | | min | number | 0 | | | max | number | 100 | |

Stepper

Multi-step progress indicator. Steps are marked done, current, or upcoming.

import { Stepper, StepperStep } from "@/components/ui/stepper";

<Stepper currentStep={1} onStepChange={setStep}>
  <StepperStep label="Account" />
  <StepperStep label="Team" />
  <StepperStep label="Billing" />
  <StepperStep label="Review" />
</Stepper>;

Stepper props:

| Prop | Type | Default | Description | | -------------- | ------------------------ | ------- | ------------------------------------ | | currentStep | number | 0 | Zero-indexed active step | | onStepChange | (step: number) => void | - | Called when a step circle is clicked |

Done steps show a check icon. The current step has a blue glow ring. Connecting lines fill blue as steps are completed.

Switch

Toggle switch with label.

import { Switch } from "@/components/ui/switch";

<Switch
  label="Enable two-factor authentication"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>;

Props:

| Prop | Type | Description | | ---------- | -------------------- | ----------- | | label | string | Label text | | checked | boolean | | | onChange | ChangeEventHandler | | | disabled | boolean | |

Switch row

Full-width labeled switch for use in settings lists. The entire row is clickable.

import { SwitchRow } from "@/components/ui/switch-row";

<SwitchRow label="Marketing emails" checked={marketing} onChange={setMarketing} />
<SwitchRow label="Security alerts" checked={alerts} onChange={setAlerts} />

SwitchRow props:

| Prop | Type | Description | | ---------- | ---------------------------- | ---------------------------------------------- | | label | string | | | checked | boolean | | | onChange | (checked: boolean) => void | Receives the new value directly, not the event |

Table

Base table primitives. Use DataTable for the full feature set. Use Table directly when you need complete control over rendering.

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableFooter,
} from "@/components/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>api-server</TableCell>
      <TableCell>
        <Badge variant="success">Running</Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>;

Table props:

| Prop | Type | Default | Description | | --------- | --------------------- | ----------- | --------------------------------------------------------------------- | | variant | "default" \| "card" | "default" | "card" enables table-fixed layout, used internally by DataTable |

Tabs

Tab navigation with two visual variants.

import { Tabs, TabsList, TabsTab, TabsPanel } from "@/components/ui/tabs";

<Tabs defaultValue="overview">
  <TabsList variant="underline">
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="deployments" count={3}>
      Deployments
    </TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">...</TabsPanel>
  <TabsPanel value="deployments">...</TabsPanel>
  <TabsPanel value="settings">...</TabsPanel>
</Tabs>;

Tabs props:

| Prop | Type | Default | Description | | --------------- | ------------------------- | ------- | ------------------------------- | | defaultValue | string | - | Uncontrolled default active tab | | value | string | - | Controlled active tab | | onValueChange | (value: string) => void | - | |

TabsList props:

| Prop | Type | Default | Description | | --------- | -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | variant | "default" \| "underline" | "default" | "default" is pill-style on a gray background. "underline" is a borderless tab bar with an animated bottom indicator |

TabsTab props:

| Prop | Type | Description | | ------- | -------- | ----------------------------------------------- | | value | string | | | count | number | Optional count badge rendered next to the label |

Toggle

Button that maintains a pressed/unpressed state.

import { Toggle } from "@/components/ui/toggle";

<Toggle pressed={bold} onPressedChange={setBold} label="Bold" />
<Toggle pressed={italic} onPressedChange={setItalic} label="Italic" variant="outline" />

Props:

| Prop | Type | Default | Description | | ----------------- | ---------------------------- | ----------- | ----------------------------------------------------------------------------- | | pressed | boolean | false | | | onPressedChange | (pressed: boolean) => void | - | | | label | string | - | Button text | | variant | "default" \| "outline" | "default" | "default" fills with --foreground when pressed. "outline" adds a border | | disabled | boolean | false | |

Tooltip

CSS-only hover tooltip. No JavaScript or portals - the tooltip is absolutely positioned relative to the trigger.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost">
      <Icon name="copy" size={16} />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Copy to clipboard</TooltipContent>
</Tooltip>;

TooltipTrigger props:

| Prop | Type | Default | Description | | --------- | --------- | ------- | ------------------------------------------------------------------------------ | | asChild | boolean | false | When true, merges props onto the child element instead of wrapping with a span |

The tooltip appears above the trigger. It fades in on group hover using Tailwind's group class on the Tooltip wrapper.

Registry API

The registry exposes two endpoints. Both return JSON and include Access-Control-Allow-Origin: *.

GET /r/:name

Returns the full registry item for the named component, with file content embedded. This is what the shadcn CLI fetches when installing a component.

Response shape:

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "...",
  "dependencies": ["@base-ui-components/react"],
  "registryDependencies": ["https://sharp.dragos.cc/r/utils"],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "type": "registry:ui",
      "target": "components/ui/button.tsx",
      "content": "..."
    }
  ]
}

Internal registryDependencies (components defined in this registry) are rewritten to absolute URLs so the CLI can resolve them without any additional configuration.

GET /r/index.json

Returns an index of all registry items with their install URLs. Useful for tooling and discovery.

GET /registry.json

Returns the full registry including the url template used by the shadcn CLI to resolve @nemu-ai/sharp-ui/component installs.

License

MIT