# shadcn-vue

> Beautifully designed components built with Radix Vue and Tailwind CSS.

## Table of Contents

- [About](/docs/about.md): Powered by amazing open source projects.
- [Accordion](/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Area](/docs/charts/area.md): An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
- [Aspect Ratio](/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Astro](/docs/installation/astro.md): Install and configure Astro.
- [Astro](/docs/dark-mode/astro.md): Adding dark mode to your astro app.
- [AutoForm](/docs/components/auto-form.md): Automatically generate a form from Zod schema.
- [Avatar](/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Bar](/docs/charts/bar.md): A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
- [Blocks - shadcn-vue](/block-renderer.md)
- [Breadcrumb](/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](/docs/components/button.md): Displays a button or a component that looks like a button.
- [Calendar](/docs/components/calendar.md): A date field component that allows users to enter and edit date.
- [Card](/docs/components/card.md): Displays a card with header, content, and footer.
- [Carousel](/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Changelog](/docs/changelog.md): Latest updates and announcements.
- [Charts](/docs/charts.md): Versatile visualization tool, allowing users to represent data using various types of charts for effective analysis.
- [Checkbox](/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [CLI](/docs/cli.md): Use the CLI to add components to your project.
- [Collapsible](/docs/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Combobox](/docs/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Command](/docs/components/command.md): Fast, composable, unstyled command menu.
- [components.json](/docs/components-json.md): Configuration for your project.
- [Context Menu](/docs/components/context-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Dark Mode](/docs/dark-mode.md): Adding dark mode to your site.
- [Data Table](/docs/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Picker](/docs/components/date-picker.md): A date picker component with range and presets.
- [Dialog](/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Donut](/docs/charts/donut.md): A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
- [Drawer](/docs/components/drawer.md): A drawer component for vue.
- [Dropdown Menu](/docs/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Examples](/docs/registry/examples.md): Examples of registry items: styles, components, css vars, etc.
- [FAQ](/docs/registry/faq.md): Frequently asked questions about running a registry.
- [Figma](/docs/figma.md): Every component recreated in Figma. With customizable props, typography and icons.
- [Getting Started](/docs/registry/getting-started.md): Learn how to get setup and run your own component registry.
- [Hover Card](/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](/docs/components/input.md): Displays a form input field or a component that looks like an input field.
- [Installation](/docs/installation.md): How to install dependencies and structure your app.
- [Introduction](/docs/introduction.md): Re-usable components built with Radix Vue, and Tailwind CSS.
- [Label](/docs/components/label.md): Renders an accessible label associated with controls.
- [Laravel](/docs/installation/laravel.md): Install and configure Laravel with Inertia
- [Line](/docs/charts/line.md): A line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
- [Manual Installation](/docs/installation/manual.md): Add dependencies to your project manually.
- [Menubar](/docs/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Navigation Menu](/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Number Field](/docs/components/number-field.md): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Nuxt](/docs/dark-mode/nuxt.md): Adding dark mode to your nuxt app.
- [Nuxt](/docs/installation/nuxt.md): Install and configure Nuxt.
- [Pagination](/docs/components/pagination.md): Displays data in paged format and provides navigation between pages.
- [PIN Input](/docs/components/pin-input.md): Allows users to input a sequence of one-character alphanumeric inputs.
- [Popover](/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](/docs/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Radio Group](/docs/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Range Calendar](/docs/components/range-calendar.md): A calendar component that allows users to select a range of dates.
- [Registry](/docs/registry/index.md): Run your own component registry.
- [registry-item.json](/docs/registry/registry-item-json.md): Specification for registry items.
- [registry.json](/docs/registry/registry-json.md): Schema for running your own component registry.
- [Resizable](/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll-area](/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](/docs/components/sonner.md): An opinionated toast component for Vue.
- [Stepper](/docs/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](/docs/components/table.md): A responsive table component.
- [Tabs](/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tags Input](/docs/components/tags-input.md): Tag inputs render tags inside an input, followed by an actual text input.
- [Tailwind v4](/docs/tailwind-v4.md): How to use shadcn-vue with Tailwind v4.
- [Textarea](/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Theming](/docs/theming.md): Use CSS Variables to customize the look and feel of your application.
- [Toast](/docs/components/toast.md): A succinct message that is displayed temporarily.
- [Toggle](/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [VeeValidate](/docs/components/form.md): Building forms with VeeValidate and Zod.
- [Vite](/docs/dark-mode/vite.md): Adding dark mode to your vite app.
- [Vite](/docs/installation/vite.md): Install and configure Vite.
- [Vitepress](/docs/dark-mode/vitepress.md): Adding dark mode to your vitepress app.