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.

Continue Reading
All Articles
2025年7月13日
使用Claude Code Cli 中使用 Kimi-k2
介绍在claude code中使用kimi-k2模型的方法
2025年7月16日
使用llms.txt让AI更快阅读开发文档
The /llms.txt file - A proposal to standardise on using an /llms.txt file to provide information to help LLMs use a website at inference time.
© 2025 Tylergg