Skip to content
TypeSafe UI

Search

Jump to a component or page.

TypeSafe UI · Small parts. Clear interfaces.

Component library

18 components. Preview, inspect, and reuse.

Actions

Buttons, badges, and menus. The parts people press.

Button

Component

One filled action per surface. Everything else is outline or ghost.

Install Button
pnpm dlx shadcn@latest add button
Supported states
  • default
  • hover
  • focus
  • disabled
  • loading

Badge

Component

A small label for status, counts, and categories.

DefaultSecondaryOutlineDestructiveVerifiedLive · your key
Install Badge
pnpm dlx shadcn@latest add badge
Supported states
  • default
  • secondary
  • outline
  • destructive

Forms

Inputs and toggles with clear states and visible focus.

Input

Component

A single-line text field with invalid and disabled states.

Type without an @ to see the invalid state.

Install Input
pnpm dlx shadcn@latest add input
Supported states
  • default
  • focus
  • invalid
  • disabled

Input group

Component

An input with leading or trailing addons, text, and buttons.

⌘K
https://
Install Input group
pnpm dlx shadcn@latest add input-group
Supported states
  • default
  • focus
  • disabled

Textarea

Component

Multi-line text that grows with the message.

51 characters

Install Textarea
pnpm dlx shadcn@latest add textarea
Supported states
  • default
  • focus
  • invalid
  • disabled

Select

Component

Pick one option from a fixed list. Groups and labels included.

Install Select
pnpm dlx shadcn@latest add select
Supported states
  • closed
  • open
  • selected
  • disabled

Checkbox

Component

A binary choice that can also be indeterminate.

Install Checkbox
pnpm dlx shadcn@latest add checkbox
Supported states
  • unchecked
  • checked
  • indeterminate
  • disabled

Switch

Component

An on-off control that applies immediately.

Install Switch
pnpm dlx shadcn@latest add switch
Supported states
  • off
  • on
  • disabled

Layout

Surfaces, dividers, and tabs that hold everything else.

Card

Component

A surface with header, action slot, content, and footer.

Decision
Which tool fits this request?
search_docs0.91
open_ticket0.07
escalate0.02
Install Card
pnpm dlx shadcn@latest add card
Supported states
  • default
  • compact

Tabs

Component

Switch between related panels. Default pill or underline style.

Rendered output goes here.
One choice question, one round trip.
Install Tabs
pnpm dlx shadcn@latest add tabs
Supported states
  • active
  • inactive
  • disabled

Separator

Component

A thin rule between sections, horizontal or vertical.

TypeSafe UI

Small parts. Clear interfaces.

LibraryLabGitHub
Install Separator
pnpm dlx shadcn@latest add separator
Supported states
  • horizontal
  • vertical

Scroll area

Component

Custom scrollbars that match the theme on every platform.

Install Scroll area
pnpm dlx shadcn@latest add scroll-area
Supported states
  • idle
  • scrolling

Kbd

Component

Keyboard keys and shortcut groups.

⌘⇧EnterEsc

Press⌘Kto search, orDto toggle the theme.

Install Kbd
pnpm dlx shadcn@latest add kbd
Supported states
  • default

Overlays

Dialogs, sheets, tooltips, and the command palette.

Dialog

Component

A modal for focused tasks and confirmations.

Install Dialog
pnpm dlx shadcn@latest add dialog
Supported states
  • closed
  • open

Sheet

Component

A panel that slides in from any edge.

Install Sheet
pnpm dlx shadcn@latest add sheet
Supported states
  • closed
  • open

Tooltip

Component

A short hint on hover or focus.

Install Tooltip
pnpm dlx shadcn@latest add tooltip
Supported states
  • hidden
  • visible

Command

Component

A searchable command palette. Bound to ⌘K on this site.

Install Command
pnpm dlx shadcn@latest add command
Supported states
  • closed
  • open
  • empty