---
name: "@uiable"
slug: "uiable"
description: "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."
category: "Animated components"
tags: ["accessibility", "animation", "backgrounds", "buttons", "cards", "design-system", "icons", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "codedthemes"
website: "https://uiable.com"
github: "https://github.com/codedthemes/uiable"
registry: "https://uiable.com/r/registry.json"
pro: false
pro_url: null
github_stars: 18
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://uiable.com
- GitHub: https://github.com/codedthemes/uiable
- Registry JSON: https://uiable.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/uiable
- This file: https://sh4dcn.vercel.app/md/uiable.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://uiable.com/r/registry.json
pnpm dlx shadcn@latest add https://uiable.com/r/registry.json
bunx shadcn@latest add https://uiable.com/r/registry.json
# clone the source repo
git clone https://github.com/codedthemes/uiable.git
# fetch the raw registry index
curl -s https://uiable.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| uiable-accordion-basic | registry:ui | Accordion Basic variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-basic.json` |
| uiable-accordion-borders | registry:ui | Accordion Borders variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-borders.json` |
| uiable-accordion-card | registry:ui | Accordion Card variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-card.json` |
| uiable-accordion-disabled | registry:ui | Accordion Disabled variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-disabled.json` |
| uiable-accordion-flush | registry:ui | Accordion Flush variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-flush.json` |
| uiable-accordion-multiple | registry:ui | Accordion Multiple variant for accordion. | `npx shadcn@latest add https://uiable.com/r/uiable-accordion-multiple.json` |
| uiable-alert-action | registry:ui | Alert Action variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-action.json` |
| uiable-alert-basic | registry:ui | Alert Basic variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-basic.json` |
| uiable-alert-colors | registry:ui | Alert Colors variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-colors.json` |
| uiable-alert-destructive | registry:ui | Alert Destructive variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-destructive.json` |
| uiable-alert-dialog-basic | registry:ui | Alert Dialog Basic variant for alert-dialog. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-basic.json` |
| uiable-alert-dialog-destructive | registry:ui | Alert Dialog Destructive variant for alert-dialog. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-destructive.json` |
| uiable-alert-dialog-media | registry:ui | Alert Dialog Media variant for alert-dialog. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-media.json` |
| uiable-alert-dialog-small | registry:ui | Alert Dialog Small variant for alert-dialog. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-small.json` |
| uiable-alert-dialog-small-media | registry:ui | Alert Dialog Small Media variant for alert-dialog. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dialog-small-media.json` |
| uiable-alert-dismissible-danger | registry:ui | Alert Dismissible Danger variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-danger.json` |
| uiable-alert-dismissible-dark | registry:ui | Alert Dismissible Dark variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-dark.json` |
| uiable-alert-dismissible-info | registry:ui | Alert Dismissible Info variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-info.json` |
| uiable-alert-dismissible-primary | registry:ui | Alert Dismissible Primary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-primary.json` |
| uiable-alert-dismissible-secondary | registry:ui | Alert Dismissible Secondary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-secondary.json` |
| uiable-alert-dismissible-success | registry:ui | Alert Dismissible Success variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-success.json` |
| uiable-alert-dismissible-warning | registry:ui | Alert Dismissible Warning variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-dismissible-warning.json` |
| uiable-alert-icon-danger | registry:ui | Alert Icon Danger variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-danger.json` |
| uiable-alert-icon-dark | registry:ui | Alert Icon Dark variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-dark.json` |
| uiable-alert-icon-info | registry:ui | Alert Icon Info variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-info.json` |
| uiable-alert-icon-primary | registry:ui | Alert Icon Primary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-primary.json` |
| uiable-alert-icon-secondary | registry:ui | Alert Icon Secondary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-secondary.json` |
| uiable-alert-icon-success | registry:ui | Alert Icon Success variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-success.json` |
| uiable-alert-icon-warning | registry:ui | Alert Icon Warning variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-icon-warning.json` |
| uiable-alert-light-danger | registry:ui | Alert Light Danger variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-danger.json` |
| uiable-alert-light-dark | registry:ui | Alert Light Dark variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-dark.json` |
| uiable-alert-light-info | registry:ui | Alert Light Info variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-info.json` |
| uiable-alert-light-primary | registry:ui | Alert Light Primary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-primary.json` |
| uiable-alert-light-secondary | registry:ui | Alert Light Secondary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-secondary.json` |
| uiable-alert-light-success | registry:ui | Alert Light Success variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-success.json` |
| uiable-alert-light-warning | registry:ui | Alert Light Warning variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-light-warning.json` |
| uiable-alert-solid-danger | registry:ui | Alert Solid Danger variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-danger.json` |
| uiable-alert-solid-dark | registry:ui | Alert Solid Dark variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-dark.json` |
| uiable-alert-solid-info | registry:ui | Alert Solid Info variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-info.json` |
| uiable-alert-solid-primary | registry:ui | Alert Solid Primary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-primary.json` |
| uiable-alert-solid-secondary | registry:ui | Alert Solid Secondary variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-secondary.json` |
| uiable-alert-solid-success | registry:ui | Alert Solid Success variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-success.json` |
| uiable-alert-solid-warning | registry:ui | Alert Solid Warning variant for alert. | `npx shadcn@latest add https://uiable.com/r/uiable-alert-solid-warning.json` |
| uiable-aspect-ratio-portrait | registry:ui | Aspect Ratio Portrait variant for aspect-ratio. | `npx shadcn@latest add https://uiable.com/r/uiable-aspect-ratio-portrait.json` |
| uiable-aspect-ratio-square | registry:ui | Aspect Ratio Square variant for aspect-ratio. | `npx shadcn@latest add https://uiable.com/r/uiable-aspect-ratio-square.json` |
| uiable-attachment-group | registry:ui | Attachment Group variant for attachment. | `npx shadcn@latest add https://uiable.com/r/uiable-attachment-group.json` |
| uiable-attachment-sizes | registry:ui | Attachment Sizes variant for attachment. | `npx shadcn@latest add https://uiable.com/r/uiable-attachment-sizes.json` |
| uiable-attachment-states | registry:ui | Attachment States variant for attachment. | `npx shadcn@latest add https://uiable.com/r/uiable-attachment-states.json` |
| uiable-attachment-triggers | registry:ui | Attachment Trigger variant for attachment. | `npx shadcn@latest add https://uiable.com/r/uiable-attachment-triggers.json` |
| uiable-attachment-vertical | registry:ui | Attachment Vertical variant for attachment. | `npx shadcn@latest add https://uiable.com/r/uiable-attachment-vertical.json` |
| uiable-avatar-badge | registry:ui | Avatar Badge variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-badge.json` |
| uiable-avatar-badge-icon | registry:ui | Avatar Badge Icon variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-badge-icon.json` |
| uiable-avatar-basic | registry:ui | Avatar Basic variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-basic.json` |
| uiable-avatar-border-radius | registry:ui | Avatar Border Radius variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-border-radius.json` |
| uiable-avatar-counter-indicator | registry:ui | Avatar Counter Indicator variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-counter-indicator.json` |
| uiable-avatar-dropdown | registry:ui | Avatar Dropdown variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-dropdown.json` |
| uiable-avatar-fallback | registry:ui | Avatar Fallback variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-fallback.json` |
| uiable-avatar-group | registry:ui | Avatar Group variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-group.json` |
| uiable-avatar-group-count | registry:ui | Avatar Group Count variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-group-count.json` |
| uiable-avatar-group-count-icon | registry:ui | Avatar Group Count Icon variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-group-count-icon.json` |
| uiable-avatar-placeholder-icon | registry:ui | Avatar Placeholder Icon variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-placeholder-icon.json` |
| uiable-avatar-size | registry:ui | Avatar Size variant for avatar. | `npx shadcn@latest add https://uiable.com/r/uiable-avatar-size.json` |
| uiable-badge-avatar | registry:ui | Badge Avatar variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-avatar.json` |
| uiable-badge-colors | registry:ui | Badge Colors variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-colors.json` |
| uiable-badge-gradient | registry:ui | Badge Gradient variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-gradient.json` |
| uiable-badge-icon | registry:ui | Badge Icon variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-icon.json` |
| uiable-badge-light-danger | registry:ui | Badge Light Danger variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-danger.json` |
| uiable-badge-light-dark | registry:ui | Badge Light Dark variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-dark.json` |
| uiable-badge-light-info | registry:ui | Badge Light Info variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-info.json` |
| uiable-badge-light-primary | registry:ui | Badge Light Primary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-primary.json` |
| uiable-badge-light-secondary | registry:ui | Badge Light Secondary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-secondary.json` |
| uiable-badge-light-success | registry:ui | Badge Light Success variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-success.json` |
| uiable-badge-light-warning | registry:ui | Badge Light Warning variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-light-warning.json` |
| uiable-badge-link | registry:ui | Badge Link variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-link.json` |
| uiable-badge-outline-danger | registry:ui | Badge Outline Danger variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-danger.json` |
| uiable-badge-outline-dark | registry:ui | Badge Outline Dark variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-dark.json` |
| uiable-badge-outline-info | registry:ui | Badge Outline Info variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-info.json` |
| uiable-badge-outline-primary | registry:ui | Badge Outline Primary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-primary.json` |
| uiable-badge-outline-secondary | registry:ui | Badge Outline Secondary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-secondary.json` |
| uiable-badge-outline-success | registry:ui | Badge Outline Success variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-success.json` |
| uiable-badge-outline-warning | registry:ui | Badge Outline Warning variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-outline-warning.json` |
| uiable-badge-pill-danger | registry:ui | Badge Pill Danger variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-danger.json` |
| uiable-badge-pill-dark | registry:ui | Badge Pill Dark variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-dark.json` |
| uiable-badge-pill-info | registry:ui | Badge Pill Info variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-info.json` |
| uiable-badge-pill-primary | registry:ui | Badge Pill Primary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-primary.json` |
| uiable-badge-pill-secondary | registry:ui | Badge Pill Secondary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-secondary.json` |
| uiable-badge-pill-success | registry:ui | Badge Pill Success variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-success.json` |
| uiable-badge-pill-warning | registry:ui | Badge Pill Warning variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-pill-warning.json` |
| uiable-badge-sizes | registry:ui | Badge Sizes variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-sizes.json` |
| uiable-badge-solid-danger | registry:ui | Badge Solid Danger variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-danger.json` |
| uiable-badge-solid-dark | registry:ui | Badge Solid Dark variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-dark.json` |
| uiable-badge-solid-info | registry:ui | Badge Solid Info variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-info.json` |
| uiable-badge-solid-primary | registry:ui | Badge Solid Primary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-primary.json` |
| uiable-badge-solid-secondary | registry:ui | Badge Solid Secondary variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-secondary.json` |
| uiable-badge-solid-success | registry:ui | Badge Solid Success variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-success.json` |
| uiable-badge-solid-warning | registry:ui | Badge Solid Warning variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-solid-warning.json` |
| uiable-badge-spinner | registry:ui | Badge Spinner variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-spinner.json` |
| uiable-badge-status | registry:ui | Badge Status variant for badge. | `npx shadcn@latest add https://uiable.com/r/uiable-badge-status.json` |
| uiable-breadcrumb-basic | registry:ui | Breadcrumb Basic variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-basic.json` |
| uiable-breadcrumb-collapsed | registry:ui | Breadcrumb Collapsed variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-collapsed.json` |
| uiable-breadcrumb-dropdown | registry:ui | Breadcrumb Dropdown variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-dropdown.json` |
| uiable-breadcrumb-ellipsis | registry:ui | Breadcrumb Ellipsis variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-ellipsis.json` |
| uiable-breadcrumb-icon | registry:ui | Breadcrumb Icon variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-icon.json` |
| uiable-breadcrumb-link | registry:ui | Breadcrumb Link variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-link.json` |
| uiable-breadcrumb-page-header | registry:ui | Breadcrumb Page Header variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-page-header.json` |
| uiable-breadcrumb-separator | registry:ui | Breadcrumb Separator variant for breadcrumb. | `npx shadcn@latest add https://uiable.com/r/uiable-breadcrumb-separator.json` |
| uiable-bubble-alignment | registry:ui | Bubble Alignment variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-alignment.json` |
| uiable-bubble-collapsible | registry:ui | Bubble Collapsible variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-collapsible.json` |
| uiable-bubble-group | registry:ui | Bubble Group variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-group.json` |
| uiable-bubble-link | registry:ui | Bubble Links & Buttons variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-link.json` |
| uiable-bubble-popover | registry:ui | Bubble Popover variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-popover.json` |
| uiable-bubble-reactions | registry:ui | Bubble Reactions variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-reactions.json` |
| uiable-bubble-tooltip | registry:ui | Bubble Tooltip variant for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-tooltip.json` |
| uiable-bubble-variants | registry:ui | Bubble Visual Variants for bubble. | `npx shadcn@latest add https://uiable.com/r/uiable-bubble-variants.json` |
| uiable-button-animated | registry:ui | Animated Button variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-animated.json` |
| uiable-button-animated-border | registry:ui | Animated Button variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-animated-border.json` |
| uiable-button-animated-gradient | registry:ui | Gradient Animated Button variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-animated-gradient.json` |
| uiable-button-default | registry:ui | Button Default variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-default.json` |
| uiable-button-destructive | registry:ui | Button Destructive variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-destructive.json` |
| uiable-button-ghost | registry:ui | Button Ghost variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-ghost.json` |
| uiable-button-group-dropdown | registry:ui | Button Group Dropdown variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-dropdown.json` |
| uiable-button-group-icon | registry:ui | Button Group Icon variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-icon.json` |
| uiable-button-group-input | registry:ui | Button Group Input variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-input.json` |
| uiable-button-group-input-group | registry:ui | Button Group Input Group variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-input-group.json` |
| uiable-button-group-nested | registry:ui | Button Group Nested variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-nested.json` |
| uiable-button-group-orientation | registry:ui | Button Group Orientation variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-orientation.json` |
| uiable-button-group-popover | registry:ui | Button Group Popover variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-popover.json` |
| uiable-button-group-qty-select | registry:ui | Button Group Quantity Selector variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-qty-select.json` |
| uiable-button-group-select | registry:ui | Button Group Select variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-select.json` |
| uiable-button-group-separator | registry:ui | Button Group Separator variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-separator.json` |
| uiable-button-group-size | registry:ui | Button Group Size variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-size.json` |
| uiable-button-group-social | registry:ui | Button Group Social variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-social.json` |
| uiable-button-group-split | registry:ui | Button Group Split variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-split.json` |
| uiable-button-group-toolbar | registry:ui | Button Group Toolbar variant for button-group. | `npx shadcn@latest add https://uiable.com/r/uiable-button-group-toolbar.json` |
| uiable-button-icon | registry:ui | Button Icon variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon.json` |
| uiable-button-icon-danger | registry:ui | Button Icon Danger variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-danger.json` |
| uiable-button-icon-dark | registry:ui | Button Icon Dark variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-dark.json` |
| uiable-button-icon-info | registry:ui | Button Icon Info variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-info.json` |
| uiable-button-icon-primary | registry:ui | Button Icon Primary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-primary.json` |
| uiable-button-icon-secondary | registry:ui | Button Icon Secondary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-secondary.json` |
| uiable-button-icon-success | registry:ui | Button Icon Success variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-success.json` |
| uiable-button-icon-warning | registry:ui | Button Icon Warning variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-icon-warning.json` |
| uiable-button-light-danger | registry:ui | Button Light Danger variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-danger.json` |
| uiable-button-light-dark | registry:ui | Button Light Dark variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-dark.json` |
| uiable-button-light-info | registry:ui | Button Light Info variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-info.json` |
| uiable-button-light-primary | registry:ui | Button Light Primary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-primary.json` |
| uiable-button-light-secondary | registry:ui | Button Light Secondary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-secondary.json` |
| uiable-button-light-success | registry:ui | Button Light Success variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-success.json` |
| uiable-button-light-warning | registry:ui | Button Light Warning variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-light-warning.json` |
| uiable-button-link | registry:ui | Button Link variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-link.json` |
| uiable-button-outline | registry:ui | Button Outline variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline.json` |
| uiable-button-outline-danger | registry:ui | Button Outline Danger variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-danger.json` |
| uiable-button-outline-dark | registry:ui | Button Outline Dark variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-dark.json` |
| uiable-button-outline-info | registry:ui | Button Outline Info variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-info.json` |
| uiable-button-outline-primary | registry:ui | Button Outline Primary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-primary.json` |
| uiable-button-outline-secondary | registry:ui | Button Outline Secondary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-secondary.json` |
| uiable-button-outline-success | registry:ui | Button Outline Success variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-success.json` |
| uiable-button-outline-warning | registry:ui | Button Outline Warning variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-outline-warning.json` |
| uiable-button-render | registry:ui | Button Render variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-render.json` |
| uiable-button-rounded | registry:ui | Button Radios variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-rounded.json` |
| uiable-button-secondary | registry:ui | Button Secondary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-secondary.json` |
| uiable-button-size | registry:ui | Button Size variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-size.json` |
| uiable-button-social | registry:ui | Social button variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-social.json` |
| uiable-button-solid-danger | registry:ui | Button Solid Danger variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-danger.json` |
| uiable-button-solid-dark | registry:ui | Button Solid Dark variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-dark.json` |
| uiable-button-solid-info | registry:ui | Button Solid Info variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-info.json` |
| uiable-button-solid-primary | registry:ui | Button Solid Primary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-primary.json` |
| uiable-button-solid-secondary | registry:ui | Button Solid Secondary variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-secondary.json` |
| uiable-button-solid-success | registry:ui | Button Solid Success variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-success.json` |
| uiable-button-solid-warning | registry:ui | Button Solid Warning variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-solid-warning.json` |
| uiable-button-spinner | registry:ui | Button Spinner variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-spinner.json` |
| uiable-button-toggle | registry:ui | Toggle button variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-toggle.json` |
| uiable-button-with-badge | registry:ui | Button with badge variant for button | `npx shadcn@latest add https://uiable.com/r/uiable-button-with-badge.json` |
| uiable-button-with-icon | registry:ui | Button With Icon variant for button. | `npx shadcn@latest add https://uiable.com/r/uiable-button-with-icon.json` |
| uiable-calendar-basic | registry:ui | Calendar Basic variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-basic.json` |
| uiable-calendar-booked-dates | registry:ui | Calendar Booked Dates variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-booked-dates.json` |
| uiable-calendar-caption | registry:ui | Calendar Caption variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-caption.json` |
| uiable-calendar-custom-days | registry:ui | Calendar Custom Days variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-custom-days.json` |
| uiable-calendar-hijri | registry:ui | Calendar Hijri variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-hijri.json` |
| uiable-calendar-multiple | registry:ui | Calendar Multiple variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-multiple.json` |
| uiable-calendar-presets | registry:ui | Calendar Presets variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-presets.json` |
| uiable-calendar-range | registry:ui | Calendar Range variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-range.json` |
| uiable-calendar-right-navigation | registry:ui | Calendar Right Navigation variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-right-navigation.json` |
| uiable-calendar-time | registry:ui | Calendar Time variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-time.json` |
| uiable-calendar-week-numbers | registry:ui | Calendar Week Numbers variant for calendar. | `npx shadcn@latest add https://uiable.com/r/uiable-calendar-week-numbers.json` |
| uiable-card-align-center | registry:ui | Card Align Center variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-align-center.json` |
| uiable-card-align-right | registry:ui | Card Align Right variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-align-right.json` |
| uiable-card-animated-flip | registry:ui | Interactive 3D dual-sided flip card with smooth rotation using framer-motion. | `npx shadcn@latest add https://uiable.com/r/uiable-card-animated-flip.json` |
| uiable-card-animated-tilt | registry:ui | Interactive 3D perspective tilt card with light sheen using framer-motion. | `npx shadcn@latest add https://uiable.com/r/uiable-card-animated-tilt.json` |
| uiable-card-basic | registry:ui | Card Basic variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-basic.json` |
| uiable-card-header-footer | registry:ui | Card Header Footer variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-header-footer.json` |
| uiable-card-horizontal | registry:ui | Card Horizontal variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-horizontal.json` |
| uiable-card-image | registry:ui | Card Image variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-image.json` |
| uiable-card-image-bottom | registry:ui | Card Image Bottom variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-image-bottom.json` |
| uiable-card-image-overlay | registry:ui | Card Image Overlay variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-image-overlay.json` |
| uiable-card-image-top | registry:ui | Card Image Top variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-image-top.json` |
| uiable-card-product | registry:ui | Card Product variant for e-commerce items and checkout. | `npx shadcn@latest add https://uiable.com/r/uiable-card-product.json` |
| uiable-card-small | registry:ui | Card Small variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-small.json` |
| uiable-card-solid-danger | registry:ui | Card Solid Danger variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-danger.json` |
| uiable-card-solid-dark | registry:ui | Card Solid Dark variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-dark.json` |
| uiable-card-solid-info | registry:ui | Card Solid Info variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-info.json` |
| uiable-card-solid-primary | registry:ui | Card Solid Primary variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-primary.json` |
| uiable-card-solid-secondary | registry:ui | Card Solid Secondary variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-secondary.json` |
| uiable-card-solid-success | registry:ui | Card Solid Success variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-success.json` |
| uiable-card-solid-warning | registry:ui | Card Solid Warning variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-solid-warning.json` |
| uiable-card-tabs | registry:ui | Card Tabs variant for multi-section interactive content. | `npx shadcn@latest add https://uiable.com/r/uiable-card-tabs.json` |
| uiable-card-title-subtitle | registry:ui | Card Title Subtitle variant for card. | `npx shadcn@latest add https://uiable.com/r/uiable-card-title-subtitle.json` |
| uiable-carousel-api | registry:ui | Carousel Api variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-api.json` |
| uiable-carousel-multiple | registry:ui | Carousel Multiple variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-multiple.json` |
| uiable-carousel-orientation | registry:ui | Carousel Orientation variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-orientation.json` |
| uiable-carousel-plugin | registry:ui | Carousel Plugin variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-plugin.json` |
| uiable-carousel-size | registry:ui | Carousel Size variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-size.json` |
| uiable-carousel-spacing | registry:ui | Carousel Spacing variant for carousel. | `npx shadcn@latest add https://uiable.com/r/uiable-carousel-spacing.json` |
| uiable-changelog-entry | registry:ui | Changelog Entry variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-changelog-entry.json` |
| uiable-changelog-mobile-toc | registry:ui | Changelog Mobile Toc variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-changelog-mobile-toc.json` |
| uiable-changelog-toc | registry:ui | Changelog Toc variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-changelog-toc.json` |
| uiable-chart-area | registry:ui | Chart Area variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-area.json` |
| uiable-chart-example | registry:ui | Chart Example variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-example.json` |
| uiable-chart-example-axis | registry:ui | Chart Example Axis variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-example-axis.json` |
| uiable-chart-example-grid | registry:ui | Chart Example Grid variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-example-grid.json` |
| uiable-chart-example-legend | registry:ui | Chart Example Legend variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-example-legend.json` |
| uiable-chart-example-tooltip | registry:ui | Chart Example Tooltip variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-example-tooltip.json` |
| uiable-chart-line | registry:ui | Chart Line variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-line.json` |
| uiable-chart-pie | registry:ui | Chart Pie variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-pie.json` |
| uiable-chart-radial | registry:ui | Chart Radial variant for component. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-radial.json` |
| uiable-chart-tooltip | registry:ui | Chart Tooltip variant for chart. | `npx shadcn@latest add https://uiable.com/r/uiable-chart-tooltip.json` |
| uiable-checkbox-basic | registry:ui | Checkbox Basic variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-basic.json` |
| uiable-checkbox-colors | registry:ui | Colors Checkbox variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-colors.json` |
| uiable-checkbox-description | registry:ui | Checkbox Description variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-description.json` |
| uiable-checkbox-disabled | registry:ui | Checkbox Disabled variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-disabled.json` |
| uiable-checkbox-group | registry:ui | Checkbox Group variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-group.json` |
| uiable-checkbox-indeterminate | registry:ui | Indeterminate Checkbox variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-indeterminate.json` |
| uiable-checkbox-invalid | registry:ui | Checkbox Invalid variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-invalid.json` |
| uiable-checkbox-list | registry:ui | Checkbox List variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-list.json` |
| uiable-checkbox-sizes | registry:ui | Checkbox Size variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-sizes.json` |
| uiable-checkbox-table | registry:ui | Checkbox Table variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-table.json` |
| uiable-checkbox-todo-list | registry:ui | Todo List Checkbox variant for checkbox. | `npx shadcn@latest add https://uiable.com/r/uiable-checkbox-todo-list.json` |
| uiable-collapsible-basic | registry:ui | Collapsible Basic variant for collapsible. | `npx shadcn@latest add https://uiable.com/r/uiable-collapsible-basic.json` |
| uiable-collapsible-file-tree | registry:ui | Collapsible File Tree variant for collapsible. | `npx shadcn@latest add https://uiable.com/r/uiable-collapsible-file-tree.json` |
| uiable-collapsible-settings | registry:ui | Collapsible Settings variant for collapsible. | `npx shadcn@latest add https://uiable.com/r/uiable-collapsible-settings.json` |
| uiable-combobox-auto-highlight | registry:ui | Combobox Auto Highlight variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-auto-highlight.json` |
| uiable-combobox-autocomplete | registry:ui | Combobox Autocomplete variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-autocomplete.json` |
| uiable-combobox-basic | registry:ui | Combobox Basic variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-basic.json` |
| uiable-combobox-clear | registry:ui | Combobox Clear variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-clear.json` |
| uiable-combobox-custom | registry:ui | Combobox Custom variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-custom.json` |
| uiable-combobox-disabled | registry:ui | Combobox Disabled variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-disabled.json` |
| uiable-combobox-error | registry:ui | Combobox Error variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-error.json` |
| uiable-combobox-groups | registry:ui | Combobox Groups variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-groups.json` |
| uiable-combobox-input-group | registry:ui | Combobox Input Group variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-input-group.json` |
| uiable-combobox-invalid | registry:ui | Combobox Invalid variant for combobox. | `npx shadcn@latest add https://uiable.com/r/uiable-combobox-invalid.json` |

## For AI agents

```text
You are adding components from @uiable to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/uiable.md) for the component list.
2. Fetch the machine-readable index: https://uiable.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: uiable).
```