Merge branch 'main' of github.com:shadcn-ui/ui

2026-07-09 06:55:07 +00:00 · 2025-02-10 12:00:15 +04:00
parent 34c99c1728 86642840e2
commit 1a68715048
60 changed files with 470 additions and 104 deletions
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -4,11 +4,20 @@ import { ArrowRight } from "lucide-react"
 export function Announcement() {
  return (
    <Link
-      href="/docs/blocks"
-      className="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
+      href="/docs/tailwind-v4"
+      className="group mb-2 inline-flex items-center gap-2 px-0.5 text-sm font-medium"
    >
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+      >
+        <title>Tailwind CSS</title>
+        <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
+      </svg>
      <span className="underline-offset-4 group-hover:underline">
-        Blocks are open for contributions
+        An update on Tailwind v4
      </span>
      <ArrowRight className="ml-1 h-4 w-4" />
    </Link>
--- a/apps/www/components/code-block-command.tsx
+++ b/apps/www/components/code-block-command.tsx
@@ -56,7 +56,7 @@ export function CodeBlockCommand({
  return (
    <div className="relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900">
      <Tabs
-        defaultValue={packageManager}
+        value={packageManager}
        onValueChange={(value) => {
          setConfig({
            ...config,
--- a/apps/www/components/code-tabs.tsx
+++ 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<typeof Tabs>) {
+  const [config, setConfig] = useConfig()
+
+  const installationType = React.useMemo(() => {
+    return config.installationType || "cli"
+  }, [config])
+
+  return (
+    <Tabs
+      value={installationType}
+      onValueChange={(value) =>
+        setConfig({ ...config, installationType: value as "cli" | "manual" })
+      }
+      className="relative mt-6 w-full"
+    >
+      {children}
+    </Tabs>
+  )
+}
--- 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 }) => (
    <CodeBlockWrapper className="rounded-md border" {...props} />
  ),
+  CodeTabs,
  Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
    <h3
      className={cn(
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -78,9 +78,10 @@ export const docsConfig: DocsConfig = {
          label: "New",
        },
        {
-          title: "Next.js 15 + React 19",
-          href: "/docs/react-19",
+          title: "Tailwind v4",
+          href: "/docs/tailwind-v4",
          items: [],
+          label: "New",
        },
        {
          title: "Typography",
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -78,7 +78,7 @@ module.exports = {

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -16,7 +16,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -50,7 +50,7 @@ npm install @radix-ui/react-alert-dialog

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -12,7 +12,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add alert

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-aspect-ratio

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-avatar

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -12,7 +12,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add badge

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/breadcrumb.mdx
+++ b/apps/www/content/docs/components/breadcrumb.mdx
@@ -12,7 +12,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add breadcrumb

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -9,7 +9,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -43,7 +43,7 @@ npm install @radix-ui/react-slot

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -56,7 +56,7 @@ The `Calendar` component uses the `Button` component. Make sure you have it inst

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -8,7 +8,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add card

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -54,7 +54,7 @@ npm install embla-carousel-react

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

 </Callout>

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -139,7 +139,7 @@ npm install recharts

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Your First Chart

--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-checkbox

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-collapsible

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -19,7 +19,7 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -53,7 +53,7 @@ npm install cmdk

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-context-menu

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dialog

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install vaul

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dropdown-menu

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/form.mdx
+++ b/apps/www/content/docs/components/form.mdx
@@ -75,7 +75,7 @@ const form = useForm()

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -115,7 +115,7 @@ npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-hover-card

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -100,7 +100,7 @@ module.exports = {

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -12,7 +12,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add input

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-label

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-menubar

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-navigation-menu

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/pagination.mdx
+++ b/apps/www/content/docs/components/pagination.mdx
@@ -11,7 +11,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -39,7 +39,7 @@ npx shadcn@latest add pagination

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-popover

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-progress

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-radio-group

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -52,7 +52,7 @@ npm install react-resizable-panels

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-scroll-area

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -15,7 +15,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-select

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -44,7 +44,7 @@ npm install @radix-ui/react-separator

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-dialog

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ### Usage

--- a/apps/www/content/docs/components/sidebar.mdx
+++ b/apps/www/content/docs/components/sidebar.mdx
@@ -30,7 +30,7 @@ Customizable.

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -146,7 +146,7 @@ sidebar: {

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Structure

--- a/apps/www/content/docs/components/skeleton.mdx
+++ b/apps/www/content/docs/components/skeleton.mdx
@@ -8,7 +8,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add skeleton

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-slider

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -88,7 +88,7 @@ export default function RootLayout({ children }) {

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-switch

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -8,7 +8,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add table

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-tabs

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -8,7 +8,7 @@ component: true

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add textarea

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -97,7 +97,7 @@ export default function RootLayout({ children }) {

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/toggle-group.mdx
+++ b/apps/www/content/docs/components/toggle-group.mdx
@@ -14,7 +14,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-toggle-group

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-toggle

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -11,7 +11,7 @@ links:

 ## Installation

-<Tabs defaultValue="cli">
+<CodeTabs>

 <TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-tooltip

 </TabsContent>

-</Tabs>
+</CodeTabs>

 ## Usage

--- 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.
 ---

+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
+</Callout>
+
 <Steps>

 ### Create project
--- 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.
 ---

+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
+</Callout>
+
 <Steps>

 ### Create project
--- 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
 ---

+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
+</Callout>
+
 <Steps>

 ### Create project
--- 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.
 ---

-<Callout>
-
-**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
-
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
 </Callout>

 <Steps>
--- 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.
 ---

+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
+</Callout>
+
 <Steps>

 ### Create project
--- 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.
 ---

+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **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.
+</Callout>
+
 <Callout>
  **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
--- a/apps/www/content/docs/tailwind-v4.mdx
+++ 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<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b last:border-b-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+```
+
+#### After
+
+```tsx showLineNumbers
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+```
+
+## 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.
--- 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>("config", {
@@ -16,6 +17,7 @@ const configAtom = atomWithStorage<Config>("config", {
  theme: "zinc",
  radius: 0.5,
  packageManager: "pnpm",
+  installationType: "cli",
 })

 export function useConfig() {