# Table of Contents - [Introduction - shadcn/ui](#introduction-shadcn-ui) - [Installation - shadcn/ui](#installation-shadcn-ui) - [Skills - shadcn/ui](#skills-shadcn-ui) - [Components - shadcn/ui](#components-shadcn-ui) - [RTL - shadcn/ui](#rtl-shadcn-ui) - [Theming - shadcn/ui](#theming-shadcn-ui) - [shadcn - shadcn/ui](#shadcn-shadcn-ui) - [Introduction - shadcn/ui](#introduction-shadcn-ui) - [Forms - shadcn/ui](#forms-shadcn-ui) - [MCP Server - shadcn/ui](#mcp-server-shadcn-ui) - [Registry Directory - shadcn/ui](#registry-directory-shadcn-ui) - [Sidebar - shadcn/ui](#sidebar-shadcn-ui) - [Skeleton - shadcn/ui](#skeleton-shadcn-ui) - [Slider - shadcn/ui](#slider-shadcn-ui) - [components.json - shadcn/ui](#components-json-shadcn-ui) - [Figma - shadcn/ui](#figma-shadcn-ui) - [JavaScript - shadcn/ui](#javascript-shadcn-ui) - [Textarea - shadcn/ui](#textarea-shadcn-ui) - [Legacy Docs - shadcn/ui](#legacy-docs-shadcn-ui) - [Tooltip - shadcn/ui](#tooltip-shadcn-ui) - [Sonner - shadcn/ui](#sonner-shadcn-ui) - [Open in v0 - shadcn/ui](#open-in-v0-shadcn-ui) - [Monorepo - shadcn/ui](#monorepo-shadcn-ui) - [Switch - shadcn/ui](#switch-shadcn-ui) - [Typography - shadcn/ui](#typography-shadcn-ui) - [Tabs - shadcn/ui](#tabs-shadcn-ui) - [MCP Server - shadcn/ui](#mcp-server-shadcn-ui) - [Getting Started - shadcn/ui](#getting-started-shadcn-ui) - [Add a Registry - shadcn/ui](#add-a-registry-shadcn-ui) - [Open in v0 - shadcn/ui](#open-in-v0-shadcn-ui) - [Spinner - shadcn/ui](#spinner-shadcn-ui) - [Toggle - shadcn/ui](#toggle-shadcn-ui) - [Toast - shadcn/ui](#toast-shadcn-ui) - [registry.json - shadcn/ui](#registry-json-shadcn-ui) - [Table - shadcn/ui](#table-shadcn-ui) - [Authentication - shadcn/ui](#authentication-shadcn-ui) - [Toggle Group - shadcn/ui](#toggle-group-shadcn-ui) - [registry-item.json - shadcn/ui](#registry-item-json-shadcn-ui) - [Dark Mode - shadcn/ui](#dark-mode-shadcn-ui) --- # Introduction - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) Introduction ============ Copy Page [Previous](https://ui.shadcn.com/docs/components/radix/typography) [Next](https://ui.shadcn.com/docs/installation) shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code. **This is not a component library. It is how you build your component library.** You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app. This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. **Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.** This is what shadcn/ui aims to solve. It is built around the following principles: * **Open Code:** The top layer of your component code is open for modification. * **Composition:** Every component uses a common, composable interface, making them predictable. * **Distribution:** A flat-file schema and command-line tool make it easy to distribute components. * **Beautiful Defaults:** Carefully chosen default styles, so you get great design out-of-the-box. * **AI-Ready:** Open code for LLMs to read, understand, and improve. Open Code --------- shadcn/ui hands you the actual component code. You have full control to customize and extend the components to your needs. This means: * **Full Transparency:** You see exactly how each component is built. * **Easy Customization:** Modify any part of a component to fit your design and functionality requirements. * **AI Integration:** Access to the code makes it straightforward for LLMs to read, understand, and even improve your components. _In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._ ### How do I pull upstream updates in an Open Code approach? Composition ----------- Every component in shadcn/ui shares a common, composable interface. **If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.** _A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones._ Distribution ------------ shadcn/ui is also a code distribution system. It defines a schema for components and a CLI to distribute them. * **Schema:** A flat-file structure that defines the components, their dependencies, and properties. * **CLI:** A command-line tool to distribute and install components across projects with cross-framework support. _You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema._ Beautiful Defaults ------------------ shadcn/ui comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system: * **Good Out-of-the-Box:** Your UI has a clean and minimal look without extra work. * **Unified Design:** Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent. * **Easily Customizable:** If you want to change something, it's simple to override and extend the defaults. AI-Ready -------- The design of shadcn/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components. _An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design._ [Typography](https://ui.shadcn.com/docs/components/radix/typography) [Installation](https://ui.shadcn.com/docs/installation) On This Page [Open Code](https://ui.shadcn.com/docs#open-code) [Composition](https://ui.shadcn.com/docs#composition) [Distribution](https://ui.shadcn.com/docs#distribution) [Beautiful Defaults](https://ui.shadcn.com/docs#beautiful-defaults) [AI-Ready](https://ui.shadcn.com/docs#ai-ready) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # Installation - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) Installation ============ Copy Page [Previous](https://ui.shadcn.com/docs) [Next](https://ui.shadcn.com/docs/components-json) How to install dependencies and structure your app. **Starting a new project?** Use [shadcn/create](https://ui.shadcn.com/create) to scaffold a complete app with custom themes, components, and presets. For Next.js, Vite, Laravel, React Router, Astro, and TanStack Start. Quick Start ----------- Run the following command to create a new project with shadcn/ui: pnpmnpmyarnbun pnpm dlx shadcn@latest init Copy This will guide you through the process of creating a new project with shadcn/ui with your preferred framework, icon library, and theme. Pick Your Framework ------------------- Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app. shadcn/ui is built to work with all React frameworks. [Next.js\ \ Next.js](https://ui.shadcn.com/docs/installation/next) [Vite\ \ Vite](https://ui.shadcn.com/docs/installation/vite) [TanStack Start](https://ui.shadcn.com/docs/installation/tanstack) [Laravel](https://ui.shadcn.com/docs/installation/laravel) [React Router](https://ui.shadcn.com/docs/installation/react-router) [Astro\ \ Astro](https://ui.shadcn.com/docs/installation/astro) [React\ \ Manual](https://ui.shadcn.com/docs/installation/manual) [Introduction](https://ui.shadcn.com/docs) [components.json](https://ui.shadcn.com/docs/components-json) On This Page [Quick Start](https://ui.shadcn.com/docs/installation#quick-start) [Pick Your Framework](https://ui.shadcn.com/docs/installation#pick-your-framework) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # Skills - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) Skills ====== Copy Page [Previous](https://ui.shadcn.com/docs/monorepo) [Next](https://ui.shadcn.com/docs/v0) Give your AI assistant deep knowledge of shadcn/ui components, patterns, and best practices. Skills give AI assistants like Claude Code project-aware context about shadcn/ui. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project. For example, you can ask your AI assistant to: * _"Add a login form with email and password fields."_ * _"Create a settings page with a form for updating profile information."_ * _"Build a dashboard with a sidebar, stats cards, and a data table."_ * _"Switch to --preset \[CODE\]"_ * _"Can you add a hero from @tailark?"_ The skill reads your project's `components.json` and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try. * * * Install ------- pnpmnpmyarnbun pnpm dlx skills add shadcn/ui Copy This installs the shadcn skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn/ui components. Learn more about skills at [skills.sh](https://skills.sh/) . * * * What's Included --------------- The skill provides your AI assistant with the following knowledge: ### Project Context On every interaction, the skill runs `shadcn info --json` to get your project's configuration: framework, Tailwind version, aliases, base library (`radix` or `base`), icon library, installed components, and resolved file paths. ### CLI Commands Full reference for all CLI commands: `init`, `add`, `search`, `view`, `docs`, `diff`, `info`, and `build`. Includes flags, dry-run mode, smart merge workflows, presets, and templates. ### Theming and Customization How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4. ### Registry Authoring How to build and publish custom component registries: `registry.json` format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration. ### MCP Server Setup and tools for the shadcn MCP server, which lets AI assistants search, browse, and install components from registries. * * * How It Works ------------ 1. **Project detection** — The skill activates when it finds a `components.json` file in your project. 2. **Context injection** — It runs `shadcn info --json` to read your project configuration and injects the result into the assistant's context. 3. **Pattern enforcement** — The assistant follows shadcn/ui composition rules: using `FieldGroup` for forms, `ToggleGroup` for option sets, semantic colors, and correct base-specific APIs. 4. **Component discovery** — The assistant uses `shadcn docs`, `shadcn search`, or MCP tools to find components and their documentation before generating code. Learn More ---------- * [CLI](https://ui.shadcn.com/docs/cli) — Full CLI command reference * [MCP Server](https://ui.shadcn.com/docs/mcp) — Connect the MCP server for registry access * [Theming](https://ui.shadcn.com/docs/theming) — CSS variables and customization * [Registry](https://ui.shadcn.com/docs/registry) — Building and publishing custom registries * [skills.sh](https://skills.sh/) — Learn more about AI skills [Monorepo](https://ui.shadcn.com/docs/monorepo) [Open in v0](https://ui.shadcn.com/docs/v0) On This Page [Install](https://ui.shadcn.com/docs/skills#install) [What's Included](https://ui.shadcn.com/docs/skills#whats-included) [Project Context](https://ui.shadcn.com/docs/skills#project-context) [CLI Commands](https://ui.shadcn.com/docs/skills#cli-commands) [Theming and Customization](https://ui.shadcn.com/docs/skills#theming-and-customization) [Registry Authoring](https://ui.shadcn.com/docs/skills#registry-authoring) [MCP Server](https://ui.shadcn.com/docs/skills#mcp-server) [How It Works](https://ui.shadcn.com/docs/skills#how-it-works) [Learn More](https://ui.shadcn.com/docs/skills#learn-more) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # Components - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) Components ========== Copy Page [Next](https://ui.shadcn.com/docs/components/base/accordion) Here you can find all the components available in the library. We are working on adding more components. [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) [Alert](https://ui.shadcn.com/docs/components/radix/alert) [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) [Badge](https://ui.shadcn.com/docs/components/radix/badge) [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) [Button](https://ui.shadcn.com/docs/components/radix/button) [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) [Card](https://ui.shadcn.com/docs/components/radix/card) [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) [Chart](https://ui.shadcn.com/docs/components/radix/chart) [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) [Command](https://ui.shadcn.com/docs/components/radix/command) [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) [Direction](https://ui.shadcn.com/docs/components/radix/direction) [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) [Empty](https://ui.shadcn.com/docs/components/radix/empty) [Field](https://ui.shadcn.com/docs/components/radix/field) [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) [Input](https://ui.shadcn.com/docs/components/radix/input) [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) [Item](https://ui.shadcn.com/docs/components/radix/item) [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) [Label](https://ui.shadcn.com/docs/components/radix/label) [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) [Popover](https://ui.shadcn.com/docs/components/radix/popover) [Progress](https://ui.shadcn.com/docs/components/radix/progress) [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) [Select](https://ui.shadcn.com/docs/components/radix/select) [Separator](https://ui.shadcn.com/docs/components/radix/separator) [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) [Slider](https://ui.shadcn.com/docs/components/radix/slider) [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) [Switch](https://ui.shadcn.com/docs/components/radix/switch) [Table](https://ui.shadcn.com/docs/components/radix/table) [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) [Toast](https://ui.shadcn.com/docs/components/radix/toast) [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) [Typography](https://ui.shadcn.com/docs/components/radix/typography) * * * Can't find what you need? Try the [registry directory](https://ui.shadcn.com/docs/directory) for community-maintained components. [Accordion](https://ui.shadcn.com/docs/components/base/accordion) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # RTL - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) RTL === Copy Page [Previous](https://ui.shadcn.com/docs/dark-mode) [Next](https://ui.shadcn.com/docs/cli) Right-to-left support for shadcn/ui components. shadcn/ui components have first-class support for right-to-left (RTL) layouts. Text alignment, positioning, and directional styles automatically adapt for languages like Arabic, Hebrew, and Persian. Arabic (العربية)▼Toggle تسجيل الدخول إلى حسابك أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك إنشاء حساب البريد الإلكتروني كلمة المرور[نسيت كلمة المرور؟](https://ui.shadcn.com/docs/rtl#) تسجيل الدخولتسجيل الدخول باستخدام Google A card component in RTL mode. When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts. Get Started ----------- Select your framework to get started with RTL support. [Next.js\ \ Next.js](https://ui.shadcn.com/docs/rtl/next) [Vite\ \ Vite](https://ui.shadcn.com/docs/rtl/vite) [TanStack Start](https://ui.shadcn.com/docs/rtl/start) How it works ------------ When you add components with `rtl: true` set in your `components.json`, the shadcn CLI automatically transforms classes and props to be RTL compatible: * Physical positioning classes like `left-*` and `right-*` are converted to logical equivalents like `start-*` and `end-*`. * Directional props are updated to use logical values. * Text alignment and spacing classes are adjusted accordingly. * Supported icons are automatically flipped using `rtl:rotate-180`. Try it out ---------- Click the link below to open a Next.js project with RTL support in v0. [![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https://github.com/shadcn-ui/next-template-rtl) Supported Styles ---------------- Automatic RTL transformation via the CLI is only available for projects created using `shadcn create` with the new styles (`base-nova`, `radix-nova`, etc.). For other styles, see the [Migration Guide](https://ui.shadcn.com/docs/rtl#migrating-existing-components) . Font Recommendations -------------------- For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist. See your framework's RTL guide under [Get Started](https://ui.shadcn.com/docs/rtl#get-started) for details on installing and configuring RTL fonts. Animations ---------- The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, `slide-in-from-right` becomes `slide-in-from-end`. This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction. **A note on tw-animate-css:** There is a [known issue](https://github.com/Wombosvideo/tw-animate-css/issues/67) with the `tw-animate-css` library where the logical slide utilities are not working as expected. For now, make sure you pass in the `dir` prop to portal elements. Copy` Open
Content
 ` Copy` Open
