Recipe catalog

Badge shell — shape, sizing, focus ring. No bg/text/border color so variants can supply their own tone without conflicts.

inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2

Default neutral badge.

inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground

Success tone badge.

inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200

Warning tone badge.

inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900 dark:text-amber-200

Danger tone badge.

inline-flex items-center gap-1 rounded-full bg-destructive/15 px-2 py-0.5 text-xs font-medium text-destructive

Info tone badge.

inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-xs font-medium text-primary

Outline badge — no fill.

inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs font-medium text-foreground

Shared button base — sizing, focus ring, disabled state.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50

Primary call-to-action button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90

Small primary button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 px-3 py-1.5 text-xs

Large primary button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 text-base

Secondary button — bordered surface tone.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80

Small secondary button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80 px-3 py-1.5 text-xs

Large secondary button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80 px-6 py-3 text-base

Ghost button — text only, no background.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 text-foreground hover:bg-muted

Small ghost button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 text-foreground hover:bg-muted px-3 py-1.5 text-xs

Large ghost button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 text-foreground hover:bg-muted px-6 py-3 text-base

Destructive button.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90

Outline button — bordered without fill.

inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 border border-primary text-primary hover:bg-primary/10

Square icon-only button.

inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50

Default content card with border, padding, and surface color.

rounded-lg border border-border bg-card text-card-foreground p-4

Card with raised shadow for emphasis.

rounded-lg border border-border bg-card text-card-foreground p-4 shadow-md

Card without border, on a muted surface.

rounded-lg bg-muted text-foreground p-4

Clickable card with hover and focus-visible states.

rounded-lg border border-border bg-card text-card-foreground p-4 cursor-pointer transition-shadow hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Card header region with bottom divider.

mb-3 border-b border-border pb-3

Card body region.

py-1

Card footer with top divider and right-aligned actions.

mt-3 flex items-center justify-end gap-2 border-t border-border pt-3

Inline code span.

rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground

Block of preformatted code.

overflow-x-auto rounded-md border border-border bg-muted p-4 font-mono text-sm leading-6 text-foreground

Keyboard shortcut hint.

inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground shadow-sm

Modal dialog wrapper — covers the viewport, centers content.

fixed inset-0 z-50 flex items-center justify-center p-4

Dimmed overlay behind the dialog.

fixed inset-0 z-40 bg-black/50

Dialog content panel.

relative z-50 w-full max-w-md rounded-lg border border-border bg-popover text-popover-foreground p-6 shadow-xl

Dialog header region with title.

mb-4 flex flex-col gap-1

Dialog footer with right-aligned actions.

mt-6 flex items-center justify-end gap-2

Empty-state container.

flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-border p-8 text-center

Empty-state icon slot.

flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground

Empty-state title text.

text-base font-semibold text-foreground

Empty-state supporting description.

max-w-sm text-sm text-muted-foreground

Default informational alert.

flex items-start gap-3 rounded-md border border-border bg-card p-4 text-sm text-card-foreground

Success alert.

flex items-start gap-3 rounded-md border border-green-200 bg-green-50 p-4 text-sm text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100

Warning alert.

flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100

Danger alert.

flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive

Informational alert.

flex items-start gap-3 rounded-md border border-primary/30 bg-primary/10 p-4 text-sm text-primary

Inline callout — flush left edge accent.

border-l-4 border-primary bg-primary/10 p-4 text-sm text-foreground

Floating toast notification.

pointer-events-auto flex items-start gap-3 rounded-md border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg

Full-width banner spanning the viewport.

w-full bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground

Text input field.

block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50

shadcn/dinachi-style input shell — transparent background, h-9, file/ placeholder/selection/aria-invalid/focus-visible states baked in.

flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40

Input in error state.

block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50 border-destructive focus:border-destructive focus:outline-destructive

Multi-line textarea.

block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50

Native select control.

block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50

Checkbox input.

h-4 w-4 rounded border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring

Radio input.

h-4 w-4 border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring

Form field wrapper — label + input + help/error.

flex flex-col gap-1.5

Form field in error state.

flex flex-col gap-1.5

Grouped form section with optional legend.

flex flex-col gap-4 rounded-md border border-border p-4

Field-level helper text.

text-xs text-muted-foreground

