@uiable

Free, open-source UI component library built with Next.js, React 19, Tailwind CSS v4, and shadcn/ui — beautifully designed components you can copy, customize, and make your own.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://uiable.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://uiable.com/r/registry.json

bun bunx shadcn@latest add https://uiable.com/r/registry.json

fetch registry curl -s https://uiable.com/r/registry.json

Components

60 total

Basic Accordion ui

Accordion Basic variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-basic.json

Borders Accordion ui

Accordion Borders variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-borders.json

Card Accordion ui

Accordion Card variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-card.json

Disabled Accordion ui

Accordion Disabled variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-disabled.json

Flush Accordion ui

Accordion Flush variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-flush.json

Multiple Accordion ui

Accordion Multiple variant for accordion.

npx shadcn@latest add https://uiable.com/r/uiable-accordion-multiple.json

Action Alert ui

Alert Action variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-action.json

Basic Alert ui

Alert Basic variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-basic.json

Colors Alert ui

Alert Colors variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-colors.json

Destructive Alert ui

Alert Destructive variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-destructive.json

Basic Alert Dialog ui

Alert Dialog Basic variant for alert-dialog.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-basic.json

Destructive Alert Dialog ui

Alert Dialog Destructive variant for alert-dialog.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-destructive.json

Media Alert Dialog ui

Alert Dialog Media variant for alert-dialog.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-media.json

Small Alert Dialog ui

Alert Dialog Small variant for alert-dialog.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-small.json

Small Media Alert Dialog ui

Alert Dialog Small Media variant for alert-dialog.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-small-media.json

Danger Dismissible Alert ui

Alert Dismissible Danger variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-danger.json

Dark Dismissible Alert ui

Alert Dismissible Dark variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-dark.json

Info Dismissible Alert ui

Alert Dismissible Info variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-info.json

Primary Dismissible Alert ui

Alert Dismissible Primary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-primary.json

Secondary Dismissible Alert ui

Alert Dismissible Secondary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-secondary.json

Success Dismissible Alert ui

Alert Dismissible Success variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-success.json

Warning Dismissible Alert ui

Alert Dismissible Warning variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-warning.json

Danger Icon Alert ui

Alert Icon Danger variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-danger.json

Dark Icon Alert ui

Alert Icon Dark variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-dark.json

Info Icon Alert ui

Alert Icon Info variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-info.json

Primary Icon Alert ui

Alert Icon Primary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-primary.json

Secondary Icon Alert ui

Alert Icon Secondary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-secondary.json

Success Icon Alert ui

Alert Icon Success variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-success.json

Warning Icon Alert ui

Alert Icon Warning variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-warning.json

Danger Light Alert ui

Alert Light Danger variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-danger.json

Light Dark Alert ui

Alert Light Dark variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-dark.json

Light Info Alert ui

Alert Light Info variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-info.json

Light Primary Alert ui

Alert Light Primary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-primary.json

Light Secondary Alert ui

Alert Light Secondary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-secondary.json

Light Success Alert ui

Alert Light Success variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-success.json

Light Warning Alert ui

Alert Light Warning variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-light-warning.json

Solid Danger Alert ui

Alert Solid Danger variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-danger.json

Solid Dark Alert ui

Alert Solid Dark variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-dark.json

Solid Info Alert ui

Alert Solid Info variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-info.json

Solid Primary Alert ui

Alert Solid Primary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-primary.json

Solid Secondary Alert ui

Alert Solid Secondary variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-secondary.json

Solid Success Alert ui

Alert Solid Success variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-success.json

Solid Warning Alert ui

Alert Solid Warning variant for alert.

npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-warning.json

Portrait Aspect Ratio ui

Aspect Ratio Portrait variant for aspect-ratio.

npx shadcn@latest add https://uiable.com/r/uiable-aspect-ratio-portrait.json

Square Aspect Ratio ui

Aspect Ratio Square variant for aspect-ratio.

npx shadcn@latest add https://uiable.com/r/uiable-aspect-ratio-square.json

Vertical Attachment ui

Attachment Vertical variant for attachment.

npx shadcn@latest add https://uiable.com/r/uiable-attachment-vertical.json

Group ui

Attachment Group variant for attachment.

npx shadcn@latest add https://uiable.com/r/uiable-attachment-group.json

States ui

Attachment States variant for attachment.

npx shadcn@latest add https://uiable.com/r/uiable-attachment-states.json

Sizes ui

Attachment Sizes variant for attachment.

npx shadcn@latest add https://uiable.com/r/uiable-attachment-sizes.json

Trigger ui

Attachment Trigger variant for attachment.

npx shadcn@latest add https://uiable.com/r/uiable-attachment-triggers.json

Badge Avatar ui

Avatar Badge variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-badge.json

Badge Icon Avatar ui

Avatar Badge Icon variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-badge-icon.json

Basic Avatar ui

Avatar Basic variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-basic.json

Dropdown Avatar ui

Avatar Dropdown variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-dropdown.json

Group Avatar ui

Avatar Group variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-group.json

Group Count Avatar ui

Avatar Group Count variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-group-count.json

Group Count Icon Avatar ui

Avatar Group Count Icon variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-group-count-icon.json

Size Avatar ui

Avatar Size variant for avatar.

npx shadcn@latest add https://uiable.com/r/uiable-avatar-size.json

Colors Badge ui

Badge Colors variant for badge.

npx shadcn@latest add https://uiable.com/r/uiable-badge-colors.json

Icon Badge ui

Badge Icon variant for badge.

npx shadcn@latest add https://uiable.com/r/uiable-badge-icon.json