Content
 ` Migrating existing components ----------------------------- If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows: ### Run the migrate command pnpmnpmyarnbun pnpm dlx shadcn@latest migrate rtl [path] Copy `[path]` accepts a path or glob pattern to migrate. If you don't provide a path, it will migrate all the files in the `ui` directory. ### Manual Migration (Optional) The following components are not automatically migrated by the CLI. Follow the RTL support section for each component to manually migrate them. * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar#rtl-support) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination#rtl-support) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar#rtl-support) ### Migrate Icons Some icons like `ArrowRightIcon` or `ChevronLeftIcon` might need the `rtl:rotate-180` class to be flipped correctly. Add the `rtl:rotate-180` class to the icon component to flip it correctly. Copy`` ### Add direction component Add the direction component to your project. pnpmnpmyarnbun pnpm dlx shadcn@latest add direction Copy ### Add DirectionProvider Follow your framework's documentation for details on how to add the `DirectionProvider` component to your project. See the [Get Started](https://ui.shadcn.com/docs/rtl#get-started) section for details on how to add the `DirectionProvider` component to your project. [Dark Mode](https://ui.shadcn.com/docs/dark-mode) [CLI](https://ui.shadcn.com/docs/cli) On This Page [Get Started](https://ui.shadcn.com/docs/rtl#get-started) [How it works](https://ui.shadcn.com/docs/rtl#how-it-works) [Try it out](https://ui.shadcn.com/docs/rtl#try-it-out) [Supported Styles](https://ui.shadcn.com/docs/rtl#supported-styles) [Font Recommendations](https://ui.shadcn.com/docs/rtl#font-recommendations) [Animations](https://ui.shadcn.com/docs/rtl#animations) [Migrating existing components](https://ui.shadcn.com/docs/rtl#migrating-existing-components) [Manual Migration (Optional)](https://ui.shadcn.com/docs/rtl#manual-migration-optional) [Migrate Icons](https://ui.shadcn.com/docs/rtl#migrate-icons) [Add direction component](https://ui.shadcn.com/docs/rtl#add-direction-component) [Add DirectionProvider](https://ui.shadcn.com/docs/rtl#add-directionprovider) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # Theming - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) Theming ======= Copy Page [Previous](https://ui.shadcn.com/docs/components-json) [Next](https://ui.shadcn.com/docs/dark-mode) Using CSS Variables and color utilities for theming. You can choose between using CSS variables (recommended) or utility classes for theming. CSS Variables ------------- Copy`
