---
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: "Icons/logos"
tags: ["backgrounds", "blocks", "cards", "dashboard", "design-system", "icons", "loaders", "media", "navigation", "overlays", "payments", "pro-available"]
framework: "react"
license: "MIT"
author: "codedthemes"
website: "https://uiable.com"
github: "https://github.com/codedthemes/uiable"
registry: "https://uiable.com/r/registry.json"
pro: true
pro_url: "https://uiable.com/pricing"
github_stars: 18
component_count: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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
- Pro / pricing: https://uiable.com/pricing

## 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 |
| --- | --- | --- | --- |
| accordion-active-bg | registry:ui | Accordion Active Bg variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-active-bg.json` |
| accordion-basic | registry:ui | Accordion Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-basic.json` |
| accordion-borders | registry:ui | Accordion Borders variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-borders.json` |
| accordion-card | registry:ui | Accordion Card variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-card.json` |
| accordion-custom | registry:ui | Accordion Custom variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-custom.json` |
| accordion-disabled | registry:ui | Accordion Disabled variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-disabled.json` |
| accordion-flush | registry:ui | Accordion Flush variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-flush.json` |
| accordion-icons | registry:ui | Accordion Icons variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-icons.json` |
| accordion-multiple | registry:ui | Accordion Multiple variant for component. | `npx shadcn@latest add https://uiable.com/r/accordion-multiple.json` |
| alert-action | registry:ui | Alert Action variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-action.json` |
| alert-basic | registry:ui | Alert Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-basic.json` |
| alert-border-left-danger | registry:ui | Alert Border Left Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-border-left-danger.json` |
| alert-border-left-dark | registry:ui | Alert Border Left Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-border-left-dark.json` |
| alert-colors | registry:ui | Alert Colors variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-colors.json` |
| alert-destructive | registry:ui | Alert Destructive variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-destructive.json` |
| alert-dialog-basic | registry:ui | Alert Dialog Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-basic.json` |
| alert-dialog-destructive | registry:ui | Alert Dialog Destructive variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-destructive.json` |
| alert-dialog-lock | registry:ui | Alert Dialog Lock variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-lock.json` |
| alert-dialog-media | registry:ui | Alert Dialog Media variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-media.json` |
| alert-dialog-small | registry:ui | Alert Dialog Small variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-small.json` |
| alert-dialog-small-media | registry:ui | Alert Dialog Small Media variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-small-media.json` |
| alert-dialog-subscription | registry:ui | Alert Dialog Subscription variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-subscription.json` |
| alert-dialog-warning | registry:ui | Alert Dialog Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dialog-warning.json` |
| alert-dismissible-danger | registry:ui | Alert Dismissible Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-danger.json` |
| alert-dismissible-dark | registry:ui | Alert Dismissible Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-dark.json` |
| alert-dismissible-info | registry:ui | Alert Dismissible Info variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-info.json` |
| alert-dismissible-primary | registry:ui | Alert Dismissible Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-primary.json` |
| alert-dismissible-secondary | registry:ui | Alert Dismissible Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-secondary.json` |
| alert-dismissible-success | registry:ui | Alert Dismissible Success variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-success.json` |
| alert-dismissible-warning | registry:ui | Alert Dismissible Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-dismissible-warning.json` |
| alert-icon-danger | registry:ui | Alert Icon Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-danger.json` |
| alert-icon-dark | registry:ui | Alert Icon Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-dark.json` |
| alert-icon-info | registry:ui | Alert Icon Info variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-info.json` |
| alert-icon-primary | registry:ui | Alert Icon Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-primary.json` |
| alert-icon-secondary | registry:ui | Alert Icon Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-secondary.json` |
| alert-icon-success | registry:ui | Alert Icon Success variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-success.json` |
| alert-icon-warning | registry:ui | Alert Icon Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-icon-warning.json` |
| alert-light-danger | registry:ui | Alert Light Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-danger.json` |
| alert-light-dark | registry:ui | Alert Light Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-dark.json` |
| alert-light-info | registry:ui | Alert Light Info variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-info.json` |
| alert-light-primary | registry:ui | Alert Light Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-primary.json` |
| alert-light-secondary | registry:ui | Alert Light Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-secondary.json` |
| alert-light-success | registry:ui | Alert Light Success variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-success.json` |
| alert-light-warning | registry:ui | Alert Light Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-light-warning.json` |
| alert-outlined-danger | registry:ui | Alert Outlined Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-danger.json` |
| alert-outlined-dark | registry:ui | Alert Outlined Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-dark.json` |
| alert-outlined-info | registry:ui | Alert Outlined Info variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-info.json` |
| alert-outlined-primary | registry:ui | Alert Outlined Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-primary.json` |
| alert-outlined-secondary | registry:ui | Alert Outlined Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-secondary.json` |
| alert-outlined-success | registry:ui | Alert Outlined Success variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-success.json` |
| alert-outlined-warning | registry:ui | Alert Outlined Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-outlined-warning.json` |
| alert-solid-danger | registry:ui | Alert Solid Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-danger.json` |
| alert-solid-dark | registry:ui | Alert Solid Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-dark.json` |
| alert-solid-info | registry:ui | Alert Solid Info variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-info.json` |
| alert-solid-primary | registry:ui | Alert Solid Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-primary.json` |
| alert-solid-secondary | registry:ui | Alert Solid Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-secondary.json` |
| alert-solid-success | registry:ui | Alert Solid Success variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-success.json` |
| alert-solid-warning | registry:ui | Alert Solid Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/alert-solid-warning.json` |
| aspect-ratio-cinematic | registry:ui | Aspect Ratio Cinematic variant for component. | `npx shadcn@latest add https://uiable.com/r/aspect-ratio-cinematic.json` |
| aspect-ratio-portrait | registry:ui | Aspect Ratio Portrait variant for component. | `npx shadcn@latest add https://uiable.com/r/aspect-ratio-portrait.json` |
| aspect-ratio-square | registry:ui | Aspect Ratio Square variant for component. | `npx shadcn@latest add https://uiable.com/r/aspect-ratio-square.json` |
| aspect-ratio-standard | registry:ui | Aspect Ratio Standard variant for component. | `npx shadcn@latest add https://uiable.com/r/aspect-ratio-standard.json` |
| attachment-group | registry:ui | Attachment Group variant for component. | `npx shadcn@latest add https://uiable.com/r/attachment-group.json` |
| attachment-sizes | registry:ui | Attachment Sizes variant for component. | `npx shadcn@latest add https://uiable.com/r/attachment-sizes.json` |
| attachment-states | registry:ui | Attachment States variant for component. | `npx shadcn@latest add https://uiable.com/r/attachment-states.json` |
| attachment-triggers | registry:ui | Attachment Triggers variant for component. | `npx shadcn@latest add https://uiable.com/r/attachment-triggers.json` |
| attachment-vertical | registry:ui | Attachment Vertical variant for component. | `npx shadcn@latest add https://uiable.com/r/attachment-vertical.json` |
| avatar-badge | registry:ui | Avatar Badge variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-badge.json` |
| avatar-badge-icon | registry:ui | Avatar Badge Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-badge-icon.json` |
| avatar-basic | registry:ui | Avatar Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-basic.json` |
| avatar-border-radius | registry:ui | Avatar Border Radius variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-border-radius.json` |
| avatar-counter-indicator | registry:ui | Avatar Counter Indicator variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-counter-indicator.json` |
| avatar-dropdown | registry:ui | Avatar Dropdown variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-dropdown.json` |
| avatar-fallback | registry:ui | Avatar Fallback variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-fallback.json` |
| avatar-group | registry:ui | Avatar Group variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-group.json` |
| avatar-group-count | registry:ui | Avatar Group Count variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-group-count.json` |
| avatar-group-count-icon | registry:ui | Avatar Group Count Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-group-count-icon.json` |
| avatar-group-tooltip | registry:ui | Avatar Group Tooltip variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-group-tooltip.json` |
| avatar-placeholder-icon | registry:ui | Avatar Placeholder Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-placeholder-icon.json` |
| avatar-size | registry:ui | Avatar Size variant for component. | `npx shadcn@latest add https://uiable.com/r/avatar-size.json` |
| badge-avatar | registry:ui | Badge Avatar variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-avatar.json` |
| badge-closable | registry:ui | Badge Closable variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-closable.json` |
| badge-colors | registry:ui | Badge Colors variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-colors.json` |
| badge-gradient | registry:ui | Badge Gradient variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-gradient.json` |
| badge-icon | registry:ui | Badge Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-icon.json` |
| badge-light-danger | registry:ui | Badge Light Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-danger.json` |
| badge-light-dark | registry:ui | Badge Light Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-dark.json` |
| badge-light-info | registry:ui | Badge Light Info variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-info.json` |
| badge-light-primary | registry:ui | Badge Light Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-primary.json` |
| badge-light-secondary | registry:ui | Badge Light Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-secondary.json` |
| badge-light-success | registry:ui | Badge Light Success variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-success.json` |
| badge-light-warning | registry:ui | Badge Light Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-light-warning.json` |
| badge-link | registry:ui | Badge Link variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-link.json` |
| badge-outline-danger | registry:ui | Badge Outline Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-danger.json` |
| badge-outline-dark | registry:ui | Badge Outline Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-dark.json` |
| badge-outline-info | registry:ui | Badge Outline Info variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-info.json` |
| badge-outline-primary | registry:ui | Badge Outline Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-primary.json` |
| badge-outline-secondary | registry:ui | Badge Outline Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-secondary.json` |
| badge-outline-success | registry:ui | Badge Outline Success variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-success.json` |
| badge-outline-warning | registry:ui | Badge Outline Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-outline-warning.json` |
| badge-pill-danger | registry:ui | Badge Pill Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-danger.json` |
| badge-pill-dark | registry:ui | Badge Pill Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-dark.json` |
| badge-pill-info | registry:ui | Badge Pill Info variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-info.json` |
| badge-pill-primary | registry:ui | Badge Pill Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-primary.json` |
| badge-pill-secondary | registry:ui | Badge Pill Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-secondary.json` |
| badge-pill-success | registry:ui | Badge Pill Success variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-success.json` |
| badge-pill-warning | registry:ui | Badge Pill Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-pill-warning.json` |
| badge-sizes | registry:ui | Badge Sizes variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-sizes.json` |
| badge-solid-danger | registry:ui | Badge Solid Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-danger.json` |
| badge-solid-dark | registry:ui | Badge Solid Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-dark.json` |
| badge-solid-info | registry:ui | Badge Solid Info variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-info.json` |
| badge-solid-primary | registry:ui | Badge Solid Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-primary.json` |
| badge-solid-secondary | registry:ui | Badge Solid Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-secondary.json` |
| badge-solid-success | registry:ui | Badge Solid Success variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-success.json` |
| badge-solid-warning | registry:ui | Badge Solid Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-solid-warning.json` |
| badge-spinner | registry:ui | Badge Spinner variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-spinner.json` |
| badge-status | registry:ui | Badge Status variant for component. | `npx shadcn@latest add https://uiable.com/r/badge-status.json` |
| block-list | registry:ui | Layout Block List variant for component. | `npx shadcn@latest add https://uiable.com/r/block-list.json` |
| block-sidebar | registry:ui | Layout Block Sidebar variant for component. | `npx shadcn@latest add https://uiable.com/r/block-sidebar.json` |
| breadcrumb-background | registry:ui | Breadcrumb Background variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-background.json` |
| breadcrumb-basic | registry:ui | Breadcrumb Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-basic.json` |
| breadcrumb-collapsed | registry:ui | Breadcrumb Collapsed variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-collapsed.json` |
| breadcrumb-dropdown | registry:ui | Breadcrumb Dropdown variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-dropdown.json` |
| breadcrumb-ellipsis | registry:ui | Breadcrumb Ellipsis variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-ellipsis.json` |
| breadcrumb-icon | registry:ui | Breadcrumb Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-icon.json` |
| breadcrumb-link | registry:ui | Breadcrumb Link variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-link.json` |
| breadcrumb-outline | registry:ui | Breadcrumb Outline variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-outline.json` |
| breadcrumb-page-header | registry:ui | Breadcrumb Page Header variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-page-header.json` |
| breadcrumb-separator | registry:ui | Breadcrumb Separator variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-separator.json` |
| breadcrumb-stepper | registry:ui | Breadcrumb Stepper variant for component. | `npx shadcn@latest add https://uiable.com/r/breadcrumb-stepper.json` |
| bubble-alignment | registry:ui | Bubble Alignment variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-alignment.json` |
| bubble-collapsible | registry:ui | Bubble Collapsible variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-collapsible.json` |
| bubble-group | registry:ui | Bubble Group variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-group.json` |
| bubble-link | registry:ui | Bubble Link variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-link.json` |
| bubble-popover | registry:ui | Bubble Popover variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-popover.json` |
| bubble-reactions | registry:ui | Bubble Reactions variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-reactions.json` |
| bubble-tooltip | registry:ui | Bubble Tooltip variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-tooltip.json` |
| bubble-variants | registry:ui | Bubble Variants variant for component. | `npx shadcn@latest add https://uiable.com/r/bubble-variants.json` |
| button-ai | registry:ui | Button Ai variant for component. | `npx shadcn@latest add https://uiable.com/r/button-ai.json` |
| button-animated | registry:ui | Button Animated variant for component. | `npx shadcn@latest add https://uiable.com/r/button-animated.json` |
| button-animated-border | registry:ui | Button Animated Border variant for component. | `npx shadcn@latest add https://uiable.com/r/button-animated-border.json` |
| button-animated-gradient | registry:ui | Button Animated Gradient variant for component. | `npx shadcn@latest add https://uiable.com/r/button-animated-gradient.json` |
| button-contextual-feedback | registry:ui | Button Contextual Feedback variant for component. | `npx shadcn@latest add https://uiable.com/r/button-contextual-feedback.json` |
| button-copy | registry:ui | Button Copy variant for component. | `npx shadcn@latest add https://uiable.com/r/button-copy.json` |
| button-default | registry:ui | Button Default variant for component. | `npx shadcn@latest add https://uiable.com/r/button-default.json` |
| button-destructive | registry:ui | Button Destructive variant for component. | `npx shadcn@latest add https://uiable.com/r/button-destructive.json` |
| button-ghost | registry:ui | Button Ghost variant for component. | `npx shadcn@latest add https://uiable.com/r/button-ghost.json` |
| button-group-dropdown | registry:ui | Button Group Dropdown variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-dropdown.json` |
| button-group-icon | registry:ui | Button Group Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-icon.json` |
| button-group-input | registry:ui | Button Group Input variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-input.json` |
| button-group-input-group | registry:ui | Button Group Input Group variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-input-group.json` |
| button-group-nested | registry:ui | Button Group Nested variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-nested.json` |
| button-group-orientation | registry:ui | Button Group Orientation variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-orientation.json` |
| button-group-popover | registry:ui | Button Group Popover variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-popover.json` |
| button-group-qty-select | registry:ui | Button Group Qty Select variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-qty-select.json` |
| button-group-select | registry:ui | Button Group Select variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-select.json` |
| button-group-separator | registry:ui | Button Group Separator variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-separator.json` |
| button-group-size | registry:ui | Button Group Size variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-size.json` |
| button-group-social | registry:ui | Button Group Social variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-social.json` |
| button-group-split | registry:ui | Button Group Split variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-split.json` |
| button-group-toolbar | registry:ui | Button Group Toolbar variant for component. | `npx shadcn@latest add https://uiable.com/r/button-group-toolbar.json` |
| button-icon | registry:ui | Button Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon.json` |
| button-icon-danger | registry:ui | Button Icon Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-danger.json` |
| button-icon-dark | registry:ui | Button Icon Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-dark.json` |
| button-icon-info | registry:ui | Button Icon Info variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-info.json` |
| button-icon-primary | registry:ui | Button Icon Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-primary.json` |
| button-icon-secondary | registry:ui | Button Icon Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-secondary.json` |
| button-icon-success | registry:ui | Button Icon Success variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-success.json` |
| button-icon-warning | registry:ui | Button Icon Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/button-icon-warning.json` |
| button-light-danger | registry:ui | Button Light Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-danger.json` |
| button-light-dark | registry:ui | Button Light Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-dark.json` |
| button-light-info | registry:ui | Button Light Info variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-info.json` |
| button-light-primary | registry:ui | Button Light Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-primary.json` |
| button-light-secondary | registry:ui | Button Light Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-secondary.json` |
| button-light-success | registry:ui | Button Light Success variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-success.json` |
| button-light-warning | registry:ui | Button Light Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/button-light-warning.json` |
| button-link | registry:ui | Button Link variant for component. | `npx shadcn@latest add https://uiable.com/r/button-link.json` |
| button-outline | registry:ui | Button Outline variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline.json` |
| button-outline-danger | registry:ui | Button Outline Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-danger.json` |
| button-outline-dark | registry:ui | Button Outline Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-dark.json` |
| button-outline-info | registry:ui | Button Outline Info variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-info.json` |
| button-outline-primary | registry:ui | Button Outline Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-primary.json` |
| button-outline-secondary | registry:ui | Button Outline Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-secondary.json` |
| button-outline-success | registry:ui | Button Outline Success variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-success.json` |
| button-outline-warning | registry:ui | Button Outline Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/button-outline-warning.json` |
| button-render | registry:ui | Button Render variant for component. | `npx shadcn@latest add https://uiable.com/r/button-render.json` |
| button-rounded | registry:ui | Button Rounded variant for component. | `npx shadcn@latest add https://uiable.com/r/button-rounded.json` |
| button-secondary | registry:ui | Button Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-secondary.json` |
| button-size | registry:ui | Button Size variant for component. | `npx shadcn@latest add https://uiable.com/r/button-size.json` |
| button-social | registry:ui | Button Social variant for component. | `npx shadcn@latest add https://uiable.com/r/button-social.json` |
| button-solid-danger | registry:ui | Button Solid Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-danger.json` |
| button-solid-dark | registry:ui | Button Solid Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-dark.json` |
| button-solid-info | registry:ui | Button Solid Info variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-info.json` |
| button-solid-primary | registry:ui | Button Solid Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-primary.json` |
| button-solid-secondary | registry:ui | Button Solid Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-secondary.json` |
| button-solid-success | registry:ui | Button Solid Success variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-success.json` |
| button-solid-warning | registry:ui | Button Solid Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/button-solid-warning.json` |
| button-spinner | registry:ui | Button Spinner variant for component. | `npx shadcn@latest add https://uiable.com/r/button-spinner.json` |
| button-toggle | registry:ui | Button Toggle variant for component. | `npx shadcn@latest add https://uiable.com/r/button-toggle.json` |
| button-with-badge | registry:ui | Button With Badge variant for component. | `npx shadcn@latest add https://uiable.com/r/button-with-badge.json` |
| button-with-icon | registry:ui | Button With Icon variant for component. | `npx shadcn@latest add https://uiable.com/r/button-with-icon.json` |
| calendar-basic | registry:ui | Calendar Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-basic.json` |
| calendar-booked-dates | registry:ui | Calendar Booked Dates variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-booked-dates.json` |
| calendar-caption | registry:ui | Calendar Caption variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-caption.json` |
| calendar-custom-days | registry:ui | Calendar Custom Days variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-custom-days.json` |
| calendar-dialog | registry:ui | Calendar Dialog variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-dialog.json` |
| calendar-hijri | registry:ui | Calendar Hijri variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-hijri.json` |
| calendar-multiple | registry:ui | Calendar Multiple variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-multiple.json` |
| calendar-presets | registry:ui | Calendar Presets variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-presets.json` |
| calendar-range | registry:ui | Calendar Range variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-range.json` |
| calendar-right-navigation | registry:ui | Calendar Right Navigation variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-right-navigation.json` |
| calendar-time | registry:ui | Calendar Time variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-time.json` |
| calendar-week-numbers | registry:ui | Calendar Week Numbers variant for component. | `npx shadcn@latest add https://uiable.com/r/calendar-week-numbers.json` |
| card-align-center | registry:ui | Card Align Center variant for component. | `npx shadcn@latest add https://uiable.com/r/card-align-center.json` |
| card-align-right | registry:ui | Card Align Right variant for component. | `npx shadcn@latest add https://uiable.com/r/card-align-right.json` |
| card-animated-border | registry:ui | Card Animated Border variant for component. | `npx shadcn@latest add https://uiable.com/r/card-animated-border.json` |
| card-animated-flip | registry:ui | Card Animated Flip variant for component. | `npx shadcn@latest add https://uiable.com/r/card-animated-flip.json` |
| card-animated-tilt | registry:ui | Card Animated Tilt variant for component. | `npx shadcn@latest add https://uiable.com/r/card-animated-tilt.json` |
| card-basic | registry:ui | Card Basic variant for component. | `npx shadcn@latest add https://uiable.com/r/card-basic.json` |
| card-credit | registry:ui | Card Credit variant for component. | `npx shadcn@latest add https://uiable.com/r/card-credit.json` |
| card-header-footer | registry:ui | Card Header Footer variant for component. | `npx shadcn@latest add https://uiable.com/r/card-header-footer.json` |
| card-horizontal | registry:ui | Card Horizontal variant for component. | `npx shadcn@latest add https://uiable.com/r/card-horizontal.json` |
| card-image | registry:ui | Card Image variant for component. | `npx shadcn@latest add https://uiable.com/r/card-image.json` |
| card-image-bottom | registry:ui | Card Image Bottom variant for component. | `npx shadcn@latest add https://uiable.com/r/card-image-bottom.json` |
| card-image-overlay | registry:ui | Card Image Overlay variant for component. | `npx shadcn@latest add https://uiable.com/r/card-image-overlay.json` |
| card-image-top | registry:ui | Card Image Top variant for component. | `npx shadcn@latest add https://uiable.com/r/card-image-top.json` |
| card-product | registry:ui | Card Product variant for component. | `npx shadcn@latest add https://uiable.com/r/card-product.json` |
| card-small | registry:ui | Card Small variant for component. | `npx shadcn@latest add https://uiable.com/r/card-small.json` |
| card-solid-danger | registry:ui | Card Solid Danger variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-danger.json` |
| card-solid-dark | registry:ui | Card Solid Dark variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-dark.json` |
| card-solid-info | registry:ui | Card Solid Info variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-info.json` |
| card-solid-primary | registry:ui | Card Solid Primary variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-primary.json` |
| card-solid-secondary | registry:ui | Card Solid Secondary variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-secondary.json` |
| card-solid-success | registry:ui | Card Solid Success variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-success.json` |
| card-solid-warning | registry:ui | Card Solid Warning variant for component. | `npx shadcn@latest add https://uiable.com/r/card-solid-warning.json` |
| card-tabs | registry:ui | Card Tabs variant for component. | `npx shadcn@latest add https://uiable.com/r/card-tabs.json` |
| card-title-subtitle | registry:ui | Card Title Subtitle variant for component. | `npx shadcn@latest add https://uiable.com/r/card-title-subtitle.json` |
| carousel-animated | registry:ui | Carousel Animated variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-animated.json` |
| carousel-api | registry:ui | Carousel Api variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-api.json` |
| carousel-dots | registry:ui | Carousel Dots variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-dots.json` |
| carousel-multiple | registry:ui | Carousel Multiple variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-multiple.json` |
| carousel-orientation | registry:ui | Carousel Orientation variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-orientation.json` |
| carousel-plugin | registry:ui | Carousel Plugin variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-plugin.json` |
| carousel-size | registry:ui | Carousel Size variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-size.json` |
| carousel-spacing | registry:ui | Carousel Spacing variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-spacing.json` |
| carousel-thumbnails | registry:ui | Carousel Thumbnails variant for component. | `npx shadcn@latest add https://uiable.com/r/carousel-thumbnails.json` |
| changelog-entry | registry:ui | Changelog Entry variant for component. | `npx shadcn@latest add https://uiable.com/r/changelog-entry.json` |
| changelog-mobile-toc | registry:ui | Changelog Mobile Toc variant for component. | `npx shadcn@latest add https://uiable.com/r/changelog-mobile-toc.json` |
| changelog-toc | registry:ui | Changelog Toc variant for component. | `npx shadcn@latest add https://uiable.com/r/changelog-toc.json` |
| chart-area | registry:ui | Chart Area variant for component. | `npx shadcn@latest add https://uiable.com/r/chart-area.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).
```