# VelvetKit

> Accessible ViewComponent UI components for Rails, styled with Tailwind CSS 4
> and wired up with Stimulus. A generator copies the components an app asks
> for, and the ones they depend on, into the app under a namespace it
> chooses. After that they are the app's own code.

## Docs

- [Full reference](https://velvetkit.com/llms-full.txt): setup, the rules for building UI with the kit, and every component with examples, in one file
- [Getting started](https://velvetkit.com/docs): install the gem and add components
- [Build with AI](https://velvetkit.com/docs/ai): how agents get the kit's context in an app
- [Namespacing](https://velvetkit.com/docs/namespacing)
- [Theming](https://velvetkit.com/docs/theming)
- [Lookbook](https://velvetkit.com/docs/lookbook)

## Components

- [Accordion](https://velvetkit.com/docs/components/accordion.md): Sections that expand and collapse, one at a time or several.
- [Alert](https://velvetkit.com/docs/components/alert.md): A highlighted message, optionally dismissible.
- [Avatar](https://velvetkit.com/docs/components/avatar.md): A person's picture, with initials when there is none.
- [Avatar group](https://velvetkit.com/docs/components/avatar_group.md): Overlapping avatars with a "+N" count for the rest.
- [Badge](https://velvetkit.com/docs/components/badge.md): A small status label.
- [Banner](https://velvetkit.com/docs/components/banner.md): A dismissible strip across the top of a page.
- [Breadcrumb](https://velvetkit.com/docs/components/breadcrumb.md): The path to the current page, collapsing long trails.
- [Button](https://velvetkit.com/docs/components/button.md): Buttons in every variant and size, with icons and a loading state.
- [Button to](https://velvetkit.com/docs/components/button_to.md): A button that submits a one-off form, like Rails' button_to.
- [Card](https://velvetkit.com/docs/components/card.md): A bordered container with header, content and footer.
- [Checkbox](https://velvetkit.com/docs/components/checkbox.md): A checkbox with label, standalone or bound to a form builder.
- [Collapsible](https://velvetkit.com/docs/components/collapsible.md): A section that opens and closes under its trigger, like a branch of a nav tree.
- [Data grid](https://velvetkit.com/docs/components/data_grid.md): A sortable, filterable, server-paged table on AG Grid.
- [Date picker](https://velvetkit.com/docs/components/date_picker.md): A typed date field with a calendar, on Cally.
- [Dialog](https://velvetkit.com/docs/components/dialog.md): A modal dialog on the native <dialog> element.
- [Divider](https://velvetkit.com/docs/components/divider.md): A horizontal or vertical rule, optionally labelled.
- [Form field](https://velvetkit.com/docs/components/form_field.md): A label, hint and error message wired to any form control.
- [Icon](https://velvetkit.com/docs/components/icon.md): A Lucide icon.
- [Image](https://velvetkit.com/docs/components/image.md): An image with consistent sizing and corner radius.
- [Input](https://velvetkit.com/docs/components/input.md): A text field with label, hint and error message, standalone or with a form builder.
- [Input group](https://velvetkit.com/docs/components/input_group.md): A text field with addons before or after it.
- [Label](https://velvetkit.com/docs/components/label.md): A form label with a required marker.
- [Link](https://velvetkit.com/docs/components/link.md): A link styled as text or as a button.
- [Menu](https://velvetkit.com/docs/components/menu.md): A dropdown menu with keyboard navigation.
- [Pagination](https://velvetkit.com/docs/components/pagination.md): Page links for a long list, from a Pagy object.
- [Password input](https://velvetkit.com/docs/components/password_input.md): A password field with a show/hide toggle.
- [Popover](https://velvetkit.com/docs/components/popover.md): Floating content anchored to a trigger.
- [Radio group](https://velvetkit.com/docs/components/radio_group.md): A set of radio buttons.
- [Native select](https://velvetkit.com/docs/components/native_select.md): The browser's own select, styled closed; best for phones' system pickers.
- [Select](https://velvetkit.com/docs/components/select.md): A styled dropdown with keyboard navigation and type-ahead, posting like a native select.
- [Sheet](https://velvetkit.com/docs/components/sheet.md): A panel that slides in from an edge of the screen.
- [Sidebar](https://velvetkit.com/docs/components/sidebar.md): A collapsible application sidebar with groups and menus.
- [Spinner](https://velvetkit.com/docs/components/spinner.md): A loading indicator.
- [Switch](https://velvetkit.com/docs/components/switch.md): An on/off toggle.
- [Table](https://velvetkit.com/docs/components/table.md): A styled table with header, rows and caption.
- [Table of contents](https://velvetkit.com/docs/components/table_of_contents.md): An "On this page" list that follows the reader's scroll.
- [Tabs](https://velvetkit.com/docs/components/tabs.md): Tabbed panels with keyboard navigation.
- [Text](https://velvetkit.com/docs/components/text.md): Body text in set sizes, weights and tones.
- [Textarea](https://velvetkit.com/docs/components/textarea.md): A multi-line text field with label, hint and error, that can grow with its text.
- [Theme toggle](https://velvetkit.com/docs/components/theme_toggle.md): A light/dark/system theme switcher.
- [Tooltip](https://velvetkit.com/docs/components/tooltip.md): A hint shown on hover and focus.
- [Typography](https://velvetkit.com/docs/components/typography.md): Headings, lead, muted, code and blockquote text styles.