-}
-```
-
-```tsx title="Button.tsx"
-export default function Button({ children }: { children: React.ReactNode }) {
- return
-}
-```
-
-This is a code block with a title.
-
-## Line Numbers and Line Highlighting
-
-Draw attention to a particular line of code.
-
-```tsx {4} showLineNumbers
-import { useFloating } from "@floating-ui/react"
-
-function MyComponent() {
- const { refs, floatingStyles } = useFloating()
-
- return (
- <>
-
-
-
- )
-}
-```
-
-## Word Highlighting
-
-Draw attention to a particular word or series of characters.
-
-```tsx /floatingStyles/
-import { useFloating } from "@floating-ui/react"
-
-function MyComponent() {
- const { refs, floatingStyles } = useFloating()
-
- return (
- <>
-
-
-
- )
-}
-```
-
-How
-
-```tsx title="apps/www/registry/registry-blocks.tsx"
-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"],
- },
-]
-```
-
-```txt
-apps
-βββ web # Your app goes here.
- βββ app
- β βββ page.tsx
- βββ components
- β βββ login-form.tsx
- βββ components.json
- βββ package.json
-packages
-βββ ui # Your components and dependencies are installed here.
- βββ src
- β βββ components
- β β βββ button.tsx
- β βββ hooks
- β βββ lib
- β β βββ utils.ts
- β βββ styles
- β βββ globals.css
- βββ components.json
- βββ package.json
-package.json
-turbo.json
-```
-
-```diff showLineNumbers
-- @plugin 'tailwindcss-animate';
-+ @import "tw-animate-css";
-```
-
-## CSS Variables
-
-```tsx /bg-background/ /text-foreground/
-
-```
-
-To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
-
-```json {8} title="components.json"
-{
- "style": "default",
- "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"
-}
-```
-
-## 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 {8} title="components.json"
-{
- "style": "default",
- "rsc": true,
- "tailwind": {
- "config": "",
- "css": "app/globals.css",
- "baseColor": "slate",
- "cssVariables": false
- },
- "aliases": {
- "components": "@/components",
- "utils": "@/lib/utils",
- "ui": "@/components/ui",
- "lib": "@/lib",
- "hooks": "@/hooks"
- },
- "iconLibrary": "lucide"
-}
-```
diff --git a/apps/v4/content/docs/(root)/tailwind-v4.mdx b/apps/v4/content/docs/(root)/tailwind-v4.mdx
deleted file mode 100644
index 75e7c008f9..0000000000
--- a/apps/v4/content/docs/(root)/tailwind-v4.mdx
+++ /dev/null
@@ -1,333 +0,0 @@
----
-title: Tailwind v4
-description: How to use shadcn/ui with Tailwind v4 and React 19.
----
-
-Itβs here! 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.
-
-**Note: this is non-breaking. Your existing apps with Tailwind v3 and React 18 will still work. When you add new components, they'll still be in v3 and React 18 until you upgrade. Only new projects start with Tailwind v4 and React 19.**
-
-## Try It Out
-
-You can test Tailwind v4 + React 19 today using the `canary` release of the CLI. See the framework specific guides below for how to get started.
-
-
-
-
-
Next.js
-
-
-
-
Vite
-
-
-
-
Laravel
-
-
-
-
React Router
-
-
-
-
Astro
-
-
-
-
TanStack Start
-
-
-
-
Gatsby
-
-
-
-
Manual
-
-
-
-## Upgrade Your Project
-
-
- **Important:** Before upgrading, please read the [Tailwind v4 Compatibility
- Docs](https://tailwindcss.com/docs/compatibility) and make sure your project
- is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and
- is designed for modern browsers.
-
-
-One of the major advantages of using `shadcn/ui` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.
-
-This means when a dependency has a new release, you can just follow the official upgrade paths.
-
-Here's how to upgrade your existing projects (full docs are on the way):
-
-### 1. Follow the Tailwind v4 Upgrade Guide
-
-- Upgrade to Tailwind v4 by following the official upgrade guide: https://tailwindcss.com/docs/upgrade-guide
-- Use the `@tailwindcss/upgrade@next` codemod to remove deprecated utility classes and update tailwind config.
-
-### 2. Update your CSS variables
-
-The codemod will migrate your CSS variables as references under the `@theme` directive.
-
-```css showLineNumbers
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 0 0% 3.9%;
- }
-}
-
-@theme {
- --color-background: hsl(var(--background));
- --color-foreground: hsl(var(--foreground));
-}
-```
-
-This works. But to make it easier to work with colors and other variables, we'll need to move the `hsl` wrappers and use `@theme inline`.
-
-Here's how you do it:
-
-1. Move `:root` and `.dark` out of the `@layer` base.
-2. Wrap the color values in `hsl()`
-3. Add the `inline` option to `@theme` i.e `@theme inline`
-4. Remove the `hsl()` wrappers from `@theme`
-
-```css showLineNumbers
-:root {
- --background: hsl(0 0% 100%); // <-- Wrap in hsl
- --foreground: hsl(0 0% 3.9%);
-}
-
-.dark {
- --background: hsl(0 0% 3.9%); // <-- Wrap in hsl
- --foreground: hsl(0 0% 98%);
-}
-
-@theme inline {
- --color-background: var(--background); // <-- Remove hsl
- --color-foreground: var(--foreground);
-}
-```
-
-This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.
-
-### 3. Update colors for charts
-
-Now that the theme colors come with `hsl()`, you can remove the wrapper in your `chartConfig`:
-
-```diff
-const chartConfig = {
- desktop: {
- label: "Desktop",
-- color: "hsl(var(--chart-1))",
-+ color: "var(--chart-1)",
- },
- mobile: {
- label: "Mobile",
-- color: "hsl(var(--chart-2))",
-+ color: "var(--chart-2)",
- },
-} satisfies ChartConfig
-```
-
-### 4. Use new `size-*` utility
-
-The new `size-*` utility (added in Tailwind v3.4), is now fully supported by `tailwind-merge`. You can replace `w-* h-*` with the new `size-*` utility:
-
-```diff
-- w-4 h-4
-+ size-4
-```
-
-### 5. Update your dependencies
-
-```bash
-pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest
-```
-
-### 6. Remove forwardRef
-
-You can use the `remove-forward-ref` codemod to migrate your `forwardRef` to props or manually update the primitives.
-
-For the codemod, see https://github.com/reactjs/react-codemod#remove-forward-ref.
-
-If you want to do it manually, here's how to do it step by step:
-
-1. Replace `React.forwardRef<...>` with `React.ComponentProps<...>`
-2. Remove `ref={ref}` from the component.
-3. Add a `data-slot` attribute. This will come in handy for styling with Tailwind.
-4. You can optionally convert to a named function and remove the `displayName`.
-
-#### Before
-
-```tsx showLineNumbers
-const AccordionItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-AccordionItem.displayName = "AccordionItem"
-```
-
-#### After
-
-```tsx showLineNumbers
-function AccordionItem({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-```
-
-## Changelog
-
-### March 19, 2025 - Deprecate `tailwindcss-animate`
-
-We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`.
-
-New project will have `tw-animate-css` installed by default.
-
-For existing projects, follow the steps below to migrate.
-
-1. Remove `tailwindcss-animate` from your dependencies.
-2. Remove the `@plugin 'tailwindcss-animate'` from your globals.css file.
-3. Install `tw-animate-css` as a dev dependency.
-4. Add the `@import "tw-animate-css"` to your globals.css file.
-
-```diff showLineNumbers
-- @plugin 'tailwindcss-animate';
-+ @import "tw-animate-css";
-```
-
-### March 12, 2025 - New Dark Mode Colors
-
-We've revisted the dark mode colors and updated them to be more accessible.
-
-If you're running an existing Tailwind v4 project (**not an upgraded one**[^1]), you can update your components to use the new dark mode colors by re-adding your components using the CLI[^2].
-
-
-
-Commit any changes
-
-**The CLI will overwrite your existing components.** We recommend committing any changes you've made to your components before running the CLI.
-
-```bash
-git add .
-git commit -m "..."
-```
-
-Update components
-
-```bash
-npx shadcn@latest add --all --overwrite
-```
-
-Update colors
-
-Update the dark mode colors in your `globals.css` file to new OKLCH colors. See the [Base Colors](/docs/theming#base-colors) reference for a list of colors.
-
-Review changes
-
-Review and re-apply any changes you made to your components.
-
-
-
-[^1]: Upgraded projects are not affected by this change. You can continue using the old dark mode colors.
-
-[^2]: Updating your components will overwrite your existing components.