ActiveAnimated components18
@uiable
Animated components · MIT · data updated 2026-07-28
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.
accessibilityanimationbackgroundsbuttonscardsdesign-systemiconsloadersmedianavigationoverlays
Install
npx shadcn@latest add https://uiable.com/r/registry.jsonHealth
StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues3
ArchivedNo
Stars18
Components (632)
uiable-accordion-basicuiable-accordion-bordersuiable-accordion-carduiable-accordion-disableduiable-accordion-flushuiable-accordion-multipleuiable-alert-actionuiable-alert-basicuiable-alert-colorsuiable-alert-destructiveuiable-alert-dialog-basicuiable-alert-dialog-destructiveuiable-alert-dialog-mediauiable-alert-dialog-smalluiable-alert-dialog-small-mediauiable-alert-dismissible-dangeruiable-alert-dismissible-darkuiable-alert-dismissible-infouiable-alert-dismissible-primaryuiable-alert-dismissible-secondaryuiable-alert-dismissible-successuiable-alert-dismissible-warninguiable-alert-icon-dangeruiable-alert-icon-darkuiable-alert-icon-infouiable-alert-icon-primaryuiable-alert-icon-secondaryuiable-alert-icon-successuiable-alert-icon-warninguiable-alert-light-dangeruiable-alert-light-darkuiable-alert-light-infouiable-alert-light-primaryuiable-alert-light-secondaryuiable-alert-light-successuiable-alert-light-warninguiable-alert-solid-dangeruiable-alert-solid-darkuiable-alert-solid-infouiable-alert-solid-primaryuiable-alert-solid-secondaryuiable-alert-solid-successuiable-alert-solid-warninguiable-aspect-ratio-portraituiable-aspect-ratio-squareuiable-attachment-groupuiable-attachment-sizesuiable-attachment-statesuiable-attachment-triggersuiable-attachment-verticaluiable-avatar-badgeuiable-avatar-badge-iconuiable-avatar-basicuiable-avatar-border-radiusuiable-avatar-counter-indicatoruiable-avatar-dropdownuiable-avatar-fallbackuiable-avatar-groupuiable-avatar-group-countuiable-avatar-group-count-icon
Components: uiable-accordion-basic, uiable-accordion-borders, uiable-accordion-card, uiable-accordion-disabled, uiable-accordion-flush, uiable-accordion-multiple, uiable-alert-action, uiable-alert-basic, uiable-alert-colors, uiable-alert-destructive, uiable-alert-dialog-basic, uiable-alert-dialog-destructive, uiable-alert-dialog-media, uiable-alert-dialog-small, uiable-alert-dialog-small-media, uiable-alert-dismissible-danger, uiable-alert-dismissible-dark, uiable-alert-dismissible-info, uiable-alert-dismissible-primary, uiable-alert-dismissible-secondary, uiable-alert-dismissible-success, uiable-alert-dismissible-warning, uiable-alert-icon-danger, uiable-alert-icon-dark, uiable-alert-icon-info, uiable-alert-icon-primary, uiable-alert-icon-secondary, uiable-alert-icon-success, uiable-alert-icon-warning, uiable-alert-light-danger, uiable-alert-light-dark, uiable-alert-light-info, uiable-alert-light-primary, uiable-alert-light-secondary, uiable-alert-light-success, uiable-alert-light-warning, uiable-alert-solid-danger, uiable-alert-solid-dark, uiable-alert-solid-info, uiable-alert-solid-primary, uiable-alert-solid-secondary, uiable-alert-solid-success, uiable-alert-solid-warning, uiable-aspect-ratio-portrait, uiable-aspect-ratio-square, uiable-attachment-group, uiable-attachment-sizes, uiable-attachment-states, uiable-attachment-triggers, uiable-attachment-vertical, uiable-avatar-badge, uiable-avatar-badge-icon, uiable-avatar-basic, uiable-avatar-border-radius, uiable-avatar-counter-indicator, uiable-avatar-dropdown, uiable-avatar-fallback, uiable-avatar-group, uiable-avatar-group-count, uiable-avatar-group-count-icon, uiable-avatar-placeholder-icon, uiable-avatar-size, uiable-badge-avatar, uiable-badge-colors, uiable-badge-gradient, uiable-badge-icon, uiable-badge-light-danger, uiable-badge-light-dark, uiable-badge-light-info, uiable-badge-light-primary, uiable-badge-light-secondary, uiable-badge-light-success, uiable-badge-light-warning, uiable-badge-link, uiable-badge-outline-danger, uiable-badge-outline-dark, uiable-badge-outline-info, uiable-badge-outline-primary, uiable-badge-outline-secondary, uiable-badge-outline-success, uiable-badge-outline-warning, uiable-badge-pill-danger, uiable-badge-pill-dark, uiable-badge-pill-info, uiable-badge-pill-primary, uiable-badge-pill-secondary, uiable-badge-pill-success, uiable-badge-pill-warning, uiable-badge-sizes, uiable-badge-solid-danger, uiable-badge-solid-dark, uiable-badge-solid-info, uiable-badge-solid-primary, uiable-badge-solid-secondary, uiable-badge-solid-success, uiable-badge-solid-warning, uiable-badge-spinner, uiable-badge-status, uiable-breadcrumb-basic, uiable-breadcrumb-collapsed, uiable-breadcrumb-dropdown, uiable-breadcrumb-ellipsis, uiable-breadcrumb-icon, uiable-breadcrumb-link, uiable-breadcrumb-page-header, uiable-breadcrumb-separator, uiable-bubble-alignment, uiable-bubble-collapsible, uiable-bubble-group, uiable-bubble-link, uiable-bubble-popover, uiable-bubble-reactions, uiable-bubble-tooltip, uiable-bubble-variants, uiable-button-animated, uiable-button-animated-border, uiable-button-animated-gradient, uiable-button-default, uiable-button-destructive, uiable-button-ghost, uiable-button-group-dropdown, uiable-button-group-icon, uiable-button-group-input, uiable-button-group-input-group, uiable-button-group-nested, uiable-button-group-orientation, uiable-button-group-popover, uiable-button-group-qty-select, uiable-button-group-select, uiable-button-group-separator, uiable-button-group-size, uiable-button-group-social, uiable-button-group-split, uiable-button-group-toolbar, uiable-button-icon, uiable-button-icon-danger, uiable-button-icon-dark, uiable-button-icon-info, uiable-button-icon-primary, uiable-button-icon-secondary, uiable-button-icon-success, uiable-button-icon-warning, uiable-button-light-danger, uiable-button-light-dark, uiable-button-light-info, uiable-button-light-primary, uiable-button-light-secondary, uiable-button-light-success, uiable-button-light-warning, uiable-button-link, uiable-button-outline, uiable-button-outline-danger, uiable-button-outline-dark, uiable-button-outline-info, uiable-button-outline-primary, uiable-button-outline-secondary, uiable-button-outline-success, uiable-button-outline-warning, uiable-button-render, uiable-button-rounded, uiable-button-secondary, uiable-button-size, uiable-button-social, uiable-button-solid-danger, uiable-button-solid-dark, uiable-button-solid-info, uiable-button-solid-primary, uiable-button-solid-secondary, uiable-button-solid-success, uiable-button-solid-warning, uiable-button-spinner, uiable-button-toggle, uiable-button-with-badge, uiable-button-with-icon, uiable-calendar-basic, uiable-calendar-booked-dates, uiable-calendar-caption, uiable-calendar-custom-days, uiable-calendar-hijri, uiable-calendar-multiple, uiable-calendar-presets, uiable-calendar-range, uiable-calendar-right-navigation, uiable-calendar-time, uiable-calendar-week-numbers, uiable-card-align-center, uiable-card-align-right, uiable-card-animated-flip, uiable-card-animated-tilt, uiable-card-basic, uiable-card-header-footer, uiable-card-horizontal, uiable-card-image, uiable-card-image-bottom, uiable-card-image-overlay, uiable-card-image-top, uiable-card-product, uiable-card-small, uiable-card-solid-danger, uiable-card-solid-dark, uiable-card-solid-info, uiable-card-solid-primary, uiable-card-solid-secondary, uiable-card-solid-success, uiable-card-solid-warning, uiable-card-tabs, uiable-card-title-subtitle, uiable-carousel-api, uiable-carousel-multiple, uiable-carousel-orientation, uiable-carousel-plugin, uiable-carousel-size, uiable-carousel-spacing, uiable-changelog-entry, uiable-changelog-mobile-toc, uiable-changelog-toc, uiable-chart-area, uiable-chart-example, uiable-chart-example-axis, uiable-chart-example-grid, uiable-chart-example-legend, uiable-chart-example-tooltip, uiable-chart-line, uiable-chart-pie, uiable-chart-radial, uiable-chart-tooltip, uiable-checkbox-basic, uiable-checkbox-colors, uiable-checkbox-description, uiable-checkbox-disabled, uiable-checkbox-group, uiable-checkbox-indeterminate, uiable-checkbox-invalid, uiable-checkbox-list, uiable-checkbox-sizes, uiable-checkbox-table, uiable-checkbox-todo-list, uiable-collapsible-basic, uiable-collapsible-file-tree, uiable-collapsible-settings, uiable-combobox-auto-highlight, uiable-combobox-autocomplete, uiable-combobox-basic, uiable-combobox-clear, uiable-combobox-custom, uiable-combobox-disabled, uiable-combobox-error, uiable-combobox-groups, uiable-combobox-input-group, uiable-combobox-invalid, uiable-combobox-multiple, uiable-combobox-popup, uiable-combobox-user, uiable-combobox-with-checkbox, uiable-command-basic, uiable-command-developer-actions, uiable-command-dialog, uiable-command-groups, uiable-command-invite-members, uiable-command-scrollable, uiable-command-search-filter, uiable-command-shortcuts, uiable-command-with-description, uiable-context-menu-basic, uiable-context-menu-checkboxes, uiable-context-menu-destructive, uiable-context-menu-groups, uiable-context-menu-icons, uiable-context-menu-radio, uiable-context-menu-shortcuts, uiable-context-menu-sides, uiable-context-menu-submenu, uiable-data-table-basic, uiable-data-table-editable, uiable-data-table-expandable, uiable-data-table-pagination, uiable-date-picker-basic, uiable-date-picker-disabled, uiable-date-picker-dob, uiable-date-picker-input, uiable-date-picker-natural-language, uiable-date-picker-neutral, uiable-date-picker-range, uiable-date-picker-time, uiable-dialog-basic, uiable-dialog-centered, uiable-dialog-close-button, uiable-dialog-full-screen, uiable-dialog-large, uiable-dialog-no-close-button, uiable-dialog-scrollable-content, uiable-dialog-small, uiable-dialog-sticky-footer, uiable-drawer-dialog, uiable-drawer-scrollable-content, uiable-drawer-sides, uiable-dropdown-menu-avatar, uiable-dropdown-menu-basic, uiable-dropdown-menu-basic-danger, uiable-dropdown-menu-basic-info, uiable-dropdown-menu-basic-primary, uiable-dropdown-menu-basic-secondary, uiable-dropdown-menu-basic-success, uiable-dropdown-menu-basic-warning, uiable-dropdown-menu-checkboxes, uiable-dropdown-menu-checkboxes-icons, uiable-dropdown-menu-complex, uiable-dropdown-menu-destructive, uiable-dropdown-menu-forms, uiable-dropdown-menu-icons, uiable-dropdown-menu-outline-primary, uiable-dropdown-menu-radio-group, uiable-dropdown-menu-radio-icons, uiable-dropdown-menu-shortcuts, uiable-dropdown-menu-split-primary, uiable-dropdown-menu-submenu, uiable-dropdown-menu-text, uiable-empty-avatar, uiable-empty-avatar-group, uiable-empty-background, uiable-empty-card, uiable-empty-input-group, uiable-empty-no-search-result, uiable-empty-outline, uiable-empty-with-large-icon, uiable-field-checkbox, uiable-field-choice-card, uiable-field-fieldset, uiable-field-group, uiable-field-input, uiable-field-one-time-password-form, uiable-field-radio, uiable-field-responsive, uiable-field-select, uiable-field-slider, uiable-field-switch, uiable-field-textarea, uiable-hover-card-image-preview, uiable-hover-card-info-with-icon-badge, uiable-hover-card-link-preview, uiable-hover-card-sides, uiable-hover-card-simple-info-tooltip, uiable-input-badge, uiable-input-basic, uiable-input-button-group, uiable-input-disabled, uiable-input-field, uiable-input-fieldgroup, uiable-input-file, uiable-input-form, uiable-input-grid, uiable-input-group-basic, uiable-input-group-block-end, uiable-input-group-block-start, uiable-input-group-button, uiable-input-group-chat-message, uiable-input-group-custom, uiable-input-group-dropdown, uiable-input-group-icon, uiable-input-group-in-card, uiable-input-group-inline-end, uiable-input-group-inline-start, uiable-input-group-kbd, uiable-input-group-label, uiable-input-group-spinner, uiable-input-group-text, uiable-input-group-textarea, uiable-input-group-textarea-examples, uiable-input-group-tooltip, uiable-input-group-with-addons, uiable-input-group-with-buttons, uiable-input-group-with-kbd, uiable-input-group-with-tooltip, uiable-input-inline, uiable-input-input-group, uiable-input-invalid, uiable-input-otp-alphanumeric, uiable-input-otp-animated, uiable-input-otp-controlled, uiable-input-otp-disabled, uiable-input-otp-filled, uiable-input-otp-form, uiable-input-otp-four-digits, uiable-input-otp-invalid, uiable-input-otp-outlined, uiable-input-otp-pattern, uiable-input-otp-separator, uiable-input-range, uiable-input-required, uiable-input-select, uiable-input-validation, uiable-item-avatar, uiable-item-background, uiable-item-checkbox, uiable-item-dropdown, uiable-item-group, uiable-item-header, uiable-item-icon, uiable-item-image, uiable-item-linkPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@uiable · uiable-accordion-basic
npx shadcn@latest add https://uiable.com/r/uiable-accordion-basic.jsonView source