Small icon — 16px.

h-4 w-4 shrink-0

Default icon size — 20px.

h-5 w-5 shrink-0

Large icon — 24px.

h-6 w-6 shrink-0

Icon with muted color.

text-muted-foreground

Vertical stack with extra-small gap.

flex flex-col gap-1

Vertical stack with small gap.

flex flex-col gap-2

Vertical stack with medium gap.

flex flex-col gap-4

Vertical stack with large gap.

flex flex-col gap-8

Horizontal row with default gap and centered items.

flex flex-row items-center gap-2

Horizontal row with space between children.

flex flex-row items-center justify-between gap-2

Horizontal row aligned to the end.

flex flex-row items-center justify-end gap-2

Two-column responsive grid.

grid grid-cols-1 gap-4 sm:grid-cols-2

Three-column responsive grid.

grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3

Four-column responsive grid.

grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4

Center content horizontally and vertically.

flex items-center justify-center

Fill the available width and height.

h-full w-full

Vertical list with default gap.

flex flex-col gap-1

Single list item.

flex items-center gap-2 rounded-md px-3 py-2 text-sm text-foreground

List with dividing borders between items.

divide-y divide-border rounded-md border border-border

Definition list container.

grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-4

Definition term.

text-sm font-medium text-muted-foreground

Definition description.

text-sm text-foreground sm:col-span-2

User/profile avatar.

inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground

Small avatar.

inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground h-6 w-6 text-xs

Large avatar.

inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground h-14 w-14 text-base

Small image thumbnail.

h-16 w-16 rounded-md object-cover

1:1 aspect-ratio wrapper.

aspect-square w-full overflow-hidden rounded-md

16:9 aspect-ratio wrapper.

aspect-video w-full overflow-hidden rounded-md

Top-level nav container.

flex items-center gap-1

Inactive nav link with hover/focus states.

inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Active nav link.

inline-flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-sm font-medium text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Breadcrumb trail container.

flex items-center gap-1.5 text-sm text-muted-foreground

Inactive tab control.

inline-flex items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Active tab control.

inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Progress bar track (background).

h-2 w-full overflow-hidden rounded-full bg-muted

Progress bar fill.

h-full rounded-full bg-primary transition-all

Indeterminate loading spinner.

inline-block h-4 w-4 animate-spin rounded-full border-2 border-border border-t-primary

Default rectangular skeleton placeholder.

animate-pulse rounded-md bg-muted

Single-line text skeleton.

h-4 w-full animate-pulse rounded bg-muted

Circular skeleton (avatar/icon).

h-10 w-10 animate-pulse rounded-full bg-muted

Default page/section surface.

bg-background text-foreground

Muted surface — secondary background.

bg-muted text-foreground

Accent surface — soft brand background.

bg-accent text-accent-foreground

Centered content wrapper with a max width.

mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8

Narrow content wrapper for prose.

mx-auto w-full max-w-3xl px-4 sm:px-6

Horizontal divider line.

shrink-0 h-px w-full bg-border

Vertical divider line.

shrink-0 h-full w-px bg-border

Scroll container for a wide table — keeps overflow horizontal.

w-full overflow-x-auto rounded-md border border-border

Data table base.

w-full border-collapse text-left text-sm text-foreground

Table header cell.

border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground

Table body cell.

border-b border-border px-3 py-2

Row hover state.

transition-colors hover:bg-muted

Table with zebra striping on alternating rows.

w-full border-collapse text-left text-sm text-foreground [&_tbody_tr:nth-child(odd)]:bg-muted

Top-level page heading.

text-4xl font-bold tracking-tight text-foreground

Large section heading.

text-2xl font-semibold tracking-tight text-foreground

Medium heading.

text-xl font-semibold text-foreground

Small heading.

text-base font-semibold text-foreground

Default body text.

text-sm leading-6 text-foreground

Lead paragraph — larger body copy for hero/intro sections.

text-lg leading-relaxed text-muted-foreground

Muted secondary text.

text-sm text-muted-foreground

Form label text.

text-sm font-medium text-foreground

Caption — small supporting text.

text-xs text-muted-foreground

Inline link with hover/focus states.

text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring

Floating tooltip bubble.

pointer-events-none z-50 rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md