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