feat: add shadcn eject (#10834)

apps/v4/content/docs/(root)/cli.mdx

@@ -3,6 +3,8 @@ title: shadcn
 description: Use the shadcn CLI to add components to your project.
 ---
 
+import { TriangleAlertIcon } from "lucide-react"
+
 ## init
 
 Use the `init` command to initialize configuration and dependencies for an existing project, or create a new project with `--name`.
@@ -503,3 +505,87 @@ npx shadcn@latest migrate radix "src/components/ui/**"
 If no path is provided, the migration will transform all files in your `ui` directory (from `components.json`).
 
 Once complete, you can remove any unused `@radix-ui/react-*` packages from your `package.json`.
+
+---
+
+## eject
+
+When you run `init`, shadcn adds `@import "shadcn/tailwind.css"` to your global CSS file. This import provides shared Tailwind v4 utilities such as custom variants (`data-open:`, `data-closed:`, etc.) and accordion animations.
+
+Use the `eject` command to inline `shadcn/tailwind.css` into your global CSS file and remove the `shadcn` dependency from your project.
+
+<Callout icon={<TriangleAlertIcon />}>
+  **Note: This action is irreversible.** After ejecting, future shadcn CLI
+  updates to `shadcn/tailwind.css` will not apply automatically.
+</Callout>
+
+```bash
+npx shadcn@latest eject
+```
+
+**Before**
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+```
+
+**After**
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+/* ejected from shadcn@4.8.3 */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+}
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+```
+
+**Monorepo**
+
+In a monorepo, run the command from the workspace that contains your `components.json` and global CSS file:
+
+```bash
+npx shadcn@latest eject -c packages/ui
+```
+
+**Options**
+
+```bash
+Usage: shadcn eject [options]
+
+inline shadcn/tailwind.css and remove the shadcn dependency
+
+Options:
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -y, --yes        skip confirmation prompt. (default: false)
+  -s, --silent     mute output. (default: false)
+  -h, --help       display help for command
+```

apps/v4/content/docs/changelog/2026-05-shadcn-eject.mdx

@@ -0,0 +1,61 @@
+---
+title: May 2026 - shadcn eject
+description: Inline shadcn/tailwind.css and remove the shadcn dependency.
+date: 2026-05-31
+---
+
+When we added support for both Radix and Base UI, we needed a place for shared Tailwind utilities that both libraries depend on, e.g. custom variants like `data-open:` and `data-closed:` and utilities like `no-scrollbar`.
+
+We also ran into a few bugs while working on RTL support that were easier to fix in one shared place rather than duplicating across every component.
+
+So we created `shadcn/tailwind.css`. When you run `init`, it adds `@import "shadcn/tailwind.css"` to your global CSS file. It works just like other CSS imports such as `tw-animate-css`: a small dependency that is tree-shaken in production and resolved at build time.
+
+If you prefer not to depend on the `shadcn` package for that CSS, we've added the `shadcn eject` command. It inlines `shadcn/tailwind.css` into your global CSS file and removes the `shadcn` dependency from your project.
+
+```bash
+npx shadcn@latest eject
+```
+
+**Before**
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+```
+
+**After**
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+/* ejected from shadcn@4.8.3 */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+}
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+```
+
+In a monorepo, run the command from the workspace that contains your `components.json` and global CSS file:
+
+```bash
+npx shadcn@latest eject -c packages/ui
+```
+
+See the [CLI documentation](/docs/cli#eject) for more details.