Primitives

Button, Input, Label, Card, Table, Badge — every primitive in one place, every variant on screen.

stable

Source: src/components/ui/ Install: npx shadcn@latest add button input label card table badge --yes

Rendered example — light + dark

Light

Button

Input + Label

Email address

Badge

DefaultSecondaryDestructiveOutline

Card

Card title

Card description goes here.

Card content — any React node can go here.

Table

A simple data table demo.
Name	Status	Role
Alice	Active	Admin
Bob	Invited	Member
Carol	Pending	Viewer

Dark

Button

Input + Label

Email address

Badge

DefaultSecondaryDestructiveOutline

Card

Card title

Card description goes here.

Card content — any React node can go here.

Table

A simple data table demo.
Name	Status	Role
Alice	Active	Admin
Bob	Invited	Member
Carol	Pending	Viewer

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/ for the full API.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export function SignIn() {
  return (
    <form className="space-y-3">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
      <Button type="submit">Sign in</Button>
    </form>
  );
}

Props API

ButtonProps

Prop	Type	Default	Description
`asChild` opt	`boolean`	`false`	—

CalloutProps

Prop	Type	Default	Description
`title`	`string`	—	—
`variant` opt	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	—
`icon` opt	`React.ReactNode`	—	Optional icon node (e.g. a Lucide icon element) shown beside the title.

DataTableProps

Prop	Type	Default	Description
`columns`	`ColumnDef<TData, TValue>[]`	—	—
`data`	`TData[]`	—	—
`initialColumnVisibility` opt	`VisibilityState`	`{}`	Initial column visibility — column id to visible boolean.
`initialGlobalFilter` opt	`string`	`''`	Initial global filter string.
`height` opt	`string \| number`	`'500px'`	Height of the scroll container in CSS units. Defaults to '500px'.
`estimateRowSize` opt	`number`	`40`	Estimated row height in px for virtualization. Defaults to 40.
`syncToUrl` opt	`boolean \| { key: string }`	`false`	Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).

DividerProps

Prop	Type	Default	Description
`children` opt	`React.ReactNode`	—	Optional centered text label rendered between two rules.

MetricProps

Prop	Type	Default	Description
`value`	`string \| number`	—	—
`label` opt	`string`	—	—
`delta` opt	`{ value: number; /** Semantic trend direction. Controls col…`	—	—

ProgressBarProps

Prop	Type	Default	Description
`value`	`number`	—	Completion percentage, clamped to [0, 100].
`label` opt	`string`	—	Accessible name for screen readers.

TrackerProps

Prop	Type	Default	Description
`data`	`TrackerBlock[]`	—	—