UI Primitives

Complete reference for all UI primitive components available in the registry.

UI Primitives

All UI primitive components follow shadcn-ui patterns and are built on Radix UI primitives for accessibility and functionality.

Primitives

Button

Displays a button or a component that looks like a button.

Install: npx shadcn add https://widget.aomi.dev/r/button.json

Variants: default, destructive, outline, secondary, ghost, link
Sizes: default, sm, lg, icon

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

<Button variant="default" size="default">Click me</Button>

Input

Displays a form input field.

Install: npx shadcn add https://widget.aomi.dev/r/input.json

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

<Input type="text" placeholder="Enter text..." />

Label

Renders an accessible label associated with controls.

Install: npx shadcn add https://widget.aomi.dev/r/label.json

import { Label } from "@/components/ui/label";

<Label htmlFor="email">Email</Label>

Overlays

Dialog

A window overlaid on either the primary window or another dialog window.

Install: npx shadcn add https://widget.aomi.dev/r/dialog.json

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Sheet

Extends the Dialog component to display content that complements the main content of the screen. Typically slides in from the side.

Install: npx shadcn add https://widget.aomi.dev/r/sheet.json

Sides: top, right, bottom, left

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile here.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Drawer

A drawer component for mobile navigation menus and similar interfaces. Slides in from the bottom on mobile.

Install: npx shadcn add https://widget.aomi.dev/r/drawer.json

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Displays rich content in a portal, triggered by a button.

Install: npx shadcn add https://widget.aomi.dev/r/popover.json

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

Displays a sidebar navigation component.

Install: npx shadcn add https://widget.aomi.dev/r/sidebar.json

import { Sidebar, SidebarContent, SidebarTrigger } from "@/components/ui/sidebar";

<Sidebar>
  <SidebarTrigger />
  <SidebarContent>Navigation content</SidebarContent>
</Sidebar>

Displays the path to the current resource using a hierarchy of links.

Install: npx shadcn add https://widget.aomi.dev/r/breadcrumb.json

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Feedback

Alert

Displays a callout for user attention.

Install: npx shadcn add https://widget.aomi.dev/r/alert.json

Variants: default, destructive

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Install: npx shadcn add https://widget.aomi.dev/r/tooltip.json

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Sonner

Shadcn wrapper for Sonner toasts.

Install: npx shadcn add https://widget.aomi.dev/r/sonner.json

import { toast } from "sonner";
import { Toaster } from "@/components/ui/sonner";

<Toaster />
<button onClick={() => toast("Event has been created")}>
  Show Toast
</button>

Data Display

Card

Displays a card with header, content, and footer.

Install: npx shadcn add https://widget.aomi.dev/r/card.json

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Badge

Displays a badge or a component that looks like a badge.

Install: npx shadcn add https://widget.aomi.dev/r/badge.json

Variants: default, secondary, destructive, outline

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

<Badge variant="default">Badge</Badge>

Avatar

An image element with a fallback for representing the user.

Install: npx shadcn add https://widget.aomi.dev/r/avatar.json

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

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Skeleton

Use to show a placeholder while content is loading.

Install: npx shadcn add https://widget.aomi.dev/r/skeleton.json

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

<Skeleton className="w-[100px] h-[20px] rounded-full" />

Layout

Separator

Visually or semantically separates content.

Install: npx shadcn add https://widget.aomi.dev/r/separator.json

import { Separator } from "@/components/ui/separator";

<div>
  <div>Content 1</div>
  <Separator />
  <div>Content 2</div>
</div>

Collapsible

An interactive component which expands/collapses a panel.

Install: npx shadcn add https://widget.aomi.dev/r/collapsible.json

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Install: npx shadcn add https://widget.aomi.dev/r/accordion.json

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Command

Fast, composable, unstyled command menu for React. Perfect for command palettes and search interfaces.

Install: npx shadcn add https://widget.aomi.dev/r/command.json

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Complete Component List

All available UI components in the registry:

alert - Callout for user attention
accordion - Vertically stacked expandable sections
avatar - User image with fallback
badge - Small status badge
breadcrumb - Navigation hierarchy
button - Interactive button element
card - Container with header, content, footer
collapsible - Expandable/collapsible panel
command - Command palette component
dialog - Modal dialog overlay
drawer - Mobile-friendly drawer panel
input - Text input field
label - Form label
popover - Contextual popup
separator - Visual divider
sheet - Side panel overlay
sidebar - Navigation sidebar
skeleton - Loading placeholder
sonner - Toast notifications
tooltip - Hover information popup

UI Primitives

On this page