# Vinyaas

> Accessible React UI components for Tailwind CSS v4 — install as editable source with the Vinyaas CLI.

Current release: v1.5.0. Components install as editable source with `npx vinyaas add <name>`. Installable registry JSON lives at https://vinyaas.vercel.app/r/new-york/<name>.json.

## Get started

- [Installation](https://vinyaas.vercel.app/installation)
- [components.json](https://vinyaas.vercel.app/components-json)
- [Dark Mode](https://vinyaas.vercel.app/dark-mode)
- [Theming](https://vinyaas.vercel.app/theming)
- [Typeset](https://vinyaas.vercel.app/typeset)
- [Package Import](https://vinyaas.vercel.app/package-import)
- [CLI](https://vinyaas.vercel.app/cli)

## Sections

- [Home](https://vinyaas.vercel.app/)
- [Introduction](https://vinyaas.vercel.app/introduction)
- [Components](https://vinyaas.vercel.app/components)
- [Catalogs](https://vinyaas.vercel.app/catalogs)
- [Accessibility](https://vinyaas.vercel.app/accessibility)
- [Changelog](https://vinyaas.vercel.app/changelog)

## Companion

- [Introduction](https://vinyaas.vercel.app/companion)
- [Installation](https://vinyaas.vercel.app/companion/installation)
- [companion.json](https://vinyaas.vercel.app/companion/configuration)
- [Animations](https://vinyaas.vercel.app/companion/animations)
- [Interactions](https://vinyaas.vercel.app/companion/interactions)
- [Custom Companion](https://vinyaas.vercel.app/companion/custom)
- [Examples](https://vinyaas.vercel.app/companion/examples)
- [Gallery](https://vinyaas.vercel.app/companion/gallery)

## Components

- [Accordion](https://vinyaas.vercel.app/components/accordion): A stack of sections that expand and collapse. Install: `npx vinyaas add accordion`.
- [Alert](https://vinyaas.vercel.app/components/alert): A notice for a status that should be announced. Install: `npx vinyaas add alert`.
- [Alert Dialog](https://vinyaas.vercel.app/components/alert-dialog): A confirmation modal for important or destructive actions. Install: `npx vinyaas add alert-dialog`.
- [Aspect Ratio](https://vinyaas.vercel.app/components/aspect-ratio): Displays content within a desired ratio. Install: `npx vinyaas add aspect-ratio`.
- [Attachment](https://vinyaas.vercel.app/components/attachment): A file or image chip with media, metadata, and actions. Install: `npx vinyaas add attachment`.
- [Avatar](https://vinyaas.vercel.app/components/avatar): An image with a fallback for a person or entity. Install: `npx vinyaas add avatar`.
- [Badge](https://vinyaas.vercel.app/components/badge): A compact label for status or category. Install: `npx vinyaas add badge`.
- [Beam](https://vinyaas.vercel.app/components/beam): An animated connector between two elements with a glowing pulse. Install: `npx vinyaas add beam`.
- [Breadcrumb](https://vinyaas.vercel.app/components/breadcrumb): A trail of links for the current page. Install: `npx vinyaas add breadcrumb`.
- [Button](https://vinyaas.vercel.app/components/button): A versatile button primitive for actions and commands. Install: `npx vinyaas add button`.
- [Calendar](https://vinyaas.vercel.app/components/calendar): An accessible month calendar for selecting dates. Install: `npx vinyaas add calendar`.
- [Card](https://vinyaas.vercel.app/components/card): A bordered container for related content. Install: `npx vinyaas add card`.
- [Chart](https://vinyaas.vercel.app/components/chart): Themed charts for dashboards and product analytics. Install: `npx vinyaas add chart`.
- [Checkbox](https://vinyaas.vercel.app/components/checkbox): A native checkbox control for selecting one or more options. Install: `npx vinyaas add checkbox`.
- [Combobox](https://vinyaas.vercel.app/components/combobox): A searchable control for filtering and choosing options. Install: `npx vinyaas add combobox`.
- [Command](https://vinyaas.vercel.app/components/command): A searchable list of actions and pages. Install: `npx vinyaas add command`.
- [Data Table](https://vinyaas.vercel.app/components/data-table): A dashboard table with search, sorting, selection, and pagination. Install: `npx vinyaas add data-table`.
- [Date Picker](https://vinyaas.vercel.app/components/date-picker): A calendar popover for choosing a single date. Install: `npx vinyaas add date-picker`.
- [Dialog](https://vinyaas.vercel.app/components/dialog): A modal panel for a focused task. Install: `npx vinyaas add dialog`.
- [Drag & Drop](https://vinyaas.vercel.app/components/drag-and-drop): Sortable and reorderable drag-and-drop for lists, cards, and boards. Install: `npx vinyaas add drag-and-drop`.
- [Drawer](https://vinyaas.vercel.app/components/drawer): A panel that slides in from the edge of the screen. Install: `npx vinyaas add drawer`.
- [Dropdown Menu](https://vinyaas.vercel.app/components/dropdown-menu): A menu of actions anchored to a button. Install: `npx vinyaas add dropdown-menu`.
- [Empty State](https://vinyaas.vercel.app/components/empty-state): A composable empty state for lists and dashboard panels. Install: `npx vinyaas add empty-state`.
- [File Upload](https://vinyaas.vercel.app/components/file-upload): A native file picker with drag and drop. Install: `npx vinyaas add file-upload`.
- [Form](https://vinyaas.vercel.app/components/form): Accessible field structure for labels, descriptions, and validation. Install: `npx vinyaas add form`.
- [Fuse Button](https://vinyaas.vercel.app/components/fuse-button): A button with a burning fuse countdown for undoable actions. Install: `npx vinyaas add fuse-button`.
- [Hover Card](https://vinyaas.vercel.app/components/hover-card): A preview that opens on hover or focus. Install: `npx vinyaas add hover-card`.
- [Input](https://vinyaas.vercel.app/components/input): A styled native input for single-line user input. Install: `npx vinyaas add input`.
- [Input Group](https://vinyaas.vercel.app/components/input-group): A field with icons, addons, and actions. Install: `npx vinyaas add input-group`.
- [Input OTP](https://vinyaas.vercel.app/components/input-otp): A grouped one-time code field. Install: `npx vinyaas add input-otp`.
- [Kbd](https://vinyaas.vercel.app/components/kbd): A compact label for a keyboard key. Install: `npx vinyaas add kbd`.
- [Label](https://vinyaas.vercel.app/components/label): An accessible label for form controls. Install: `npx vinyaas add label`.
- [Marker](https://vinyaas.vercel.app/components/marker): An inline status, bordered row, or labeled divider. Install: `npx vinyaas add marker`.
- [Multi Input](https://vinyaas.vercel.app/components/multi-input): A field that collects several values as removable chips. Install: `npx vinyaas add multi-input`.
- [Native Select](https://vinyaas.vercel.app/components/native-select): A composed native select with options and groups. Install: `npx vinyaas add native-select`.
- [Navigation Menu](https://vinyaas.vercel.app/components/navigation-menu): A composable site navigation menu with rich mega-menu content panels. Install: `npx vinyaas add navigation-menu`.
- [Pagination](https://vinyaas.vercel.app/components/pagination): Composable page navigation with previous, next, links, and ellipsis. Install: `npx vinyaas add pagination`.
- [Popover](https://vinyaas.vercel.app/components/popover): A floating panel with interactive content. Install: `npx vinyaas add popover`.
- [Progress](https://vinyaas.vercel.app/components/progress): A native progress indicator for a known amount of work. Install: `npx vinyaas add progress`.
- [Radio Group](https://vinyaas.vercel.app/components/radio-group): A group of mutually exclusive selectable options. Install: `npx vinyaas add radio-group`.
- [Resizable](https://vinyaas.vercel.app/components/resizable): Resizable panel layouts with accessible handles for dashboards. Install: `npx vinyaas add resizable`.
- [Score Ring](https://vinyaas.vercel.app/components/score-ring): A circular score meter whose color blends from a start to an end color. Install: `npx vinyaas add score-ring`.
- [Scroll Area](https://vinyaas.vercel.app/components/scroll-area): A native scroll container with a thin scrollbar. Install: `npx vinyaas add scroll-area`.
- [Select](https://vinyaas.vercel.app/components/select): A custom select with grouped options and keyboard-friendly listbox behavior. Install: `npx vinyaas add select`.
- [Separator](https://vinyaas.vercel.app/components/separator): A horizontal or vertical divider between content. Install: `npx vinyaas add separator`.
- [Sheet](https://vinyaas.vercel.app/components/sheet): A side modal for settings, details, filters, and mobile navigation. Install: `npx vinyaas add sheet`.
- [Sidebar](https://vinyaas.vercel.app/components/sidebar): Composable dashboard sidebar with collapsed and mobile navigation. Install: `npx vinyaas add sidebar`.
- [Skeleton](https://vinyaas.vercel.app/components/skeleton): A placeholder shown while content is loading. Install: `npx vinyaas add skeleton`.
- [Slider](https://vinyaas.vercel.app/components/slider): A native range input for a value between two bounds. Install: `npx vinyaas add slider`.
- [Spinner](https://vinyaas.vercel.app/components/spinner): A small loading indicator. Install: `npx vinyaas add spinner`.
- [Switch](https://vinyaas.vercel.app/components/switch): A switch for a binary setting. Install: `npx vinyaas add switch`.
- [Table](https://vinyaas.vercel.app/components/table): A semantic table for rows and columns. Install: `npx vinyaas add table`.
- [Tabs](https://vinyaas.vercel.app/components/tabs): A set of panels that share one visible view at a time. Install: `npx vinyaas add tabs`.
- [Textarea](https://vinyaas.vercel.app/components/textarea): A styled multiline text input. Install: `npx vinyaas add textarea`.
- [Toast](https://vinyaas.vercel.app/components/toast): A temporary notice. Install: `npx vinyaas add toast`.
- [Toggle](https://vinyaas.vercel.app/components/toggle): A two-state button that stays pressed until toggled again. Install: `npx vinyaas add toggle`.
- [Toggle Group](https://vinyaas.vercel.app/components/toggle-group): A set of toggles with single or multiple selection. Install: `npx vinyaas add toggle-group`.
- [Tooltip](https://vinyaas.vercel.app/components/tooltip): A short label for a control. Install: `npx vinyaas add tooltip`.
- [Typography](https://vinyaas.vercel.app/components/typography): Semantic text styles for titles, body, and supporting copy. Install: `npx vinyaas add typography`.
- [User Cursor](https://vinyaas.vercel.app/components/user-cursor): A Figma-style collaborative cursor with a name label. Install: `npx vinyaas add user-cursor`.

## Catalogs

- Form (`npx vinyaas add --catalog form`): Core form controls for building inputs, choices, and actions. Includes button, input, label, textarea, multi-input, native-select, select, combobox, calendar, date-picker, checkbox, radio-group, switch, toggle, toggle-group, slider, form.
- Dashboard (`npx vinyaas add --catalog dashboard`): Primitives commonly used in dashboards and application surfaces. Includes card, badge, tabs, breadcrumb, tooltip, progress, score-ring, skeleton, table, data-table, pagination, scroll-area, separator, resizable, sidebar, drag-and-drop, empty-state, calendar, date-picker, combobox, form.
- Navigation (`npx vinyaas add --catalog navigation`): Navigation and command patterns for application shells. Includes breadcrumb, tabs, dropdown-menu, command, combobox, sidebar, sheet, navigation-menu, pagination.
- Feedback (`npx vinyaas add --catalog feedback`): Alerts, overlays, and progress cues for user feedback. Includes alert, alert-dialog, dialog, drawer, sheet, toast, skeleton, progress, spinner, empty-state.
- Application (`npx vinyaas add --catalog application`): A starter set of application-shell and content primitives. Includes command, combobox, alert-dialog, dialog, sheet, dropdown-menu, navigation-menu, popover, tooltip, tabs, card, badge, breadcrumb, resizable, sidebar, drag-and-drop, pagination, data-table, calendar, date-picker, empty-state, form.