---
name: "@cubby-ui"
slug: "cubby-ui"
description: "An opinionated component library with curated styling and simplified patterns for common use cases. Built on Base UI and Tailwind CSS 4."
category: "Animated components"
tags: ["animation", "auth", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "joncoronel"
website: "https://www.cubby-ui.dev"
github: "https://github.com/joncoronel/cubby-ui"
registry: "https://www.cubby-ui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 29
component_count: 81
generated_at: "2026-07-28T08:00:50.948Z"
---

# @cubby-ui

An opinionated component library with curated styling and simplified patterns for common use cases. Built on Base UI and Tailwind CSS 4.

## Links

- Website: https://www.cubby-ui.dev
- GitHub: https://github.com/joncoronel/cubby-ui
- Registry JSON: https://www.cubby-ui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/cubby-ui
- This file: https://sh4dcn.vercel.app/md/cubby-ui.md

## Install

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

## Components (81)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A accordion component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/accordion.json` |
| alert | registry:ui | A alert component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/alert.json` |
| alert-dialog | registry:ui | A alert-dialog component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/alert-dialog.json` |
| all | registry:block | Install all Cubby UI components with a single command. | `npx shadcn@latest add https://www.cubby-ui.dev/r/all.json` |
| aspect-ratio | registry:ui | A aspect-ratio component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/aspect-ratio.json` |
| autocomplete | registry:ui | A autocomplete component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/autocomplete.json` |
| avatar | registry:ui | A avatar component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/avatar.json` |
| badge | registry:ui | A badge component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/badge.json` |
| base-drawer | registry:ui | A base-drawer component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/base-drawer.json` |
| breadcrumbs | registry:ui | A breadcrumbs component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/breadcrumbs.json` |
| button | registry:ui | A simple button component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/button.json` |
| button-group | registry:ui | A button-group component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/button-group.json` |
| calendar | registry:ui | A calendar component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/calendar.json` |
| card | registry:ui | A card component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/card.json` |
| carousel | registry:ui | A carousel component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/carousel.json` |
| checkbox | registry:ui | A checkbox component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/checkbox.json` |
| checkbox-group | registry:ui | A checkbox-group component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/checkbox-group.json` |
| circular-slider | registry:ui | A circular-slider component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/circular-slider.json` |
| code-block | registry:ui | A code-block component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/code-block.json` |
| collapsible | registry:ui | A collapsible component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/collapsible.json` |
| combobox | registry:ui | A combobox component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/combobox.json` |
| command | registry:ui | A command component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/command.json` |
| context-menu | registry:ui | A context-menu component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/context-menu.json` |
| copy-button | registry:ui | A copy-button component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/copy-button.json` |
| cropper | registry:ui | A cropper component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/cropper.json` |
| data-table | registry:ui | A data-table component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/data-table.json` |
| date-picker | registry:ui | A date-picker component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/date-picker.json` |
| date-range-picker | registry:ui | A date-range-picker component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/date-range-picker.json` |
| dialog | registry:ui | A dialog component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/dialog.json` |
| drawer | registry:ui | A drawer component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/drawer.json` |
| dropdown-menu | registry:ui | A dropdown-menu component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/dropdown-menu.json` |
| elevated | registry:lib | A utility function for elevated. | `npx shadcn@latest add https://www.cubby-ui.dev/r/elevated.json` |
| fancy-button | registry:ui | A fancy-button component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/fancy-button.json` |
| field | registry:ui | A field component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/field.json` |
| fieldset | registry:ui | A fieldset component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/fieldset.json` |
| filters | registry:ui | A filter bar of segmented pills with per-field operators and value controls. | `npx shadcn@latest add https://www.cubby-ui.dev/r/filters.json` |
| form | registry:ui | A form component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/form.json` |
| highlight-text | registry:lib | A utility function for highlight text. | `npx shadcn@latest add https://www.cubby-ui.dev/r/highlight-text.json` |
| input | registry:ui | A input component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/input.json` |
| input-group | registry:ui | A input-group component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/input-group.json` |
| input-otp | registry:ui | A input-otp component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/input-otp.json` |
| kbd | registry:ui | A kbd component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/kbd.json` |
| label | registry:ui | A label component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/label.json` |
| marching-border | registry:ui | A marching-border component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/marching-border.json` |
| menubar | registry:ui | A menubar component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/menubar.json` |
| meter | registry:ui | A meter component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/meter.json` |
| navigation-menu | registry:ui | A navigation-menu component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/navigation-menu.json` |
| number-field | registry:ui | A number-field component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/number-field.json` |
| otp-field | registry:ui | A otp-field component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/otp-field.json` |
| pagination | registry:ui | A pagination component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/pagination.json` |
| popover | registry:ui | A popover component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/popover.json` |
| preview-card | registry:ui | A preview-card component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/preview-card.json` |
| progress | registry:ui | A progress component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/progress.json` |
| qr-code | registry:ui | A from-scratch, zero-dependency QR code generator rendered as pure scalable SVG. | `npx shadcn@latest add https://www.cubby-ui.dev/r/qr-code.json` |
| radio-group | registry:ui | A radio-group component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/radio-group.json` |
| resizable | registry:ui | A resizable component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/resizable.json` |
| scroll-area | registry:ui | A scroll-area component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/scroll-area.json` |
| scroll-fade | registry:component | A CSS utility that fades the edges of any scroll container as you scroll, with no component required. | `npx shadcn@latest add https://www.cubby-ui.dev/r/scroll-fade.json` |
| select | registry:ui | A select component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/select.json` |
| separator | registry:ui | A separator component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/separator.json` |
| sheet | registry:ui | A sheet component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/sheet.json` |
| shimmer | registry:component | A CSS utility that sweeps an animated highlight across text for live status and streaming states, with no component required. | `npx shadcn@latest add https://www.cubby-ui.dev/r/shimmer.json` |
| skeleton | registry:ui | A skeleton component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/skeleton.json` |
| slider | registry:ui | A slider component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/slider.json` |
| style | registry:style | Initialize your project with Cubby UI's theme system including OKLCH colors and CSS variables. | `npx shadcn@latest add https://www.cubby-ui.dev/r/style.json` |
| switch | registry:ui | A switch component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/switch.json` |
| table | registry:ui | A table component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/table.json` |
| tabs | registry:ui | A tabs component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/tabs.json` |
| textarea | registry:ui | A textarea component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/textarea.json` |
| timeline | registry:ui | A timeline component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/timeline.json` |
| toast | registry:ui | A toast component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/toast.json` |
| toggle | registry:ui | A toggle component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/toggle.json` |
| toggle-group | registry:ui | A toggle-group component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/toggle-group.json` |
| toolbar | registry:ui | A toolbar component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/toolbar.json` |
| tooltip | registry:ui | A tooltip component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/tooltip.json` |
| transition-panel | registry:ui | A transition-panel component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/transition-panel.json` |
| tree | registry:ui | A tree component. | `npx shadcn@latest add https://www.cubby-ui.dev/r/tree.json` |
| use-animated-height | registry:hook | A custom React hook for animated height. | `npx shadcn@latest add https://www.cubby-ui.dev/r/use-animated-height.json` |
| use-controllable-state | registry:hook | A custom React hook for controllable state. | `npx shadcn@latest add https://www.cubby-ui.dev/r/use-controllable-state.json` |
| use-fuzzy-filter | registry:hook | A custom React hook for fuzzy filter. | `npx shadcn@latest add https://www.cubby-ui.dev/r/use-fuzzy-filter.json` |
| use-list-virtualizer | registry:hook | A custom React hook for list virtualizer. | `npx shadcn@latest add https://www.cubby-ui.dev/r/use-list-virtualizer.json` |

## For AI agents

```text
You are adding components from @cubby-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/cubby-ui.md) for the component list.
2. Fetch the machine-readable index: https://www.cubby-ui.dev/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: cubby-ui).
```