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 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>
  );
}