` To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file. components.json Copy`{ "style": "new-york", "rsc": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" }` Convention ---------- We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color. The `background` suffix is omitted when the variable is used for the background color of the component. Given the following CSS variables: Copy`--primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0);` The `background` color of the following component will be `var(--primary)` and the `foreground` color will be `var(--primary-foreground)`. Copy`
Hello
` List of variables ----------------- Here's the list of variables available for customization: app/globals.css Copy`:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.439 0 0); }` Adding new colors ----------------- To add new colors, you need to add them to your CSS file under the `:root` and `dark` pseudo-classes. Then, use the `@theme inline` directive to make the colors available as CSS variables. app/globals.css Copy`:root { --warning: oklch(0.84 0.16 84); --warning-foreground: oklch(0.28 0.07 46); } .dark { --warning: oklch(0.41 0.11 46); --warning-foreground: oklch(0.99 0.02 95); } @theme inline { --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); }` You can now use the `warning` utility class in your components. Copy`
` Other color formats ------------------- See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for more information on using colors in Tailwind CSS. Base Colors ----------- The available base colors are: **Neutral**, **Stone**, **Zinc**, **Mauve**, **Olive**, **Mist**, and **Taupe**. You can set the base color when initializing your project using a preset or by updating the `baseColor` field in your `components.json` file. [components.json](https://ui.shadcn.com/docs/components-json) [Dark Mode](https://ui.shadcn.com/docs/dark-mode) On This Page [CSS Variables](https://ui.shadcn.com/docs/theming#css-variables) [Convention](https://ui.shadcn.com/docs/theming#convention) [List of variables](https://ui.shadcn.com/docs/theming#list-of-variables) [Adding new colors](https://ui.shadcn.com/docs/theming#adding-new-colors) [Other color formats](https://ui.shadcn.com/docs/theming#other-color-formats) [Base Colors](https://ui.shadcn.com/docs/theming#base-colors) Deploy your shadcn/ui app on Vercel Trusted by OpenAI, Sonos, Adobe, and more. Vercel provides tools and infrastructure to deploy apps and features at scale. Deploy Now[Deploy to Vercel](https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout) --- # shadcn - shadcn/ui Sections * [Introduction](https://ui.shadcn.com/docs) * [Components](https://ui.shadcn.com/docs/components) * [Installation](https://ui.shadcn.com/docs/installation) * [Theming](https://ui.shadcn.com/docs/theming) * [CLI](https://ui.shadcn.com/docs/cli) * [RTL](https://ui.shadcn.com/docs/rtl) * [Skills](https://ui.shadcn.com/docs/skills) * [MCP Server](https://ui.shadcn.com/docs/mcp) * [Registry](https://ui.shadcn.com/docs/registry) * [Forms](https://ui.shadcn.com/docs/forms) * [Changelog](https://ui.shadcn.com/docs/changelog) Components * [Accordion](https://ui.shadcn.com/docs/components/radix/accordion) * [Alert](https://ui.shadcn.com/docs/components/radix/alert) * [Alert Dialog](https://ui.shadcn.com/docs/components/radix/alert-dialog) * [Aspect Ratio](https://ui.shadcn.com/docs/components/radix/aspect-ratio) * [Avatar](https://ui.shadcn.com/docs/components/radix/avatar) * [Badge](https://ui.shadcn.com/docs/components/radix/badge) * [Breadcrumb](https://ui.shadcn.com/docs/components/radix/breadcrumb) * [Button](https://ui.shadcn.com/docs/components/radix/button) * [Button Group](https://ui.shadcn.com/docs/components/radix/button-group) * [Calendar](https://ui.shadcn.com/docs/components/radix/calendar) * [Card](https://ui.shadcn.com/docs/components/radix/card) * [Carousel](https://ui.shadcn.com/docs/components/radix/carousel) * [Chart](https://ui.shadcn.com/docs/components/radix/chart) * [Checkbox](https://ui.shadcn.com/docs/components/radix/checkbox) * [Collapsible](https://ui.shadcn.com/docs/components/radix/collapsible) * [Combobox](https://ui.shadcn.com/docs/components/radix/combobox) * [Command](https://ui.shadcn.com/docs/components/radix/command) * [Context Menu](https://ui.shadcn.com/docs/components/radix/context-menu) * [Data Table](https://ui.shadcn.com/docs/components/radix/data-table) * [Date Picker](https://ui.shadcn.com/docs/components/radix/date-picker) * [Dialog](https://ui.shadcn.com/docs/components/radix/dialog) * [Direction](https://ui.shadcn.com/docs/components/radix/direction) * [Drawer](https://ui.shadcn.com/docs/components/radix/drawer) * [Dropdown Menu](https://ui.shadcn.com/docs/components/radix/dropdown-menu) * [Empty](https://ui.shadcn.com/docs/components/radix/empty) * [Field](https://ui.shadcn.com/docs/components/radix/field) * [Hover Card](https://ui.shadcn.com/docs/components/radix/hover-card) * [Input](https://ui.shadcn.com/docs/components/radix/input) * [Input Group](https://ui.shadcn.com/docs/components/radix/input-group) * [Input OTP](https://ui.shadcn.com/docs/components/radix/input-otp) * [Item](https://ui.shadcn.com/docs/components/radix/item) * [Kbd](https://ui.shadcn.com/docs/components/radix/kbd) * [Label](https://ui.shadcn.com/docs/components/radix/label) * [Menubar](https://ui.shadcn.com/docs/components/radix/menubar) * [Native Select](https://ui.shadcn.com/docs/components/radix/native-select) * [Navigation Menu](https://ui.shadcn.com/docs/components/radix/navigation-menu) * [Pagination](https://ui.shadcn.com/docs/components/radix/pagination) * [Popover](https://ui.shadcn.com/docs/components/radix/popover) * [Progress](https://ui.shadcn.com/docs/components/radix/progress) * [Radio Group](https://ui.shadcn.com/docs/components/radix/radio-group) * [Resizable](https://ui.shadcn.com/docs/components/radix/resizable) * [Scroll Area](https://ui.shadcn.com/docs/components/radix/scroll-area) * [Select](https://ui.shadcn.com/docs/components/radix/select) * [Separator](https://ui.shadcn.com/docs/components/radix/separator) * [Sheet](https://ui.shadcn.com/docs/components/radix/sheet) * [Sidebar](https://ui.shadcn.com/docs/components/radix/sidebar) * [Skeleton](https://ui.shadcn.com/docs/components/radix/skeleton) * [Slider](https://ui.shadcn.com/docs/components/radix/slider) * [Sonner](https://ui.shadcn.com/docs/components/radix/sonner) * [Spinner](https://ui.shadcn.com/docs/components/radix/spinner) * [Switch](https://ui.shadcn.com/docs/components/radix/switch) * [Table](https://ui.shadcn.com/docs/components/radix/table) * [Tabs](https://ui.shadcn.com/docs/components/radix/tabs) * [Textarea](https://ui.shadcn.com/docs/components/radix/textarea) * [Toast](https://ui.shadcn.com/docs/components/radix/toast) * [Toggle](https://ui.shadcn.com/docs/components/radix/toggle) * [Toggle Group](https://ui.shadcn.com/docs/components/radix/toggle-group) * [Tooltip](https://ui.shadcn.com/docs/components/radix/tooltip) * [Typography](https://ui.shadcn.com/docs/components/radix/typography) Get Started * [Installation](https://ui.shadcn.com/docs/installation) * [components.json](https://ui.shadcn.com/docs/components-json) * [Theming](https://ui.shadcn.com/docs/theming) * [Dark Mode](https://ui.shadcn.com/docs/dark-mode) * [CLI](https://ui.shadcn.com/docs/cli) * [Monorepo](https://ui.shadcn.com/docs/monorepo) * [Skills](https://ui.shadcn.com/docs/skills) * [Open in v0](https://ui.shadcn.com/docs/v0) * [JavaScript](https://ui.shadcn.com/docs/javascript) * [Figma](https://ui.shadcn.com/docs/figma) * [llms.txt](https://ui.shadcn.com/llms.txt) * [Legacy Docs](https://ui.shadcn.com/docs/legacy) Forms * [React Hook Form](https://ui.shadcn.com/docs/forms/react-hook-form) * [TanStack Form](https://ui.shadcn.com/docs/forms/tanstack-form) Registry * [Introduction](https://ui.shadcn.com/docs/registry) * [Getting Started](https://ui.shadcn.com/docs/registry/getting-started) * [Namespaces](https://ui.shadcn.com/docs/registry/namespace) * [Authentication](https://ui.shadcn.com/docs/registry/authentication) * [Examples](https://ui.shadcn.com/docs/registry/examples) * [MCP Server](https://ui.shadcn.com/docs/registry/mcp) * [Add a Registry](https://ui.shadcn.com/docs/registry/registry-index) * [Open in v0](https://ui.shadcn.com/docs/registry/open-in-v0) * [registry.json](https://ui.shadcn.com/docs/registry/registry-json) * [registry-item.json](https://ui.shadcn.com/docs/registry/registry-item-json) shadcn ====== Copy Page [Previous](https://ui.shadcn.com/docs/rtl) [Next](https://ui.shadcn.com/docs/monorepo) Use the shadcn CLI to add components to your project. init ---- Use the `init` command to initialize configuration and dependencies for a new project. The `init` command installs dependencies, adds the `cn` util and configures CSS variables for the project. pnpmnpmyarnbun pnpm dlx shadcn@latest init Copy **Options** Copy`Usage: shadcn init [options] [components...] initialize your project and install dependencies Arguments: components name, url or local path to component Options: -t, --template