Repository: shadcn-ui/ui Subpath: /apps/v4/content/docs Files analyzed: 95 Estimated tokens: 117.8k Directory structure: └── docs/ ├── meta.json ├── (root)/ │ ├── about.mdx │ ├── blocks.mdx │ ├── changelog.mdx │ ├── cli.mdx │ ├── components-json.mdx │ ├── figma.mdx │ ├── index.mdx │ ├── javascript.mdx │ ├── legacy.mdx │ ├── meta.json │ ├── monorepo.mdx │ ├── react-19.mdx │ ├── styleguide.mdx │ ├── tailwind-v4.mdx │ ├── theming.mdx │ └── v0.mdx ├── components/ │ ├── accordion.mdx │ ├── alert-dialog.mdx │ ├── alert.mdx │ ├── aspect-ratio.mdx │ ├── avatar.mdx │ ├── badge.mdx │ ├── breadcrumb.mdx │ ├── button.mdx │ ├── calendar.mdx │ ├── card.mdx │ ├── carousel.mdx │ ├── chart.mdx │ ├── checkbox.mdx │ ├── collapsible.mdx │ ├── combobox.mdx │ ├── command.mdx │ ├── context-menu.mdx │ ├── data-table.mdx │ ├── date-picker.mdx │ ├── dialog.mdx │ ├── drawer.mdx │ ├── dropdown-menu.mdx │ ├── form.mdx │ ├── hover-card.mdx │ ├── index.mdx │ ├── input-otp.mdx │ ├── input.mdx │ ├── label.mdx │ ├── menubar.mdx │ ├── navigation-menu.mdx │ ├── pagination.mdx │ ├── popover.mdx │ ├── progress.mdx │ ├── radio-group.mdx │ ├── resizable.mdx │ ├── scroll-area.mdx │ ├── select.mdx │ ├── separator.mdx │ ├── sheet.mdx │ ├── sidebar.mdx │ ├── skeleton.mdx │ ├── slider.mdx │ ├── sonner.mdx │ ├── switch.mdx │ ├── table.mdx │ ├── tabs.mdx │ ├── textarea.mdx │ ├── toast.mdx │ ├── toggle-group.mdx │ ├── toggle.mdx │ ├── tooltip.mdx │ └── typography.mdx ├── dark-mode/ │ ├── astro.mdx │ ├── index.mdx │ ├── meta.json │ ├── next.mdx │ ├── remix.mdx │ └── vite.mdx ├── installation/ │ ├── astro.mdx │ ├── gatsby.mdx │ ├── index.mdx │ ├── laravel.mdx │ ├── manual.mdx │ ├── meta.json │ ├── next.mdx │ ├── react-router.mdx │ ├── remix.mdx │ ├── tanstack-router.mdx │ ├── tanstack.mdx │ └── vite.mdx └── registry/ ├── examples.mdx ├── faq.mdx ├── getting-started.mdx ├── index.mdx ├── meta.json ├── open-in-v0.mdx ├── registry-item-json.mdx └── registry-json.mdx ================================================ FILE: apps/v4/content/docs/meta.json ================================================ { "root": true, "pages": [ "(root)", "changelog", "components", "installation", "dark-mode", "registry" ] } ================================================ FILE: apps/v4/content/docs/(root)/about.mdx ================================================ --- title: About description: Powered by amazing open source projects. --- ## About [ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com). ## Credits - [Radix UI](https://radix-ui.com) - For the primitives. - [Vercel](https://vercel.com) - Where I host all my projects. - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. - [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`. - [cmdk](https://cmdk.paco.me) - For the `` component. ## License MIT © [shadcn](https://shadcn.com) ================================================ FILE: apps/v4/content/docs/(root)/blocks.mdx ================================================ --- title: Blocks description: Contribute components to the blocks library. --- We are inviting the community to contribute to the [blocks library](/blocks). Share your components and blocks with other developers and help build a library of high-quality, reusable components. We'd love to see all types of blocks: applications, marketing, products, and more. ## Setup your workspace ### Fork the repository ```bash git clone https://github.com/shadcn-ui/ui.git ``` ### Create a new branch ```bash git checkout -b username/my-new-block ``` ### Install dependencies ```bash pnpm install ``` ### Start the dev server ```bash pnpm www:dev ``` ## Add a block A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils. ### Create a new block Create a new folder in the `apps/www/registry/new-york/blocks` directory. Make sure the folder is named in kebab-case and under `new-york`. ```txt apps └── www └── registry └── new-york └── blocks └── dashboard-01 ``` **Note:** The build script will take care of building the block for the `default` style. ### Add your block files Add your files to the block folder. Here is an example of a block with a page, components, hooks, and utils. ```txt dashboard-01 └── page.tsx └── components └── hello-world.tsx └── example-card.tsx └── hooks └── use-hello-world.ts └── lib └── format-date.ts ``` **Note:** You can start with one file and add more files later. ## Add your block to the registry ### Add your block definition to `registry-blocks.tsx` To add your block to the registry, you need to add your block definition to `registry-blocks.ts`. This follows the registry schema at [https://ui.shadcn.com/schema/registry-item.json](https://ui.shadcn.com/schema/registry-item.json). ```tsx title="apps/www/registry/registry-blocks.tsx" showLineNumbers export const blocks = [ // ... { name: "dashboard-01", author: "shadcn (https://ui.shadcn.com)", title: "Dashboard", description: "A simple dashboard with a hello world component.", type: "registry:block", registryDependencies: ["input", "button", "card"], dependencies: ["zod"], files: [ { path: "blocks/dashboard-01/page.tsx", type: "registry:page", target: "app/dashboard/page.tsx", }, { path: "blocks/dashboard-01/components/hello-world.tsx", type: "registry:component", }, { path: "blocks/dashboard-01/components/example-card.tsx", type: "registry:component", }, { path: "blocks/dashboard-01/hooks/use-hello-world.ts", type: "registry:hook", }, { path: "blocks/dashboard-01/lib/format-date.ts", type: "registry:lib", }, ], categories: ["dashboard"], }, ] ``` Make sure you add a name, description, type, registryDependencies, dependencies, files, and categories. We'll go over each of these in more detail in the schema docs (coming soon). ### Run the build script ```bash pnpm registry:build ``` **Note:** you do not need to run this script for every change. You only need to run it when you update the block definition. ### View your block Once the build script is finished, you can view your block at `http://localhost:3333/blocks/[CATEGORY]` or a full screen preview at `http://localhost:3333/view/styles/new-york/dashboard-01`. Block preview Block preview ### Build your block You can now build your block by editing the files in the block folder and viewing the changes in the browser. If you add more files, make sure to add them to the `files` array in the block definition. ## Publish your block Once you're ready to publish your block, you can submit a pull request to the main repository. ### Run the build script ```bash pnpm registry:build ``` ### Capture a screenshot ```bash pnpm registry:capture ``` **Note:** If you've run the capture script before, you might need to delete the existing screenshots (both light and dark) at `apps/www/public/r/styles/new-york` and run the script again. ### Submit a pull request Commit your changes and submit a pull request to the main repository. Your block will be reviewed and merged. Once merged it will be published to the website and available to be installed via the CLI. ## Categories The `categories` property is used to organize your block in the registry. ### Add a category If you need to add a new category, you can do so by adding it to the `registryCategories` array in `apps/www/registry/registry-categories.ts`. ```tsx title="apps/www/registry/registry-categories.ts" showLineNumbers export const registryCategories = [ // ... { name: "Input", slug: "input", hidden: false, }, ] ``` ## Guidelines Here are some guidelines to follow when contributing to the blocks library. - The following properties are required for the block definition: `name`, `description`, `type`, `files`, and `categories`. - Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc. - Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc. - If your block has a page (optional), it should be the first entry in the `files` array and it should have a `target` property. This helps the CLI place the page in the correct location for file-based routing. - **Imports should always use the `@/registry` path.** eg. `import { Input } from "@/registry/new-york/input"` ================================================ FILE: apps/v4/content/docs/(root)/changelog.mdx ================================================ --- title: Changelog description: Latest updates and announcements. toc: false --- ## July 2025 - Universal Registry Items We've added support for universal registry items. This allows you to create registry items that can be distributed to any project i.e. no framework, no components.json, no tailwind, no react required. This new registry item type unlocks a lot of new workflows. You can now distribute code, config, rules, docs, anything to any code project. See the [docs](/docs/registry/examples) for more details and examples. ## July 2025 - Local File Support The shadcn CLI now supports local files. Initialize projects and add components, themes, hooks, utils and more from local JSON files. ```bash # Initialize a project from a local file npx shadcn init ./template.json # Add a component from a local file npx shadcn add ./block.json ``` This feature enables powerful new workflows: - **Zero setup** - No remote registries required - **Faster development** - Test registry items locally before publishing - **Enhanced workflow for agents and MCP** - Generate and run registry items locally - **Private components** - Keep proprietary components local and private. ## June 2025 - `radix-ui` We've added a new command to migrate to the new `radix-ui` package. This command will replace all `@radix-ui/react-*` imports with `radix-ui`. ```bash npx shadcn@latest migrate radix ``` It will automatically update all imports in your `ui` components and install `radix-ui` as a dependency. ```diff showLineNumbers title="components/ui/alert-dialog.tsx" - import * as AlertDialogPrimitive from "@radix-ui/react-dialog" + import { AlertDialog as AlertDialogPrimitive } from "radix-ui" ``` Make sure to test your components and project after running the command. **Note:** To update imports for newly added components, run the migration command again. ## June 2025 - Calendar Component We've upgraded the `Calendar` component to the latest version of [React DayPicker](https://daypicker.dev). This is a major upgrade and includes a lot of new features and improvements. We've also built a collection of 30+ calendar blocks that you can use to build your own calendar components. See all calendar blocks in the [Blocks Library](/blocks/calendar) page. Calendar To upgrade your project to the latest version of the `Calendar` component, see the [upgrade guide](/docs/components/calendar#upgrade-guide). ## May 2025 - New Site We've upgraded [ui.shadcn.com](https://ui.shadcn.com) to Next.js 15.3 and Tailwind v4. The site now uses the upgraded `new-york` components. We've also made some minor design updates to make the site faster and easier to navigate. This upgrade unlocks a lot of new features that we're working on. More to come. ## April 2025 - MCP We're working on zero-config MCP support for shadcn/ui registry. One command `npx shadcn registry:mcp` to make any registry mcp-compatible. Lift Mode Learn more in the thread here: https://x.com/shadcn/status/1917597228513853603 ## March 2025 - shadcn 2.5.0 We tagged shadcn 2.5.0 earlier this week. It comes with a pretty cool feature: **resolve anywhere**. Registries can now place files anywhere in an app and we'll properly resolve imports. No need to stick to a fixed file structure. It can even add files outside the registry itself. On install, we track all files and perform a multi-pass resolution to correctly handle imports and aliases. It's fast. ## March 2025 - Cross-framework Route Support The shadcn CLI can now auto-detect your framework and adapts routes for you. Works with all frameworks including Laravel, Vite and React Router. ## February 2025 - Tailwind v4 We shipped the first preview of Tailwind v4 and React 19. Ready for you to try out. You can start using it today. What's New: - The CLI can now initialize projects with Tailwind v4. - Full support for the new @theme directive and @theme inline option. - All components are updated for Tailwind v4 and React 19. - We've removed the forwardRefs and adjusted the types. - Every primitive now has a data-slot attribute for styling. - We've fixed and cleaned up the style of the components. - We're deprecating the toast component in favor of sonner. - Buttons now use the default cursor. - We're deprecating the default style. New projects will use new-york. - HSL colors are now converted to OKLCH. Read more in the [docs](/docs/tailwind-v4). ## February 2025 - Updated Registry Schema We're updating the registry schema to support more features. Define code as a flat JSON file and distribute it via the CLI. - Custom styles: bring your own design system, components & tokens - Extend, override, mix & match components from third-party registries and LLMs - Install themes, CSS vars, hooks, animations, and Tailwind layers & utilities ## January 2025 - Blocks We are inviting the community to contribute to the blocks library. Share your components and blocks with other developers and help build a library of high-quality, reusable components. We'd love to see all types of blocks: applications, marketing, products, and more. See the [docs](/docs/blocks) page to get started. ## December 2024 - Monorepo Support Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add components using the CLI, but you had to manage where the components were installed and manually fix import paths. With the new monorepo support in the CLI, we've made it a lot easier to use shadcn/ui in a monorepo. The CLI now understands the monorepo structure and will install the components, dependencies and registry dependencies to the correct paths and handle imports for you. Read more in the [docs](/docs/monorepo). ## November 2024 - Icons An update on icons. The new-york style now uses Lucide as the default icon set. - New projects will use Lucide by default - No breaking changes for existing projects - Use the CLI to (optionally) migrate primitives to Lucide For more info on why we're doing this, see the [thread](https://x.com/shadcn/status/1853902179041702169). ## October 2024 - React 19 shadcn/ui is now compatible with React 19 and Next.js 15. We published a guide to help you upgrade your project to React 19. Read more [here](/docs/react-19). ## October 2024 - Sidebar Introducing sidebar.tsx: 25 components to help you build all kinds of sidebars. I don't like building sidebars. So I built 30+ of them. All types. Then simplified the core into sidebar.tsx: a strong foundation to build on top of. It works with Next.js, Remix, Vite & Laravel. See the announcement [here](https://x.com/shadcn/status/1847359896557408461). ## August 2024 - npx shadcn init The new CLI is now available. It's a complete rewrite with a lot of new features and improvements. You can now install components, themes, hooks, utils and more using `npx shadcn add`. This is a major step towards distributing code that you and your LLMs can access and use. 1. First up, the cli now has support for all major React framework out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding. 2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we'll update your tailwind.config.ts file accordingly. 3. You can also install remote components using url. `npx shadcn add https://acme.com/registry/navbar.json`. 4. We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`. 5. We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components. 6. And a few more updates like better error handling and monorepo support. You can try the new cli today. ```bash npx shadcn init sidebar-01 login-01 ``` ### Update Your Project To update an existing project to use the new CLI, update your `components.json` file to include import aliases for your **components**, **utils**, **ui**, **lib** and **hooks**. ```json showLineNumbers {7-13} title="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "tailwind": { // ... }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" } } ``` If you're using a different import alias prefix eg `~`, replace `@` with your prefix. ## April 2024 - Introducing Lift Mode We're introducing a new mode for [Blocks](/blocks) called **Lift Mode**. Enable Lift Mode to automatically "lift" smaller components from a block template for copy and paste. Lift Mode Lift Mode View the blocks library With Lift Mode, you'll be able to copy the smaller components that make up a block template, like cards, buttons, and forms, and paste them directly into your project. Visit the [Blocks](/blocks) page to try it out. ## March 2024 - Introducing Blocks One of the most requested features since launch has been layouts: admin dashboards with sidebar, marketing page sections, cards and more. **Today, we're launching [**Blocks**](/blocks)**. Admin dashboard Admin dashboard View the blocks library Blocks are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn/ui. We're starting with dashboard layouts and authentication pages, with plans to add more blocks in the coming weeks. ### Open Source Blocks are open source. You can find the source on GitHub. Use them in your projects, customize them and contribute back. AI Playground AI Playground View the blocks library ### Request a Block We're also introducing a "Request a Block" feature. If there's a specific block you'd like to see, simply create a request on GitHub and the community can upvote and build it. Settings Page Settings Page View the blocks library ### v0 If you have a [v0](https://v0.dev) account, you can use the **Edit in v0** feature to open the code on v0 for prompting and further generation.
That's it. _Looking forward to seeing what you build with Blocks_. ## March 2024 - Breadcrumb and Input OTP We've added a new Breadcrumb component and an Input OTP component. ### Breadcrumb An accessible and flexible breadcrumb component. It has support for collapsed items, custom separators, bring-your-own routing `` and composable with other shadcn/ui components. [See more examples](/docs/components/breadcrumb) ### Input OTP A fully featured input OTP component. It has support for numeric and alphanumeric codes, custom length, copy-paste and accessible. Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz). [Read the docs](/docs/components/input-otp) If you have a [v0](https://v0.dev), the new components are available for generation. ## December 2023 - New components, CLI and more We've added new components to shadcn/ui and made a lot of improvements to the CLI. Here's a quick overview of what's new: - [**Carousel**](#carousel) - A carousel component with motion, swipe gestures and keyboard support. - [**Drawer**](#drawer) - A drawer component that looks amazing on mobile. - [**Pagination**](#pagination) - A pagination component with page navigation, previous and next buttons. - [**Resizable**](#resizable) - A resizable component for building resizable panel groups and layouts. - [**Sonner**](#sonner) - The last toast component you'll ever need. - [**CLI updates**](#cli-updates) - Support for custom **Tailwind prefix** and `tailwind.config.ts`. ### Carousel We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of [Embla Carousel](https://www.embla-carousel.com). It has support for infinite looping, autoplay, vertical orientation, and more. ### Drawer Oh the drawer component 😍. Built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski\_](https://twitter.com/emilkowalski_). Try opening the following drawer on mobile. It looks amazing! ### Pagination We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's `` component. ### Resizable Build resizable panel groups and layouts with this `` component. `` is built using [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn). It has support for mouse, touch and keyboard. ### Sonner Another one by [emilkowalski\_](https://twitter.com/emilkowalski_). The last toast component you'll ever need. Sonner is now availabe in shadcn/ui. ### CLI updates This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components. This means you can now easily add shadcn/ui components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict. 🔥 ```tsx /tw-/ ``` It works with `cn`, `cva` and CSS variables. The cli can now also detect `tailwind.config.ts` and add the TypeScript version of the config for you. That's it. Happy Holidays. ## July 2023 - JavaScript This project and the components are written in TypeScript. **We recommend using TypeScript for your project as well**. However we provide a JavaScript version of the components, available via the [cli](/docs/cli). ```txt Would you like to use TypeScript (recommended)? no ``` To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. ```json {10} title="components.json" showLineNumbers { "style": "default", "tailwind": { "config": "tailwind.config.js", "css": "src/app/globals.css", "baseColor": "zinc", "cssVariables": true }, "rsc": false, "tsx": false, "aliases": { "utils": "~/lib/utils", "components": "~/components" } } ``` To configure import aliases, you can use the following `jsconfig.json`: ```json {4} title="jsconfig.json" showLineNumbers { "compilerOptions": { "paths": { "@/*": ["./*"] } } } ``` ## June 2023 - New CLI, Styles and more I have a lot of updates to share with you today: - [**New CLI**](#new-cli) - Rewrote the CLI from scratch. You can now add components, dependencies and configure import paths. - [**Theming**](#theming-with-css-variables-or-tailwind-colors) - Choose between using CSS variables or Tailwind CSS utility classes for theming. - [**Base color**](#base-color) - Configure the base color for your project. This will be used to generate the default color palette for your components. - [**React Server Components**](#react-server-components) - Opt out of using React Server Components. The CLI will automatically append or remove the `use client` directive. - [**Styles**](#styles) - Introducing a new concept called _Style_. A style comes with its own set of components, animations, icons and more. - [**Exit animations**](#exit-animations) - Added exit animations to all components. - [**Other updates**](#other-updates) - New `icon` button size, updated `sheet` component and more. - [**Updating your project**](#updating-your-project) - How to update your project to get the latest changes. --- ### New CLI I've been working on a new CLI for the past few weeks. It's a complete rewrite. It comes with a lot of new features and improvements. ### `init` ```bash npx shadcn@latest init ``` When you run the `init` command, you will be asked a few questions to configure `components.json`: ```txt showLineNumbers Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › app/globals.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils Are you using React Server Components? › no / yes ``` This file contains all the information about your components: where to install them, the import paths, how they are styled...etc. You can use this file to change the import path of a component, set a baseColor or change the styling method. ```json title="components.json" showLineNumbers { "style": "default", "tailwind": { "config": "tailwind.config.ts", "css": "src/app/globals.css", "baseColor": "zinc", "cssVariables": true }, "rsc": false, "aliases": { "utils": "~/lib/utils", "components": "~/components" } } ``` This means you can now use the CLI with any directory structure including `src` and `app` directories. ### `add` ```bash npx shadcn@latest add ``` The `add` command is now much more capable. You can now add UI components but also import more complex components (coming soon). The CLI will automatically resolve all components and dependencies, format them based on your custom config and add them to your project. ### `diff` (experimental) ```bash npx shadcn diff ``` We're also introducing a new `diff` command to help you keep track of upstream updates. You can use this command to see what has changed in the upstream repository and update your project accordingly. Run the `diff` command to get a list of components that have updates available: ```bash npx shadcn diff ``` ```txt The following components have updates available: - button - /path/to/my-app/components/ui/button.tsx - toast - /path/to/my-app/components/ui/use-toast.ts - /path/to/my-app/components/ui/toaster.tsx ``` Then run `diff [component]` to see the changes: ```bash npx shadcn diff alert ``` ```diff /pl-12/ const alertVariants = cva( - "relative w-full rounded-lg border", + "relative w-full pl-12 rounded-lg border" ) ``` --- ### Theming with CSS Variables or Tailwind Colors You can choose between using CSS variables or Tailwind CSS utility classes for theming. When you add new components, the CLI will automatically use the correct theming methods based on your `components.json` configuration. #### Utility classes ```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
``` To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file. ```json {6} title="components.json" showLineNumbers { "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": false } } ``` #### CSS Variables ```tsx /bg-background/ /text-foreground/
``` To use CSS variables classes for theming set `tailwind.cssVariables` to `true` in your `components.json` file. ```json {6} title="components.json" showLineNumbers { "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true } } ``` --- ### Base color You can now configure the base color for your project. This will be used to generate the default color palette for your components. ```json {5} title="components.json" showLineNumbers { "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "zinc", "cssVariables": false } } ``` Choose between `gray`, `neutral`, `slate`, `stone` or `zinc`. If you have `cssVariables` set to `true`, we will set the base colors as CSS variables in your `globals.css` file. If you have `cssVariables` set to `false`, we will inline the Tailwind CSS utility classes in your components. --- ### React Server Components If you're using a framework that does not support React Server Components, you can now opt out by setting `rsc` to `false`. We will automatically append or remove the `use client` directive when adding components. ```json title="components.json" showLineNumbers { "rsc": false } ``` --- ### Styles We are introducing a new concept called _Style_. _You can think of style as the visual foundation: shapes, icons, animations & typography._ A style comes with its own set of components, animations, icons and more. We are shipping two styles: `default` and `new-york` (with more coming soon). Default vs New York style The `default` style is the one you are used to. It's the one we've been using since the beginning of this project. It uses `lucide-react` for icons and `tailwindcss-animate` for animations. The `new-york` style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from [Radix Icons](https://icons.radix-ui.com). When you run the `init` command, you will be asked which style you would like to use. This is saved in your `components.json` file. ```json title="components.json" showLineNumbers { "style": "new-york" } ``` ### Theming Start with a style as the base then theme using CSS variables or Tailwind CSS utility classes to completely change the look of your components. Style with theming --- ### Exit animations I added exit animations to all components. Click on the combobox below to see the subtle exit animation. The animations can be customized using utility classes. --- ### Other updates ### Button - Added a new button size `icon`: ### Sheet - Renamed `position` to `side` to match the other elements. - Removed the `size` props. Use `className="w-[200px] md:w-[450px]"` for responsive sizing. --- ### Updating your project Since we follow a copy and paste approach, you will need to manually update your project to get the latest changes. Note: we are working on a [`diff`](#diff-experimental) command to help you keep track of upstream updates. ### Add `components.json` Creating a `components.json` file at the root: ```json title="components.json" showLineNumbers { "style": "default", "rsc": true, "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils" } } ``` Update the values for `tailwind.css` and `aliases` to match your project structure. ### Button Add the `icon` size to the `buttonVariants`: ```tsx {7} title="components/ui/button.tsx" showLineNumbers const buttonVariants = cva({ variants: { size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, }) ``` ### Sheet 1. Replace the content of `sheet.tsx` with the following: ```tsx title="components/ui/sheet.tsx" showLineNumbers "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = ({ className, ...props }: SheetPrimitive.DialogPortalProps) => ( ) SheetPortal.displayName = SheetPrimitive.Portal.displayName const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, } ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ side = "right", className, children, ...props }, ref) => ( {children} Close )) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } ``` 2. Rename `position` to `side` ```diff /position/ /side/ - + ``` ### Thank you I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏 ================================================ FILE: apps/v4/content/docs/(root)/cli.mdx ================================================ --- title: shadcn description: 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. ```bash npx shadcn@latest init ``` ### Options ```bash Usage: shadcn init [options] [components...] initialize your project and install dependencies Arguments: components name, url or local path to component Options: -t, --template