shadcn-ui registry catalog (new-york-v4)
shadcn-ui is not an installable package — it's a registry of source files you copy into your project. The "new-york-v4" style is the modern default. Each entry below is a component you can npx shadcn add <name>.
UI primitives (57)
|
|
|
|
_registry |
accordion |
alert-dialog |
alert |
aspect-ratio |
avatar |
badge |
breadcrumb |
button-group |
button |
calendar |
card |
carousel |
chart |
checkbox |
collapsible |
combobox |
command |
context-menu |
dialog |
direction |
drawer |
dropdown-menu |
empty |
field |
form |
hover-card |
input-group |
input-otp |
input |
item |
kbd |
label |
menubar |
native-select |
navigation-menu |
pagination |
popover |
progress |
radio-group |
resizable |
scroll-area |
select |
separator |
sheet |
sidebar |
skeleton |
slider |
sonner |
spinner |
switch |
table |
tabs |
textarea |
toggle-group |
toggle |
tooltip |
|
|
|
Blocks (28)
|
|
|
|
_registry |
dashboard-01 |
login-01 |
login-02 |
login-03 |
login-04 |
login-05 |
sidebar-01 |
sidebar-02 |
sidebar-03 |
sidebar-04 |
sidebar-05 |
sidebar-06 |
sidebar-07 |
sidebar-08 |
sidebar-09 |
sidebar-10 |
sidebar-11 |
sidebar-12 |
sidebar-13 |
sidebar-14 |
sidebar-15 |
sidebar-16 |
signup-01 |
signup-02 |
signup-03 |
signup-04 |
signup-05 |
Charts (70)
|
|
|
|
chart-area-axes |
chart-area-default |
chart-area-gradient |
chart-area-icons |
chart-area-interactive |
chart-area-legend |
chart-area-linear |
chart-area-stacked-expand |
chart-area-stacked |
chart-area-step |
chart-bar-active |
chart-bar-default |
chart-bar-horizontal |
chart-bar-interactive |
chart-bar-label-custom |
chart-bar-label |
chart-bar-mixed |
chart-bar-multiple |
chart-bar-negative |
chart-bar-stacked |
chart-line-default |
chart-line-dots-colors |
chart-line-dots-custom |
chart-line-dots |
chart-line-interactive |
chart-line-label-custom |
chart-line-label |
chart-line-linear |
chart-line-multiple |
chart-line-step |
chart-pie-donut-active |
chart-pie-donut-text |
chart-pie-donut |
chart-pie-interactive |
chart-pie-label-custom |
chart-pie-label-list |
chart-pie-label |
chart-pie-legend |
chart-pie-separator-none |
chart-pie-simple |
chart-pie-stacked |
chart-radar-default |
chart-radar-dots |
chart-radar-grid-circle-fill |
chart-radar-grid-circle-no-lines |
chart-radar-grid-circle |
chart-radar-grid-custom |
chart-radar-grid-fill |
chart-radar-grid-none |
chart-radar-icons |
chart-radar-label-custom |
chart-radar-legend |
chart-radar-lines-only |
chart-radar-multiple |
chart-radar-radius |
chart-radial-grid |
chart-radial-label |
chart-radial-shape |
chart-radial-simple |
chart-radial-stacked |
chart-radial-text |
chart-tooltip-advanced |
chart-tooltip-default |
chart-tooltip-formatter |
chart-tooltip-icons |
chart-tooltip-indicator-line |
chart-tooltip-indicator-none |
chart-tooltip-label-custom |
chart-tooltip-label-formatter |
chart-tooltip-label-none |
|
|
Hooks (2)
Examples (230)
|
|
|
|
accordion-demo |
alert-demo |
alert-destructive |
alert-dialog-demo |
aspect-ratio-demo |
avatar-demo |
badge-demo |
badge-destructive |
badge-outline |
badge-secondary |
breadcrumb-demo |
breadcrumb-dropdown |
breadcrumb-ellipsis |
breadcrumb-link |
breadcrumb-responsive |
breadcrumb-separator |
button-as-child |
button-default |
button-demo |
button-destructive |
button-ghost |
button-group-demo |
button-group-dropdown |
button-group-input-group |
button-group-input |
button-group-nested |
button-group-orientation |
button-group-popover |
button-group-select |
button-group-separator |
button-group-size |
button-group-split |
button-icon |
button-link |
button-loading |
button-outline |
button-rounded |
button-secondary |
button-size |
button-with-icon |
calendar-demo |
calendar-hijri |
card-demo |
card-with-form |
carousel-api |
carousel-demo |
carousel-orientation |
carousel-plugin |
carousel-size |
carousel-spacing |
chart-bar-demo-axis |
chart-bar-demo-grid |
chart-bar-demo-legend |
chart-bar-demo-tooltip |
chart-bar-demo |
chart-tooltip-demo |
checkbox-demo |
checkbox-disabled |
checkbox-with-text |
collapsible-demo |
combobox-demo |
combobox-dropdown-menu |
combobox-popover |
combobox-responsive |
command-demo |
command-dialog |
context-menu-demo |
data-table-demo |
date-picker-demo |
date-picker-with-presets |
date-picker-with-range |
dialog-close-button |
dialog-demo |
drawer-demo |
drawer-dialog |
dropdown-menu-checkboxes |
dropdown-menu-demo |
dropdown-menu-dialog |
dropdown-menu-radio-group |
empty-avatar-group |
empty-avatar |
empty-background |
empty-demo |
empty-icon |
empty-input-group |
empty-outline |
field-checkbox |
field-choice-card |
field-demo |
field-fieldset |
field-group |
field-input |
field-radio |
field-responsive |
field-select |
field-slider |
field-switch |
field-textarea |
form-next-complex |
form-next-demo |
form-rhf-array |
form-rhf-checkbox |
form-rhf-complex |
form-rhf-demo |
form-rhf-input |
form-rhf-password |
form-rhf-radiogroup |
form-rhf-select |
form-rhf-switch |
form-rhf-textarea |
form-tanstack-array |
form-tanstack-checkbox |
form-tanstack-complex |
form-tanstack-demo |
form-tanstack-input |
form-tanstack-radiogroup |
form-tanstack-select |
form-tanstack-switch |
form-tanstack-textarea |
hover-card-demo |
input-demo |
input-disabled |
input-file |
input-group-button-group |
input-group-button |
input-group-custom |
input-group-demo |
input-group-dropdown |
input-group-icon |
input-group-label |
input-group-spinner |
input-group-text |
input-group-textarea |
input-group-tooltip |
input-otp-controlled |
input-otp-demo |
input-otp-pattern |
input-otp-separator |
input-with-button |
input-with-label |
input-with-text |
item-avatar |
item-demo |
item-dropdown |
item-group |
item-header |
item-icon |
item-image |
item-link |
item-size |
item-variant |
kbd-button |
kbd-demo |
kbd-group |
kbd-input-group |
kbd-tooltip |
label-demo |
menubar-demo |
mode-toggle |
native-select-demo |
native-select-disabled |
native-select-groups |
native-select-invalid |
navigation-menu-demo |
pagination-demo |
popover-demo |
progress-demo |
radio-group-demo |
resizable-demo-with-handle |
resizable-demo |
resizable-handle |
resizable-vertical |
scroll-area-demo |
scroll-area-horizontal-demo |
select-demo |
select-scrollable |
separator-demo |
sheet-demo |
sheet-side |
skeleton-card |
skeleton-demo |
slider-demo |
sonner-demo |
sonner-types |
spinner-badge |
spinner-basic |
spinner-button |
spinner-color |
spinner-custom |
spinner-demo |
spinner-empty |
spinner-input-group |
spinner-item |
spinner-size |
switch-demo |
table-demo |
tabs-demo |
textarea-demo |
textarea-disabled |
textarea-with-button |
textarea-with-label |
textarea-with-text |
toggle-demo |
toggle-disabled |
toggle-group-demo |
toggle-group-disabled |
toggle-group-lg |
toggle-group-outline |
toggle-group-single |
toggle-group-sm |
toggle-group-spacing |
toggle-lg |
toggle-outline |
toggle-sm |
toggle-with-text |
tooltip-demo |
typography-blockquote |
typography-demo |
typography-h1 |
typography-h2 |
typography-h3 |
typography-h4 |
typography-inline-code |
typography-large |
typography-lead |
typography-list |
typography-muted |
typography-p |
typography-small |
typography-table |
|
|
How to use
npx shadcn@latest add button card dialog
Components land in components/ui/. Edit them — they are yours, not a dependency.
When to pick shadcn over MUI/Ant
- You want Tailwind, not CSS-in-JS.
- You want to own the component code.
- You're using Radix primitives or Headless UI elsewhere.
- You want minimal bundle (no theme runtime).
When NOT to pick shadcn
- You need RTL out of the box (less polished than MUI/Ant).
- You need form/data-table primitives that are deeply pre-wired (use Ant Design Form/Table).
- You ship to non-React frameworks.