{
setConfig({
...config,
diff --git a/apps/www/components/code-tabs.tsx b/apps/www/components/code-tabs.tsx
new file mode 100644
index 0000000000..79655cf519
--- /dev/null
+++ b/apps/www/components/code-tabs.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { Tabs } from "@/registry/default/ui/tabs"
+
+export function CodeTabs({ children }: React.ComponentProps) {
+ const [config, setConfig] = useConfig()
+
+ const installationType = React.useMemo(() => {
+ return config.installationType || "cli"
+ }, [config])
+
+ return (
+
+ setConfig({ ...config, installationType: value as "cli" | "manual" })
+ }
+ className="relative mt-6 w-full"
+ >
+ {children}
+
+ )
+}
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 680ae3ce7f..e99d6ebfbe 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -13,6 +13,7 @@ import { useConfig } from "@/hooks/use-config"
import { Callout } from "@/components/callout"
import { CodeBlockCommand } from "@/components/code-block-command"
import { CodeBlockWrapper } from "@/components/code-block-wrapper"
+import { CodeTabs } from "@/components/code-tabs"
import { ComponentExample } from "@/components/component-example"
import { ComponentPreview } from "@/components/component-preview"
import { ComponentSource } from "@/components/component-source"
@@ -245,6 +246,7 @@ const components = {
CodeBlockWrapper: ({ ...props }) => (
),
+ CodeTabs,
Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
+
CLI
@@ -78,7 +78,7 @@ module.exports = {
-
+
## Usage
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index cfcf4c95e5..187528f0b3 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -16,7 +16,7 @@ links:
## Installation
-
+
CLI
@@ -50,7 +50,7 @@ npm install @radix-ui/react-alert-dialog
-
+
## Usage
diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
index 7d32e75b2e..ad40fa8de1 100644
--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -12,7 +12,7 @@ component: true
## Installation
-
+
CLI
@@ -40,7 +40,7 @@ npx shadcn@latest add alert
-
+
## Usage
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 5b9fc79eff..7698a1f070 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-aspect-ratio
-
+
## Usage
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index 454a31fb33..7e801e97a2 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-avatar
-
+
## Usage
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index 2053be1200..a8f7be69d6 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -12,7 +12,7 @@ component: true
## Installation
-
+
CLI
@@ -40,7 +40,7 @@ npx shadcn@latest add badge
-
+
## Usage
diff --git a/apps/www/content/docs/components/breadcrumb.mdx b/apps/www/content/docs/components/breadcrumb.mdx
index 90abd33b65..84a791ba86 100644
--- a/apps/www/content/docs/components/breadcrumb.mdx
+++ b/apps/www/content/docs/components/breadcrumb.mdx
@@ -12,7 +12,7 @@ component: true
## Installation
-
+
CLI
@@ -40,7 +40,7 @@ npx shadcn@latest add breadcrumb
-
+
## Usage
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index f0a487364a..4d3b617406 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -9,7 +9,7 @@ component: true
## Installation
-
+
CLI
@@ -43,7 +43,7 @@ npm install @radix-ui/react-slot
-
+
## Usage
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index 867dbd0eaf..49a1157ec3 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -18,7 +18,7 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
## Installation
-
+
CLI
@@ -56,7 +56,7 @@ The `Calendar` component uses the `Button` component. Make sure you have it inst
-
+
## Usage
diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx
index 63036867c4..fa1d7b85cd 100644
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -8,7 +8,7 @@ component: true
## Installation
-
+
CLI
@@ -36,7 +36,7 @@ npx shadcn@latest add card
-
+
## Usage
diff --git a/apps/www/content/docs/components/carousel.mdx b/apps/www/content/docs/components/carousel.mdx
index ebda81c552..f2ca47d253 100644
--- a/apps/www/content/docs/components/carousel.mdx
+++ b/apps/www/content/docs/components/carousel.mdx
@@ -19,7 +19,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
## Installation
-
+
CLI
@@ -54,7 +54,7 @@ npm install embla-carousel-react
-
+
## Usage
diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx
index 9566275e48..2a228e7467 100644
--- a/apps/www/content/docs/components/chart.mdx
+++ b/apps/www/content/docs/components/chart.mdx
@@ -57,7 +57,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
-
+
CLI
@@ -139,7 +139,7 @@ npm install recharts
-
+
## Your First Chart
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index dd52022fb1..77c3882fbc 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-checkbox
-
+
## Usage
diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx
index 6f9bfce731..5e43081661 100644
--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-collapsible
-
+
## Usage
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index f5bcc6737c..ec38d6005d 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -19,7 +19,7 @@ The `
` component uses the [`cmdk`](https://cmdk.paco.me) component by
## Installation
-
+
CLI
@@ -53,7 +53,7 @@ npm install cmdk
-
+
## Usage
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
index 2a0f1b789a..ed720a383b 100644
--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-context-menu
-
+
## Usage
diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
index 85df8727f0..f3fd2522cf 100644
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dialog
-
+
## Usage
diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
index 445a8ced4a..5691c660e4 100644
--- a/apps/www/content/docs/components/drawer.mdx
+++ b/apps/www/content/docs/components/drawer.mdx
@@ -14,7 +14,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install vaul
-
+
## Usage
diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
index 754feca561..a6e19622d9 100644
--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dropdown-menu
-
+
## Usage
diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx
index 0582b7eee8..87756d55a4 100644
--- a/apps/www/content/docs/components/form.mdx
+++ b/apps/www/content/docs/components/form.mdx
@@ -75,7 +75,7 @@ const form = useForm()
## Installation
-
+
CLI
@@ -115,7 +115,7 @@ npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform
-
+
## Usage
diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx
index 152d26b82c..b87b5cc164 100644
--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-hover-card
-
+
## Usage
diff --git a/apps/www/content/docs/components/input-otp.mdx b/apps/www/content/docs/components/input-otp.mdx
index fbc46fa4f4..99f147c187 100644
--- a/apps/www/content/docs/components/input-otp.mdx
+++ b/apps/www/content/docs/components/input-otp.mdx
@@ -14,7 +14,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-
## Installation
-
+
CLI
@@ -100,7 +100,7 @@ module.exports = {
-
+
## Usage
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
index 49d6ddf71c..70eef4b352 100644
--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -12,7 +12,7 @@ component: true
## Installation
-
+
CLI
@@ -40,7 +40,7 @@ npx shadcn@latest add input
-
+
## Usage
diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx
index 96d7888259..6b53c2a359 100644
--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-label
-
+
## Usage
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index f8df5e7b91..1590ccfe4c 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-menubar
-
+
## Usage
diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx
index 1c588100ad..25345dc1a3 100644
--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-navigation-menu
-
+
## Usage
diff --git a/apps/www/content/docs/components/pagination.mdx b/apps/www/content/docs/components/pagination.mdx
index d264dda773..9e564d7ae6 100644
--- a/apps/www/content/docs/components/pagination.mdx
+++ b/apps/www/content/docs/components/pagination.mdx
@@ -11,7 +11,7 @@ component: true
## Installation
-
+
CLI
@@ -39,7 +39,7 @@ npx shadcn@latest add pagination
-
+
## Usage
diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
index 13f9f37597..ee7604d2db 100644
--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-popover
-
+
## Usage
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index bc60ee031f..28dc665771 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-progress
-
+
## Usage
diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx
index 68f7d2e9d8..edcef2f91e 100644
--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-radio-group
-
+
## Usage
diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx
index d3acfe4092..63d4a730c4 100644
--- a/apps/www/content/docs/components/resizable.mdx
+++ b/apps/www/content/docs/components/resizable.mdx
@@ -18,7 +18,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi
## Installation
-
+
CLI
@@ -52,7 +52,7 @@ npm install react-resizable-panels
-
+
## Usage
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 0206731e05..8484b4b6c9 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-scroll-area
-
+
## Usage
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
index b75c72cfae..d81504a7df 100644
--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -15,7 +15,7 @@ links:
## Installation
-
+
CLI
@@ -49,7 +49,7 @@ npm install @radix-ui/react-select
-
+
## Usage
diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
index 19a16af233..92a3f5bd0b 100644
--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -44,7 +44,7 @@ npm install @radix-ui/react-separator
-
+
## Usage
diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx
index 5a31cc1f4e..dee6570262 100644
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-dialog
-
+
### Usage
diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
index 5c32540d48..ed021118e9 100644
--- a/apps/www/content/docs/components/sidebar.mdx
+++ b/apps/www/content/docs/components/sidebar.mdx
@@ -30,7 +30,7 @@ Customizable.
## Installation
-
+
CLI
@@ -146,7 +146,7 @@ sidebar: {
-
+
## Structure
diff --git a/apps/www/content/docs/components/skeleton.mdx b/apps/www/content/docs/components/skeleton.mdx
index 321be87112..42429f581a 100644
--- a/apps/www/content/docs/components/skeleton.mdx
+++ b/apps/www/content/docs/components/skeleton.mdx
@@ -8,7 +8,7 @@ component: true
## Installation
-
+
CLI
@@ -36,7 +36,7 @@ npx shadcn@latest add skeleton
-
+
## Usage
diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx
index 2adebc829d..f68c7239db 100644
--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-slider
-
+
## Usage
diff --git a/apps/www/content/docs/components/sonner.mdx b/apps/www/content/docs/components/sonner.mdx
index 79bdcb5716..a3898bc6f6 100644
--- a/apps/www/content/docs/components/sonner.mdx
+++ b/apps/www/content/docs/components/sonner.mdx
@@ -14,7 +14,7 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal
## Installation
-
+
CLI
@@ -88,7 +88,7 @@ export default function RootLayout({ children }) {
-
+
## Usage
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index 26414944bb..9a751576c0 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-switch
-
+
## Usage
diff --git a/apps/www/content/docs/components/table.mdx b/apps/www/content/docs/components/table.mdx
index 7d516089b8..0c281351e9 100644
--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -8,7 +8,7 @@ component: true
## Installation
-
+
CLI
@@ -36,7 +36,7 @@ npx shadcn@latest add table
-
+
## Usage
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index 8a886d7749..83807abefb 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-tabs
-
+
## Usage
diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
index a63b8e62ce..58b0ebfb39 100644
--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -8,7 +8,7 @@ component: true
## Installation
-
+
CLI
@@ -36,7 +36,7 @@ npx shadcn@latest add textarea
-
+
## Usage
diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
index 87b6c45dec..0790c9b12a 100644
--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -97,7 +97,7 @@ export default function RootLayout({ children }) {
-
+
## Usage
diff --git a/apps/www/content/docs/components/toggle-group.mdx b/apps/www/content/docs/components/toggle-group.mdx
index dea014fb8d..53734afa85 100644
--- a/apps/www/content/docs/components/toggle-group.mdx
+++ b/apps/www/content/docs/components/toggle-group.mdx
@@ -14,7 +14,7 @@ links:
## Installation
-
+
CLI
@@ -48,7 +48,7 @@ npm install @radix-ui/react-toggle-group
-
+
## Usage
diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
index 132a597b98..56696b0fe8 100644
--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-toggle
-
+
## Usage
diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
index b88d5a9356..bce711b8c2 100644
--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -11,7 +11,7 @@ links:
## Installation
-
+
CLI
@@ -45,7 +45,7 @@ npm install @radix-ui/react-tooltip
-
+
## Usage
diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx
index 6f1e47db50..c001c63a0d 100644
--- a/apps/www/content/docs/installation/astro.mdx
+++ b/apps/www/content/docs/installation/astro.mdx
@@ -3,6 +3,12 @@ title: Astro
description: Install and configure Astro.
---
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
+
+
### Create project
diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx
index 9e6364b387..0a82656c06 100644
--- a/apps/www/content/docs/installation/gatsby.mdx
+++ b/apps/www/content/docs/installation/gatsby.mdx
@@ -3,6 +3,12 @@ title: Gatsby
description: Install and configure Gatsby.
---
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
+
+
### Create project
diff --git a/apps/www/content/docs/installation/laravel.mdx b/apps/www/content/docs/installation/laravel.mdx
index 18645c3181..ee2d6227d4 100644
--- a/apps/www/content/docs/installation/laravel.mdx
+++ b/apps/www/content/docs/installation/laravel.mdx
@@ -3,6 +3,12 @@ title: Laravel
description: Install and configure Laravel with Inertia
---
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
+
+
### Create project
diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx
index 4051e57e25..95b4596f16 100644
--- a/apps/www/content/docs/installation/next.mdx
+++ b/apps/www/content/docs/installation/next.mdx
@@ -3,10 +3,10 @@ title: Next.js
description: Install and configure Next.js.
---
-
-
-**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
-
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx
index a286dbf468..5b8d4bdabb 100644
--- a/apps/www/content/docs/installation/vite.mdx
+++ b/apps/www/content/docs/installation/vite.mdx
@@ -3,6 +3,12 @@ title: Vite
description: Install and configure Vite.
---
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
+
+
### Create project
diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx
index 660802ea1e..2109857faa 100644
--- a/apps/www/content/docs/react-19.mdx
+++ b/apps/www/content/docs/react-19.mdx
@@ -3,6 +3,12 @@ title: Next.js 15 + React 19
description: Using shadcn/ui with Next.js 15 and React 19.
---
+
+ **Update:** We have added full support for React 19 and Tailwind v3 in the
+ `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+ information.
+
+
**The following guide applies to any framework that supports React 19**. I
titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
diff --git a/apps/www/content/docs/tailwind-v4.mdx b/apps/www/content/docs/tailwind-v4.mdx
new file mode 100644
index 0000000000..ad4f3b9062
--- /dev/null
+++ b/apps/www/content/docs/tailwind-v4.mdx
@@ -0,0 +1,296 @@
+---
+title: An update on Tailwind v4
+description: How do use shadcn/ui with Tailwind v4.
+---
+
+It’s here! Tailwind v4 and React 19. Ready for you to try out. It's available in the `canary` release of the CLI. You can start using it today.
+
+## TLDR
+
+If you're starting a new project with Tailwind v4 and React 19, use the `canary` version of the command-line:
+
+```bash
+npx shadcn@canary init
+```
+
+## What's New
+
+- The CLI (`canary`) 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`.
+
+**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.**
+
+## What's Coming Next
+
+The following is still being worked on. I'll post updates soon.
+
+- Migrating colors to OKLCH.
+- Fix and improve animations.
+
+## See it Live
+
+I put together a demo with all the updated components here: https://v4.shadcn.com
+
+Take a look and test the components. If you find any bugs, leave a comment on the [GitHub issue](https://github.com/shadcn-ui/ui/issues/6585).
+
+- The code for the app is here: https://github.com/shadcn-ui/ui/tree/main/apps/v4
+- The v4 components can be found here: https://github.com/shadcn-ui/ui/tree/main/apps/v4/registry/new-york-v4/ui
+
+## Try It Out
+
+You can test Tailwind v4 + React 19 today using the `canary` release of the CLI.
+
+```bash
+pnpm dlx shadcn@canary init
+```
+
+I'm still working on the docs, but here's a quick guide to testing new projects:
+
+### Next.js
+
+1. Start a new project with Tailwind v4 and React 19:
+
+```bash
+pnpm create next-app@canary --tailwind --eslint --typescript --app --no-src-dir
+```
+
+2. Init shadcn/ui. This will create your `components.json` and set up your CSS variables:
+
+```bash
+pnpm dlx shadcn@canary init
+```
+
+3. You should now be able to add components:
+
+```bash
+pnpm dlx shadcn@canary add button
+```
+
+### Vite
+
+1. Create a new project with React 19:
+
+```bash
+pnpm create vite --template=react-ts
+```
+
+2. Follow the official guide to add Tailwind CSS: https://tailwindcss.com/docs/installation/using-vite
+
+3. Add path aliases to `tsconfig.json`:
+
+```json title="tsconfig.json" showLineNumbers
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
+```
+
+4. Add path aliases to `tsconfig.app.json`:
+
+```json title="tsconfig.app.json" showLineNumbers
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
+```
+
+5. Install `@types/node`:
+
+```bash
+pnpm add -D @types/node
+```
+
+6. Add resolve alias config to `vite.config.ts`:
+
+```ts title="vite.config.ts" showLineNumbers
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+})
+```
+
+7. Init `shadcn/ui`. This will create your `components.json` and set up your CSS variables:
+
+```bash
+pnpm dlx shadcn@canary init
+```
+
+8. You should now be able to add components:
+
+```bash
+pnpm dlx shadcn@canary add button
+```
+
+(Note: If you need help with other frameworks, drop a comment below. I'll update the guide)
+
+## Upgrade Your Project
+
+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 `preset-19` codemod to migrate your `forwardRef` to props or manually update the primitives.
+
+For the codemod, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#typescript-changes.
+
+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 (
+
+ )
+}
+```
+
+## Share Your Feedback
+
+We’d love for you to test these updates and share your feedback! If you run into anything weird or have suggestions, add a comment below.
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 982e9ba0e0..e86324b3c6 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -9,6 +9,7 @@ type Config = {
theme: BaseColor["name"]
radius: number
packageManager: "npm" | "yarn" | "pnpm" | "bun"
+ installationType: "cli" | "manual"
}
const configAtom = atomWithStorage("config", {
@@ -16,6 +17,7 @@ const configAtom = atomWithStorage("config", {
theme: "zinc",
radius: 0.5,
packageManager: "pnpm",
+ installationType: "cli",
})
export function useConfig() {