fix

2026-06-12 10:21:39 +00:00 · 2025-10-15 11:10:00 +04:00
8372 changed files with 44350 additions and 371652 deletions
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,5 @@
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": ["v4", "tests"]
+  "ignore": ["www", "v4", "tests"]
 }
--- a/.changeset/fix-universal-registry-item-empty-files.md
+++ b/.changeset/fix-universal-registry-item-empty-files.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+Fix support for universal registry items that only have dependencies without files
--- a/.changeset/hot-feet-beam.md
+++ b/.changeset/hot-feet-beam.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+add support for color as var
--- a/.changeset/lazy-mails-wear.md
+++ b/.changeset/lazy-mails-wear.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix adding registry item with CSS at-property
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,12 +2,8 @@
  "permissions": {
    "allow": [
      "Bash(npm test:*)",
-      "Bash(npm run typecheck:*)",
-      "Bash(ls:*)",
-      "Bash(cat:*)",
-      "WebSearch",
-      "WebFetch(domain:github.com)"
+      "Bash(npm run typecheck:*)"
    ],
    "deny": []
  }
-}
+}
--- a/.github/changeset-version.js
+++ b/.github/changeset-version.js
@@ -1,12 +1,12 @@
 // ORIGINALLY FROM CLOUDFLARE WRANGLER:
 // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js

-import { execSync } from "child_process"
+import { exec } from "child_process"

 // This script is used by the `release.yml` workflow to update the version of the packages being released.
-// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
-// So we also run `pnpm install`, which does this update.
+// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
+// So we also run `npm install`, which does this update.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-execSync("npx changeset version", { stdio: "inherit" })
-execSync("pnpm install --lockfile-only", { stdio: "inherit" })
+exec("npx changeset version")
+exec("npm install")
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -4,43 +4,3 @@ updates:
    directory: "/"
    schedule:
      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/astro-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/astro-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/next-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/next-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/react-router-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/react-router-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/start-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/start-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/vite-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/vite-monorepo"
-    schedule:
-      interval: "weekly"
--- a/.github/workflows/code-check.yml
+++ b/.github/workflows/code-check.yml
@@ -77,9 +77,6 @@ jobs:
      - name: Install dependencies
        run: pnpm install

-      - name: Build packages
-        run: pnpm --filter=shadcn build
-
      - run: pnpm format:check

  tsc:
--- a/.github/workflows/deprecated.yml
+++ b/.github/workflows/deprecated.yml
@@ -1,14 +1,13 @@
 name: Deprecated

 on:
-  pull_request_target:
+  pull_request:
    types: [opened, synchronize]

 permissions:
  issues: write
  contents: read
  pull-requests: write
-
 jobs:
  deprecated:
    runs-on: ubuntu-latest
@@ -16,12 +15,11 @@ jobs:
      - name: Checkout PR
        uses: actions/checkout@v4
        with:
-          ref: ${{ github.event.pull_request.head.sha }}
          fetch-depth: 0

      - name: Get changed files
        id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@v44
        with:
          files: |
            apps/www/**
@@ -39,8 +37,7 @@ jobs:
            const changedFiles = `${{ steps.changed-files.outputs.all_changed_files }}`.split(' ');
            const wwwFiles = changedFiles.filter(file =>
              file.startsWith('apps/www/') &&
-              !file.startsWith('apps/www/public/r/') &&
-              file !== 'apps/www/package.json'
+              !file.startsWith('apps/www/public/r/')
            );

            if (wwwFiles.length > 0) {
--- a/.github/workflows/prerelease.yml
+++ b/.github/workflows/prerelease.yml
@@ -7,11 +7,6 @@ on:
    types: [labeled]
    branches:
      - main
-
-permissions:
-  id-token: write
-  contents: read
-
 jobs:
  prerelease:
    if: |
@@ -23,7 +18,7 @@ jobs:

    steps:
      - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
        with:
          fetch-depth: 0

@@ -32,22 +27,23 @@ jobs:
        with:
          version: 9.0.6

-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
        with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          node-version: 18
          cache: "pnpm"

-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
      - name: Install NPM Dependencies
        run: pnpm install

      - name: Modify package.json version
        run: node .github/version-script-beta.js

+      - name: Authenticate to NPM
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
+        env:
+          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+
      - name: Publish Beta to NPM
        run: pnpm pub:beta

--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -7,11 +7,6 @@ on:
    branches:
      - main

-permissions:
-  id-token: write
-  contents: write
-  pull-requests: write
-
 jobs:
  release:
    if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -28,16 +23,13 @@ jobs:
        with:
          version: 9.0.6

-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
        with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          version: 9.0.6
+          node-version: 18
          cache: "pnpm"

-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
      - name: Install NPM Dependencies
        run: pnpm install

@@ -57,4 +49,5 @@ jobs:
          publish: npx changeset publish
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
          NODE_ENV: "production"
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -19,7 +19,7 @@ jobs:
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
-          node-version: 22
+          node-version: 18

      - uses: pnpm/action-setup@v4
        name: Install pnpm
@@ -42,4 +42,7 @@ jobs:
      - name: Install dependencies
        run: pnpm install

+      - name: Build packages
+        run: pnpm build --filter=shadcn
+
      - run: pnpm test
--- a/.github/workflows/validate-registries.yml
+++ b/.github/workflows/validate-registries.yml
@@ -4,53 +4,13 @@ on:
  pull_request:
    paths:
      - "apps/v4/public/r/registries.json"
-      - "apps/v4/registry/directory.json"
  push:
    branches:
      - main
    paths:
      - "apps/v4/public/r/registries.json"
-      - "apps/v4/registry/directory.json"

 jobs:
-  check-registry-sync:
-    if: github.event_name == 'pull_request'
-    runs-on: ubuntu-latest
-    name: Check registry sync
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Check changed files
-        id: changed
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
-
-          DIRECTORY_CHANGED=false
-          REGISTRIES_CHANGED=false
-
-          if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
-            DIRECTORY_CHANGED=true
-          fi
-
-          if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
-            REGISTRIES_CHANGED=true
-          fi
-
-          echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
-          echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
-
-      - name: Flag missing registries.json update
-        if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
-          gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
-          exit 1
-
  validate:
    runs-on: ubuntu-latest
    name: pnpm validate:registries
@@ -87,5 +47,8 @@ jobs:
      - name: Install dependencies
        run: pnpm install

+      - name: Build packages
+        run: pnpm build --filter=shadcn
+
      - name: Validate registries
        run: pnpm --filter=v4 validate:registries
--- a/.gitignore
+++ b/.gitignore
@@ -39,7 +39,3 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
-
-.notes
-.playwright-mcp
-shadcn-workspace
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,5 @@ node_modules
 .next
 build
 .contentlayer
+apps/www/pages/api/registry.json
 **/fixtures
-deprecated
-apps/v4/registry/styles/**/*.css
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,11 +10,6 @@
    "**/fixtures/**"
  ],
  "files.exclude": {
-    "deprecated": true
-  },
-  "search.exclude": {
-    "apps/v4/registry/radix-*": true,
-    "apps/v4/public/r/*": true,
-    "packages/shadcn/test/fixtures/*": true
+    "apps/www": true
  }
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -20,25 +20,28 @@ This repository is structured as follows:

 ```
 apps
-└── v4
+└── www
    ├── app
    ├── components
    ├── content
    └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
            ├── example
            └── ui
 packages
-└── shadcn
+└── cli
 ```

-| Path                 | Description                              |
-| -------------------- | ---------------------------------------- |
-| `apps/v4/app`        | The Next.js application for the website. |
-| `apps/v4/components` | The React components for the website.    |
-| `apps/v4/content`    | The content for the website.             |
-| `apps/v4/registry`   | The registry for the components.         |
-| `packages/shadcn`    | The `shadcn` package.                    |
+| Path                  | Description                              |
+| --------------------- | ---------------------------------------- |
+| `apps/www/app`        | The Next.js application for the website. |
+| `apps/www/components` | The React components for the website.    |
+| `apps/www/content`    | The content for the website.             |
+| `apps/www/registry`   | The registry for the components.         |
+| `packages/cli`        | The `shadcn-ui` package.                 |

 ## Development

@@ -79,26 +82,32 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 1. To run the `ui.shadcn.com` website:

 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```

-2. To run the `shadcn` package:
+2. To run the `shadcn-ui` package:

 ```bash
-pnpm --filter=shadcn dev
+pnpm --filter=shadcn-ui dev
 ```

 ## Running the CLI Locally

 To run the CLI locally, you can follow the workflow:

-1. Start by running the dev server:
+1. Start by running the registry (main site) to make sure the components are up to date:

   ```bash
-   pnpm dev
+   pnpm v4:dev
   ```

-2. In another terminal tab, test the CLI by running:
+2. Run the development script for the CLI:
+
+   ```bash
+   pnpm shadcn:dev
+   ```
+
+3. In another terminal tab, test the CLI by running:

   ```bash
   pnpm shadcn
@@ -110,27 +119,36 @@ To run the CLI locally, you can follow the workflow:
   pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
   ```

+4. To run the tests for the CLI:
+
+   ```bash
+   pnpm --filter=shadcn test
+   ```
+
 This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.

 ## Documentation

-The documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:
+The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:

 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```

-Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
+Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.

 ## Components

-We use a registry system for developing components. You can find the source code for the components under `apps/v4/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.

 ```bash
 apps
-└── v4
+└── www
    └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
            ├── example
            └── ui
 ```
@@ -139,7 +157,7 @@ When adding or modifying components, please ensure that:

 1. You make the changes for every style.
 2. You update the documentation.
-3. You run `pnpm registry:build` to update the registry.
+3. You run `pnpm build:registry` to update the registry.

 ## Commit Convention

@@ -178,9 +196,9 @@ If you have a request for a new component, please open a discussion on GitHub. W

 ## CLI

-The `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
+The `shadcn-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).

-Any changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.
+Any changes to the CLI should be made in the `packages/cli` directory. If you can, it would be great if you could add tests for your changes.

 ## Testing

--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 # shadcn/ui

-A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. **Use this to build your own component library**.
+Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.

-![hero](apps/v4/public/opengraph-image.png)
+![hero](apps/www/public/og.jpg)

 ## Documentation

-Visit https://ui.shadcn.com/docs to view the documentation.
+Visit http://ui.shadcn.com/docs to view the documentation.

 ## Contributing

@@ -14,4 +14,4 @@ Please read the [contributing guide](/CONTRIBUTING.md).

 ## License

-Licensed under the [MIT license](./LICENSE.md).
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -6,4 +6,4 @@ We will investigate all legitimate reports and do our best to quickly fix the pr

 Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. 

-To do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.
+To do this, please visit the security tab of the repository and click the "Report a vulnerability" button.
--- a/apps/v4/.prettierignore
+++ b/apps/v4/.prettierignore
@@ -5,4 +5,3 @@ build
 .contentlayer
 registry/__index__.tsx
 content/docs/components/calendar.mdx
-registry/styles/**/*.css
--- a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
@@ -1,8 +1,11 @@
 "use client"

-import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+import { CheckIcon } from "lucide-react"
+
+import { useThemeConfig } from "@/components/active-theme"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
  Field,
  FieldContent,
@@ -13,31 +16,36 @@ import {
  FieldSeparator,
  FieldSet,
  FieldTitle,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
-import { Switch } from "@/examples/radix/ui/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
+} from "@/registry/new-york-v4/ui/field"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+const accents = [
+  {
+    name: "Blue",
+    value: "blue",
+  },
+  {
+    name: "Amber",
+    value: "amber",
+  },
+  {
+    name: "Green",
+    value: "green",
+  },
+  {
+    name: "Rose",
+    value: "rose",
+  },
+]

 export function AppearanceSettings() {
-  const [gpuCount, setGpuCount] = React.useState(8)
-
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
+  const { activeTheme, setActiveTheme } = useThemeConfig()
  return (
    <FieldSet>
      <FieldGroup>
@@ -82,6 +90,37 @@ export function AppearanceSettings() {
          </RadioGroup>
        </FieldSet>
        <FieldSeparator />
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldTitle>Accent</FieldTitle>
+            <FieldDescription>Select the accent color.</FieldDescription>
+          </FieldContent>
+          <FieldSet aria-label="Accent">
+            <RadioGroup
+              className="flex flex-wrap gap-2"
+              value={activeTheme}
+              onValueChange={setActiveTheme}
+            >
+              {accents.map((accent) => (
+                <Label
+                  htmlFor={accent.value}
+                  key={accent.value}
+                  data-theme={accent.value}
+                  className="flex size-6 items-center justify-center rounded-full data-[theme=amber]:bg-amber-600 data-[theme=blue]:bg-blue-700 data-[theme=green]:bg-green-600 data-[theme=rose]:bg-rose-600"
+                >
+                  <RadioGroupItem
+                    id={accent.value}
+                    value={accent.value}
+                    aria-label={accent.name}
+                    className="peer sr-only"
+                  />
+                  <CheckIcon className="hidden size-4 stroke-white peer-data-[state=checked]:block" />
+                </Label>
+              ))}
+            </RadioGroup>
+          </FieldSet>
+        </Field>
+        <FieldSeparator />
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
@@ -90,10 +129,9 @@ export function AppearanceSettings() {
          <ButtonGroup>
            <Input
              id="number-of-gpus-f6l"
-              value={gpuCount}
-              onChange={handleGpuInputChange}
+              placeholder="8"
              size={3}
-              className="h-7 w-14! font-mono"
+              className="h-8 !w-14 font-mono"
              maxLength={3}
            />
            <Button
@@ -101,8 +139,6 @@ export function AppearanceSettings() {
              size="icon-sm"
              type="button"
              aria-label="Decrement"
-              onClick={() => handleGpuAdjustment(-1)}
-              disabled={gpuCount <= 1}
            >
              <IconMinus />
            </Button>
@@ -111,8 +147,6 @@ export function AppearanceSettings() {
              size="icon-sm"
              type="button"
              aria-label="Increment"
-              onClick={() => handleGpuAdjustment(1)}
-              disabled={gpuCount >= 99}
            >
              <IconPlus />
            </Button>
--- a/apps/v4/app/(app)/(root)/components/button-group-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/button-group-demo.tsx
@@ -1,8 +1,20 @@
 "use client"

 import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterPlusIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -15,18 +27,7 @@ import {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
+} from "@/registry/new-york-v4/ui/dropdown-menu"

 export function ButtonGroupDemo() {
  const [label, setLabel] = React.useState("personal")
@@ -56,7 +57,7 @@ export function ButtonGroupDemo() {
              <MoreHorizontalIcon />
            </Button>
          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuContent align="end" className="w-48 [--radius:1rem]">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <MailCheckIcon />
@@ -78,7 +79,7 @@ export function ButtonGroupDemo() {
                Add to Calendar
              </DropdownMenuItem>
              <DropdownMenuItem>
-                <ListFilterIcon />
+                <ListFilterPlusIcon />
                Add to List
              </DropdownMenuItem>
              <DropdownMenuSub>
--- a/apps/v4/app/(app)/(root)/components/button-group-input-group.tsx
+++ b/apps/v4/app/(app)/(root)/components/button-group-input-group.tsx
@@ -1,20 +1,21 @@
 "use client"

 import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
-} from "@/examples/radix/ui/input-group"
+} from "@/registry/new-york-v4/ui/input-group"
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
+} from "@/registry/new-york-v4/ui/tooltip"

 export function ButtonGroupInputGroup() {
  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
--- a/apps/v4/app/(app)/(root)/components/button-group-nested.tsx
+++ b/apps/v4/app/(app)/(root)/components/button-group-nested.tsx
@@ -1,9 +1,10 @@
 "use client"

-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"

+import { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
+
 export function ButtonGroupNested() {
  return (
    <ButtonGroup>
--- a/apps/v4/app/(app)/(root)/components/button-group-popover.tsx
+++ b/apps/v4/app/(app)/(root)/components/button-group-popover.tsx
@@ -1,13 +1,14 @@
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Separator } from "@/examples/radix/ui/separator"
-import { Textarea } from "@/examples/radix/ui/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
+} from "@/registry/new-york-v4/ui/popover"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"

 export function ButtonGroupPopover() {
  return (
@@ -21,7 +22,7 @@ export function ButtonGroupPopover() {
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
-        <PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
+        <PopoverContent align="end" className="rounded-xl p-0 text-sm">
          <div className="px-4 py-3">
            <div className="text-sm font-medium">Agent Tasks</div>
          </div>
--- a/apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx
+++ b/apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx
@@ -1,10 +1,11 @@
+import { PlusIcon } from "lucide-react"
+
 import {
  Avatar,
  AvatarFallback,
-  AvatarGroup,
  AvatarImage,
-} from "@/examples/radix/ui/avatar"
-import { Button } from "@/examples/radix/ui/button"
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
  Empty,
  EmptyContent,
@@ -12,15 +13,14 @@ import {
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { PlusIcon } from "lucide-react"
+} from "@/registry/new-york-v4/ui/empty"

 export function EmptyAvatarGroup() {
  return (
-    <Empty className="flex-none border py-10">
+    <Empty className="flex-none border">
      <EmptyHeader>
        <EmptyMedia>
-          <AvatarGroup className="grayscale">
+          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
            <Avatar>
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
@@ -39,7 +39,7 @@ export function EmptyAvatarGroup() {
              />
              <AvatarFallback>ER</AvatarFallback>
            </Avatar>
-          </AvatarGroup>
+          </div>
        </EmptyMedia>
        <EmptyTitle>No Team Members</EmptyTitle>
        <EmptyDescription>
--- a/apps/v4/app/(app)/(root)/components/field-checkbox.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-checkbox.tsx
@@ -1,5 +1,5 @@
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"

 export function FieldCheckbox() {
  return (
--- a/apps/v4/app/(app)/(root)/components/field-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-demo.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/examples/radix/ui/button"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
 import {
  Field,
  FieldDescription,
@@ -8,21 +8,20 @@ import {
  FieldLegend,
  FieldSeparator,
  FieldSet,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
+} from "@/registry/new-york-v4/ui/field"
+import { Input } from "@/registry/new-york-v4/ui/input"
 import {
  Select,
  SelectContent,
-  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from "@/examples/radix/ui/select"
-import { Textarea } from "@/examples/radix/ui/textarea"
+} from "@/registry/new-york-v4/ui/select"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"

 export function FieldDemo() {
  return (
-    <div className="w-full max-w-md rounded-xl border p-6">
+    <div className="w-full max-w-md rounded-lg border p-6">
      <form>
        <FieldGroup>
          <FieldSet>
@@ -70,20 +69,18 @@ export function FieldDemo() {
                      <SelectValue placeholder="MM" />
                    </SelectTrigger>
                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="01">01</SelectItem>
-                        <SelectItem value="02">02</SelectItem>
-                        <SelectItem value="03">03</SelectItem>
-                        <SelectItem value="04">04</SelectItem>
-                        <SelectItem value="05">05</SelectItem>
-                        <SelectItem value="06">06</SelectItem>
-                        <SelectItem value="07">07</SelectItem>
-                        <SelectItem value="08">08</SelectItem>
-                        <SelectItem value="09">09</SelectItem>
-                        <SelectItem value="10">10</SelectItem>
-                        <SelectItem value="11">11</SelectItem>
-                        <SelectItem value="12">12</SelectItem>
-                      </SelectGroup>
+                      <SelectItem value="01">01</SelectItem>
+                      <SelectItem value="02">02</SelectItem>
+                      <SelectItem value="03">03</SelectItem>
+                      <SelectItem value="04">04</SelectItem>
+                      <SelectItem value="05">05</SelectItem>
+                      <SelectItem value="06">06</SelectItem>
+                      <SelectItem value="07">07</SelectItem>
+                      <SelectItem value="08">08</SelectItem>
+                      <SelectItem value="09">09</SelectItem>
+                      <SelectItem value="10">10</SelectItem>
+                      <SelectItem value="11">11</SelectItem>
+                      <SelectItem value="12">12</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
@@ -96,14 +93,12 @@ export function FieldDemo() {
                      <SelectValue placeholder="YYYY" />
                    </SelectTrigger>
                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="2024">2024</SelectItem>
-                        <SelectItem value="2025">2025</SelectItem>
-                        <SelectItem value="2026">2026</SelectItem>
-                        <SelectItem value="2027">2027</SelectItem>
-                        <SelectItem value="2028">2028</SelectItem>
-                        <SelectItem value="2029">2029</SelectItem>
-                      </SelectGroup>
+                      <SelectItem value="2024">2024</SelectItem>
+                      <SelectItem value="2025">2025</SelectItem>
+                      <SelectItem value="2026">2026</SelectItem>
+                      <SelectItem value="2027">2027</SelectItem>
+                      <SelectItem value="2028">2028</SelectItem>
+                      <SelectItem value="2029">2029</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
--- a/apps/v4/app/(app)/(root)/components/field-hear.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-hear.tsx
@@ -1,5 +1,5 @@
-import { Card, CardContent } from "@/examples/radix/ui/card"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
 import {
  Field,
  FieldDescription,
@@ -8,7 +8,7 @@ import {
  FieldLegend,
  FieldSet,
  FieldTitle,
-} from "@/examples/radix/ui/field"
+} from "@/registry/new-york-v4/ui/field"

 const options = [
  {
@@ -46,11 +46,11 @@ export function FieldHear() {
                  <FieldLabel
                    htmlFor={option.value}
                    key={option.value}
-                    className="w-fit!"
+                    className="!w-fit"
                  >
                    <Field
                      orientation="horizontal"
-                      className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
+                      className="gap-1.5 overflow-hidden !px-3 !py-1.5 transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:!px-2"
                    >
                      <Checkbox
                        value={option.value}
--- a/apps/v4/app/(app)/(root)/components/field-slider.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-slider.tsx
@@ -1,8 +1,13 @@
 "use client"

 import { useState } from "react"
-import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
-import { Slider } from "@/examples/radix/ui/slider"
+
+import {
+  Field,
+  FieldDescription,
+  FieldTitle,
+} from "@/registry/new-york-v4/ui/field"
+import { Slider } from "@/registry/new-york-v4/ui/slider"

 export function FieldSlider() {
  const [value, setValue] = useState([200, 800])
--- a/apps/v4/app/(app)/(root)/components/index.tsx
+++ b/apps/v4/app/(app)/(root)/components/index.tsx
@@ -1,4 +1,4 @@
-import { FieldSeparator } from "@/examples/radix/ui/field"
+import { FieldSeparator } from "@/registry/new-york-v4/ui/field"

 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"
@@ -19,7 +19,7 @@ import { SpinnerEmpty } from "./spinner-empty"

 export function RootComponents() {
  return (
-    <div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
+    <div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <FieldDemo />
      </div>
@@ -33,7 +33,7 @@ export function RootComponents() {
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <InputGroupButtonExample />
        <ItemDemo />
-        <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
+        <FieldSeparator>Appearance Settings</FieldSeparator>
        <AppearanceSettings />
      </div>
      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
--- a/apps/v4/app/(app)/(root)/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-button.tsx
@@ -1,19 +1,20 @@
 "use client"

 import * as React from "react"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
 import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
-} from "@/examples/radix/ui/input-group"
-import { Label } from "@/examples/radix/ui/label"
+} from "@/registry/new-york-v4/ui/input-group"
+import { Label } from "@/registry/new-york-v4/ui/label"
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+} from "@/registry/new-york-v4/ui/popover"

 export function InputGroupButtonExample() {
  const [isFavorite, setIsFavorite] = React.useState(false)
@@ -24,7 +25,7 @@ export function InputGroupButtonExample() {
        Input Secure
      </Label>
      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-19" className="pl-0.5!" />
+        <InputGroupInput id="input-secure-19" className="!pl-0.5" />
        <Popover>
          <PopoverTrigger asChild>
            <InputGroupAddon>
@@ -46,7 +47,7 @@ export function InputGroupButtonExample() {
            <p>You should not enter any sensitive information on this site.</p>
          </PopoverContent>
        </Popover>
-        <InputGroupAddon className="pl-1! text-muted-foreground">
+        <InputGroupAddon className="text-muted-foreground !pl-1">
          https://
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
--- a/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
@@ -1,9 +1,12 @@
+import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
+
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
+} from "@/registry/new-york-v4/ui/dropdown-menu"
 import {
  InputGroup,
  InputGroupAddon,
@@ -11,15 +14,13 @@ import {
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
-import { Separator } from "@/examples/radix/ui/separator"
+} from "@/registry/new-york-v4/ui/input-group"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
+} from "@/registry/new-york-v4/ui/tooltip"

 export function InputGroupDemo() {
  return (
@@ -32,7 +33,7 @@ export function InputGroupDemo() {
        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
      </InputGroup>
      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="pl-1!" />
+        <InputGroupInput placeholder="example.com" className="!pl-1" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
@@ -66,14 +67,18 @@ export function InputGroupDemo() {
            <DropdownMenuTrigger asChild>
              <InputGroupButton variant="ghost">Auto</InputGroupButton>
            </DropdownMenuTrigger>
-            <DropdownMenuContent side="top" align="start">
+            <DropdownMenuContent
+              side="top"
+              align="start"
+              className="[--radius:0.95rem]"
+            >
              <DropdownMenuItem>Auto</DropdownMenuItem>
              <DropdownMenuItem>Agent</DropdownMenuItem>
              <DropdownMenuItem>Manual</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="h-4!" />
+          <Separator orientation="vertical" className="!h-4" />
          <InputGroupButton
            variant="default"
            className="rounded-full"
@@ -87,7 +92,7 @@ export function InputGroupDemo() {
      <InputGroup>
        <InputGroupInput placeholder="@shadcn" />
        <InputGroupAddon align="inline-end">
-          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
+          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
            <IconCheck className="size-3 text-white" />
          </div>
        </InputGroupAddon>
--- a/apps/v4/app/(app)/(root)/components/item-avatar.tsx
+++ b/apps/v4/app/(app)/(root)/components/item-avatar.tsx
@@ -42,7 +42,7 @@ export function ItemAvatar() {
      </Item>
      <Item variant="outline">
        <ItemMedia>
-          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
+          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
            <Avatar className="hidden sm:flex">
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
--- a/apps/v4/app/(app)/(root)/components/item-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/item-demo.tsx
@@ -1,4 +1,6 @@
-import { Button } from "@/examples/radix/ui/button"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
  Item,
  ItemActions,
@@ -6,8 +8,7 @@ import {
  ItemDescription,
  ItemMedia,
  ItemTitle,
-} from "@/examples/radix/ui/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+} from "@/registry/new-york-v4/ui/item"

 export function ItemDemo() {
  return (
--- a/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
@@ -1,8 +1,24 @@
 "use client"

 import { useMemo, useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
-import { Badge } from "@/examples/radix/ui/badge"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
 import {
  Command,
  CommandEmpty,
@@ -10,7 +26,7 @@ import {
  CommandInput,
  CommandItem,
  CommandList,
-} from "@/examples/radix/ui/command"
+} from "@/registry/new-york-v4/ui/command"
 import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
@@ -23,36 +39,25 @@ import {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"
 import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
+} from "@/registry/new-york-v4/ui/input-group"
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Switch } from "@/examples/radix/ui/switch"
+} from "@/registry/new-york-v4/ui/popover"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
+} from "@/registry/new-york-v4/ui/tooltip"

 const SAMPLE_DATA = {
  mentionable: [
@@ -185,17 +190,17 @@ export function NotionPromptForm() {
  const hasMentions = mentions.length > 0

  return (
-    <form>
+    <form className="[--radius:1.2rem]">
      <Field>
        <FieldLabel htmlFor="notion-prompt" className="sr-only">
          Prompt
        </FieldLabel>
-        <InputGroup className="rounded-xl">
+        <InputGroup>
          <InputGroupTextarea
            id="notion-prompt"
            placeholder="Ask, search, or make anything..."
          />
-          <InputGroupAddon align="block-start" className="pt-3">
+          <InputGroupAddon align="block-start">
            <Popover
              open={mentionPopoverOpen}
              onOpenChange={setMentionPopoverOpen}
@@ -209,7 +214,7 @@ export function NotionPromptForm() {
                    <InputGroupButton
                      variant="outline"
                      size={!hasMentions ? "sm" : "icon-sm"}
-                      className="transition-transform"
+                      className="rounded-full transition-transform"
                    >
                      <IconAt /> {!hasMentions && "Add context"}
                    </InputGroupButton>
@@ -217,7 +222,7 @@ export function NotionPromptForm() {
                </TooltipTrigger>
                <TooltipContent>Mention a person, page, or date</TooltipContent>
              </Tooltip>
-              <PopoverContent className="p-0" align="start">
+              <PopoverContent className="p-0 [--radius:1.2rem]" align="start">
                <Command>
                  <CommandInput placeholder="Search pages..." />
                  <CommandList>
@@ -235,7 +240,6 @@ export function NotionPromptForm() {
                              setMentions((prev) => [...prev, currentValue])
                              setMentionPopoverOpen(false)
                            }}
-                            className="rounded-lg"
                          >
                            <MentionableIcon item={item} />
                            {item.title}
@@ -247,7 +251,7 @@ export function NotionPromptForm() {
                </Command>
              </PopoverContent>
            </Popover>
-            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
+            <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
              {mentions.map((mention) => {
                const item = SAMPLE_DATA.mentionable.find(
                  (item) => item.title === mention
@@ -262,7 +266,7 @@ export function NotionPromptForm() {
                    key={mention}
                    size="sm"
                    variant="secondary"
-                    className="rounded-full pl-2!"
+                    className="rounded-full !pl-2"
                    onClick={() => {
                      setMentions((prev) => prev.filter((m) => m !== mention))
                    }}
@@ -305,10 +309,10 @@ export function NotionPromptForm() {
              <DropdownMenuContent
                side="top"
                align="start"
-                className="min-w-48"
+                className="[--radius:1rem]"
              >
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                <DropdownMenuGroup className="w-42">
+                  <DropdownMenuLabel className="text-muted-foreground text-xs">
                    Select Agent Mode
                  </DropdownMenuLabel>
                  {SAMPLE_DATA.models.map((model) => (
@@ -342,7 +346,11 @@ export function NotionPromptForm() {
                  <IconWorld /> All Sources
                </InputGroupButton>
              </DropdownMenuTrigger>
-              <DropdownMenuContent side="top" align="end" className="w-72">
+              <DropdownMenuContent
+                side="top"
+                align="end"
+                className="[--radius:1rem]"
+              >
                <DropdownMenuGroup>
                  <DropdownMenuItem
                    asChild
@@ -426,7 +434,7 @@ export function NotionPromptForm() {
                  <DropdownMenuItem>
                    <IconPlus /> Connect Apps
                  </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                  <DropdownMenuLabel className="text-muted-foreground text-xs">
                    We&apos;ll only search in the sources selected here.
                  </DropdownMenuLabel>
                </DropdownMenuGroup>
--- a/apps/v4/app/(app)/(root)/components/spinner-badge.tsx
+++ b/apps/v4/app/(app)/(root)/components/spinner-badge.tsx
@@ -1,9 +1,9 @@
-import { Badge } from "@/examples/radix/ui/badge"
-import { Spinner } from "@/examples/radix/ui/spinner"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Spinner } from "@/registry/new-york-v4/ui/spinner"

 export function SpinnerBadge() {
  return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 [--radius:1.2rem]">
      <Badge>
        <Spinner />
        Syncing
--- a/apps/v4/app/(app)/(root)/components/spinner-empty.tsx
+++ b/apps/v4/app/(app)/(root)/components/spinner-empty.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/examples/radix/ui/button"
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
  Empty,
  EmptyContent,
@@ -6,8 +6,8 @@ import {
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { Spinner } from "@/examples/radix/ui/spinner"
+} from "@/registry/new-york-v4/ui/empty"
+import { Spinner } from "@/registry/new-york-v4/ui/spinner"

 export function SpinnerEmpty() {
  return (
--- a/apps/v4/app/(app)/(root)/page.tsx
+++ b/apps/v4/app/(app)/(root)/page.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"

@@ -55,21 +55,21 @@ export default function IndexPage() {
        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
-          <Button asChild size="sm" className="h-[31px] rounded-lg">
-            <Link href="/create">New Project</Link>
+          <Button asChild size="sm">
+            <Link href="/docs/installation">Get Started</Link>
          </Button>
-          <Button asChild size="sm" variant="ghost" className="rounded-lg">
+          <Button asChild size="sm" variant="ghost">
            <Link href="/docs/components">View Components</Link>
          </Button>
        </PageActions>
      </PageHeader>
      <PageNav className="hidden md:flex">
-        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
+        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
        <ThemeSelector className="mr-4 hidden md:flex" />
      </PageNav>
-      <div className="container-wrapper flex-1 section-soft pb-6">
+      <div className="container-wrapper section-soft flex-1 pb-6">
        <div className="container overflow-hidden">
-          <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
+          <section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
            <Image
              src="/r/styles/new-york-v4/dashboard-01-light.png"
              width={1400}
@@ -87,7 +87,7 @@ export default function IndexPage() {
              priority
            />
          </section>
-          <section className="hidden theme-container md:block">
+          <section className="theme-container hidden md:block">
            <RootComponents />
          </section>
        </div>
--- a/apps/v4/app/(app)/blocks/[...categories]/page.tsx
+++ b/apps/v4/app/(app)/blocks/[...categories]/page.tsx
@@ -1,7 +1,6 @@
 import { getAllBlockIds } from "@/lib/blocks"
-import { registryCategories } from "@/lib/categories"
 import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
+import { registryCategories } from "@/registry/registry-categories"

 export const revalidate = false
 export const dynamic = "force-static"
@@ -18,16 +17,13 @@ export default async function BlocksPage({
 }: {
  params: Promise<{ categories?: string[] }>
 }) {
-  const [{ categories = [] }, activeStyle] = await Promise.all([
-    params,
-    getActiveStyle(),
-  ])
+  const { categories = [] } = await params
  const blocks = await getAllBlockIds(["registry:block"], categories)

  return (
    <div className="flex flex-col gap-12 md:gap-24">
      {blocks.map((name) => (
-        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
+        <BlockDisplay name={name} key={name} />
      ))}
    </div>
  )
--- a/apps/v4/app/(app)/blocks/layout.tsx
+++ b/apps/v4/app/(app)/blocks/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Link from "next/link"

 import { Announcement } from "@/components/announcement"
@@ -71,7 +71,7 @@ export default function BlocksLayout({
          <Link href="/blocks/sidebar">Browse all blocks</Link>
        </Button>
      </PageNav>
-      <div className="container-wrapper flex-1 section-soft md:py-12">
+      <div className="container-wrapper section-soft flex-1 md:py-12">
        <div className="container">{children}</div>
      </div>
    </>
--- a/apps/v4/app/(app)/blocks/page.tsx
+++ b/apps/v4/app/(app)/blocks/page.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link"

 import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
 import { Button } from "@/registry/new-york-v4/ui/button"

 export const dynamic = "force-static"
@@ -16,12 +15,10 @@ const FEATURED_BLOCKS = [
 ]

 export default async function BlocksPage() {
-  const activeStyle = await getActiveStyle()
-
  return (
    <div className="flex flex-col gap-12 md:gap-24">
      {FEATURED_BLOCKS.map((name) => (
-        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
+        <BlockDisplay name={name} key={name} />
      ))}
      <div className="container-wrapper">
        <div className="container flex justify-center py-6">
--- a/apps/v4/app/(app)/charts/[type]/page.tsx
+++ b/apps/v4/app/(app)/charts/[type]/page.tsx
@@ -2,12 +2,7 @@ import * as React from "react"
 import { notFound } from "next/navigation"

 import { cn } from "@/lib/utils"
-import {
-  ChartDisplay,
-  getCachedRegistryItem,
-  getChartHighlightedCode,
-} from "@/components/chart-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
+import { ChartDisplay } from "@/components/chart-display"
 import { charts } from "@/app/(app)/charts/charts"

 export const revalidate = false
@@ -46,27 +41,6 @@ export default async function ChartPage({ params }: ChartPageProps) {

  const chartType = type as ChartType
  const chartList = charts[chartType]
-  const activeStyle = await getActiveStyle()
-
-  // Prefetch all chart data in parallel for better performance.
-  // Charts are rendered via iframes, so we only need the metadata and highlighted code.
-  const chartDataPromises = chartList.map(async (chart) => {
-    const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)
-    if (!registryItem) return null
-
-    const highlightedCode = await getChartHighlightedCode(
-      registryItem.files?.[0]?.content ?? ""
-    )
-    if (!highlightedCode) return null
-
-    return {
-      ...registryItem,
-      highlightedCode,
-      fullWidth: chart.fullWidth,
-    }
-  })
-
-  const prefetchedCharts = await Promise.all(chartDataPromises)

  return (
    <div className="grid flex-1 gap-12 lg:gap-24">
@@ -75,14 +49,15 @@ export default async function ChartPage({ params }: ChartPageProps) {
      </h2>
      <div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
        {Array.from({ length: 12 }).map((_, index) => {
-          const chart = prefetchedCharts[index]
+          const chart = chartList[index]
          return chart ? (
            <ChartDisplay
-              key={chart.name}
-              chart={chart}
-              style={activeStyle.name}
+              key={chart.id}
+              name={chart.id}
              className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            />
+            >
+              <chart.component />
+            </ChartDisplay>
          ) : (
            <div
              key={`empty-${index}`}
--- a/apps/v4/app/(app)/charts/charts.tsx
+++ b/apps/v4/app/(app)/charts/charts.tsx
@@ -1,4 +1,4 @@
-import type * as React from "react"
+import * as React from "react"

 import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
 import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
--- a/apps/v4/app/(app)/charts/layout.tsx
+++ b/apps/v4/app/(app)/charts/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Link from "next/link"

 import { Announcement } from "@/components/announcement"
@@ -63,8 +63,9 @@ export default function ChartsLayout({
      </PageHeader>
      <PageNav id="charts">
        <ChartsNav />
+        <ThemeSelector className="mr-4 hidden md:flex" />
      </PageNav>
-      <div className="container-wrapper flex-1">
+      <div className="container-wrapper section-soft flex-1">
        <div className="container pb-6">
          <section className="theme-container">{children}</section>
        </div>
--- a/apps/v4/app/(app)/colors/layout.tsx
+++ b/apps/v4/app/(app)/colors/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Link from "next/link"

 import { Announcement } from "@/components/announcement"
@@ -62,7 +62,7 @@ export default function ColorsLayout({
      <div className="hidden">
        <div className="container-wrapper">
          <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
+            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
          </div>
        </div>
      </div>
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -1,15 +1,19 @@
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
-import { findNeighbour } from "fumadocs-core/page-tree"
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUpRight,
+} from "@tabler/icons-react"
+import { findNeighbour } from "fumadocs-core/server"

 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
-import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
 import { DocsCopyPage } from "@/components/docs-copy-page"
 import { DocsTableOfContents } from "@/components/docs-toc"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Button } from "@/registry/new-york-v4/ui/button"

 export const revalidate = false
@@ -21,7 +25,7 @@ export function generateStaticParams() {
 }

 export async function generateMetadata(props: {
-  params: Promise<{ slug: string[] }>
+  params: Promise<{ slug?: string[] }>
 }) {
  const params = await props.params
  const page = source.getPage(params.slug)
@@ -69,7 +73,7 @@ export async function generateMetadata(props: {
 }

 export default async function Page(props: {
-  params: Promise<{ slug: string[] }>
+  params: Promise<{ slug?: string[] }>
 }) {
  const params = await props.params
  const page = source.getPage(params.slug)
@@ -78,117 +82,128 @@ export default async function Page(props: {
  }

  const doc = page.data
+  // @ts-expect-error - revisit fumadocs types.
  const MDX = doc.body
-  const isChangelog = params.slug?.[0] === "changelog"
-  const neighbours = isChangelog
-    ? { previous: null, next: null }
-    : findNeighbour(source.pageTree, page.url)
-  const raw = await page.data.getText("raw")
+  const neighbours = await findNeighbour(source.pageTree, page.url)
+
+  // @ts-expect-error - revisit fumadocs types.
+  const links = doc.links

  return (
    <div
      data-slot="docs"
-      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
+      className="flex items-stretch text-[1.05rem] sm:text-[15px] xl:w-full"
    >
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+        <div className="mx-auto flex w-full max-w-2xl min-w-0 flex-1 flex-col gap-8 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
          <div className="flex flex-col gap-2">
            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between md:items-start">
-                <h1 className="scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
+              <div className="flex items-start justify-between">
+                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
                  {doc.title}
                </h1>
-                <div className="docs-nav flex items-center gap-2">
-                  <div className="hidden sm:block">
-                    <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
-                  </div>
-                  <div className="ml-auto flex gap-2">
-                    {neighbours.previous && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        className="extend-touch-target size-8 shadow-none md:size-7"
-                        asChild
-                      >
-                        <Link href={neighbours.previous.url}>
-                          <IconArrowLeft />
-                          <span className="sr-only">Previous</span>
-                        </Link>
-                      </Button>
-                    )}
-                    {neighbours.next && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        className="extend-touch-target size-8 shadow-none md:size-7"
-                        asChild
-                      >
-                        <Link href={neighbours.next.url}>
-                          <span className="sr-only">Next</span>
-                          <IconArrowRight />
-                        </Link>
-                      </Button>
-                    )}
-                  </div>
+                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
+                  <DocsCopyPage
+                    // @ts-expect-error - revisit fumadocs types.
+                    page={doc.content}
+                    url={absoluteUrl(page.url)}
+                  />
+                  {neighbours.previous && (
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
+                      asChild
+                    >
+                      <Link href={neighbours.previous.url}>
+                        <IconArrowLeft />
+                        <span className="sr-only">Previous</span>
+                      </Link>
+                    </Button>
+                  )}
+                  {neighbours.next && (
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="extend-touch-target size-8 shadow-none md:size-7"
+                      asChild
+                    >
+                      <Link href={neighbours.next.url}>
+                        <span className="sr-only">Next</span>
+                        <IconArrowRight />
+                      </Link>
+                    </Button>
+                  )}
                </div>
              </div>
              {doc.description && (
-                <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
+                <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
                  {doc.description}
                </p>
              )}
            </div>
+            {links ? (
+              <div className="flex items-center gap-2 pt-4">
+                {links?.doc && (
+                  <Badge asChild variant="secondary" className="rounded-full">
+                    <a href={links.doc} target="_blank" rel="noreferrer">
+                      Docs <IconArrowUpRight />
+                    </a>
+                  </Badge>
+                )}
+                {links?.api && (
+                  <Badge asChild variant="secondary" className="rounded-full">
+                    <a href={links.api} target="_blank" rel="noreferrer">
+                      API Reference <IconArrowUpRight />
+                    </a>
+                  </Badge>
+                )}
+              </div>
+            ) : null}
          </div>
-          <div className="w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0">
-            {params.slug &&
-              params.slug[0] === "components" &&
-              params.slug[1] &&
-              params.slug[2] && (
-                <DocsBaseSwitcher
-                  base={params.slug[1]}
-                  component={params.slug[2]}
-                  className="mb-4"
-                />
-              )}
+          <div className="w-full flex-1 *:data-[slot=alert]:first:mt-0">
            <MDX components={mdxComponents} />
          </div>
-          <div className="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
-            {neighbours.previous && (
-              <Button
-                variant="secondary"
-                size="sm"
-                asChild
-                className="shadow-none"
-              >
-                <Link href={neighbours.previous.url}>
-                  <IconArrowLeft /> {neighbours.previous.name}
-                </Link>
-              </Button>
-            )}
-            {neighbours.next && (
-              <Button
-                variant="secondary"
-                size="sm"
-                className="ml-auto shadow-none"
-                asChild
-              >
-                <Link href={neighbours.next.url}>
-                  {neighbours.next.name} <IconArrowRight />
-                </Link>
-              </Button>
-            )}
-          </div>
+        </div>
+        <div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
+          {neighbours.previous && (
+            <Button
+              variant="secondary"
+              size="sm"
+              asChild
+              className="shadow-none"
+            >
+              <Link href={neighbours.previous.url}>
+                <IconArrowLeft /> {neighbours.previous.name}
+              </Link>
+            </Button>
+          )}
+          {neighbours.next && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="ml-auto shadow-none"
+              asChild
+            >
+              <Link href={neighbours.next.url}>
+                {neighbours.next.name} <IconArrowRight />
+              </Link>
+            </Button>
+          )}
        </div>
      </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
-        <div className="h-(--top-spacing) shrink-0"></div>
+      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[calc(100svh-var(--footer-height)+2rem)] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
+        <div className="h-(--top-spacing) shrink-0" />
+        {/* @ts-expect-error - revisit fumadocs types. */}
        {doc.toc?.length ? (
-          <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
+          <div className="no-scrollbar overflow-y-auto px-8">
+            {/* @ts-expect-error - revisit fumadocs types. */}
            <DocsTableOfContents toc={doc.toc} />
+            <div className="h-12" />
          </div>
        ) : null}
-        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
+        <div className="flex flex-1 flex-col gap-12 px-6">
          <OpenInV0Cta />
        </div>
      </div>
--- a/apps/v4/app/(app)/docs/changelog/page.tsx
+++ b/apps/v4/app/(app)/docs/changelog/page.tsx
@@ -1,144 +0,0 @@
-import Link from "next/link"
-import { Button } from "@/examples/radix/ui/button"
-import { mdxComponents } from "@/mdx-components"
-import { IconRss } from "@tabler/icons-react"
-
-import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
-import { absoluteUrl } from "@/lib/utils"
-import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-
-export const revalidate = false
-export const dynamic = "force-static"
-
-export function generateMetadata() {
-  return {
-    title: "Changelog",
-    description: "Latest updates and announcements.",
-    openGraph: {
-      title: "Changelog",
-      description: "Latest updates and announcements.",
-      type: "article",
-      url: absoluteUrl("/docs/changelog"),
-      images: [
-        {
-          url: `/og?title=${encodeURIComponent(
-            "Changelog"
-          )}&description=${encodeURIComponent(
-            "Latest updates and announcements."
-          )}`,
-        },
-      ],
-    },
-  }
-}
-
-export default function ChangelogPage() {
-  const pages = getChangelogPages()
-  const latestPages = pages.slice(0, 5)
-  const olderPages = pages.slice(5)
-
-  return (
-    <div
-      data-slot="docs"
-      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
-    >
-      <div className="flex min-w-0 flex-1 flex-col">
-        <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between">
-              <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
-                Changelog
-              </h1>
-              <Button variant="secondary" size="sm" asChild>
-                <a href="/rss.xml" target="_blank" rel="noopener noreferrer">
-                  <IconRss />
-                  RSS
-                </a>
-              </Button>
-            </div>
-            <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
-              Latest updates and announcements.
-            </p>
-          </div>
-          <div className="w-full flex-1 pb-16 sm:pb-0">
-            {latestPages.map((page) => {
-              const data = page.data as ChangelogPageData
-              const MDX = page.data.body
-
-              return (
-                <article key={page.url} className="mb-12 border-b pb-12">
-                  <h2 className="font-heading text-xl font-semibold tracking-tight">
-                    {data.title}
-                  </h2>
-                  <div className="prose-changelog mt-6 *:first:mt-0">
-                    <MDX components={mdxComponents} />
-                  </div>
-                </article>
-              )
-            })}
-            {olderPages.length > 0 && (
-              <div id="more-updates" className="mb-24 scroll-mt-24">
-                <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
-                  More Updates
-                </h2>
-                <div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
-                  {olderPages.map((page) => {
-                    const data = page.data as ChangelogPageData
-                    const [date, ...titleParts] = data.title.split(" - ")
-                    const title = titleParts.join(" - ")
-                    return (
-                      <Link
-                        key={page.url}
-                        href={page.url}
-                        className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
-                      >
-                        <span className="text-xs text-muted-foreground">
-                          {date}
-                        </span>
-                        <span className="text-sm font-medium">{title}</span>
-                      </Link>
-                    )
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
-        <div className="h-(--top-spacing) shrink-0"></div>
-        <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
-          <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
-            <p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
-              On This Page
-            </p>
-            {latestPages.map((page) => {
-              const data = page.data as ChangelogPageData
-              return (
-                <Link
-                  key={page.url}
-                  href={page.url}
-                  className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
-                >
-                  {data.title}
-                </Link>
-              )
-            })}
-            {olderPages.length > 0 && (
-              <a
-                href="#more-updates"
-                className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
-              >
-                More Updates
-              </a>
-            )}
-          </div>
-        </div>
-        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
-          <OpenInV0Cta />
-        </div>
-      </div>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/docs/layout.tsx
+++ b/apps/v4/app/(app)/docs/layout.tsx
@@ -9,14 +9,7 @@ export default function DocsLayout({
 }) {
  return (
    <div className="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider
-        className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
-        style={
-          {
-            "--sidebar-width": "calc(var(--spacing) * 72)",
-          } as React.CSSProperties
-        }
-      >
+      <SidebarProvider className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
        <DocsSidebar tree={source.pageTree} />
        <div className="h-full w-full">{children}</div>
      </SidebarProvider>
--- a/apps/v4/app/(app)/examples/authentication/page.tsx
+++ b/apps/v4/app/(app)/examples/authentication/page.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"

@@ -43,8 +43,8 @@ export default function AuthenticationPage() {
        >
          Login
        </Link>
-        <div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
-          <div className="absolute inset-0 bg-primary/5" />
+        <div className="text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r">
+          <div className="bg-primary/5 absolute inset-0" />
          <div className="relative z-20 flex items-center text-lg font-medium">
            <svg
              xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export default function AuthenticationPage() {
              <h1 className="text-2xl font-semibold tracking-tight">
                Create an account
              </h1>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                Enter your email below to create your account
              </p>
            </div>
--- a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
@@ -159,10 +159,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
-              className="data-[slot=sidebar-menu-button]:p-1.5!"
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
            >
              <Link href="#">
-                <IconInnerShadowTop className="size-5!" />
+                <IconInnerShadowTop className="!size-5" />
                <span className="text-base font-semibold">Acme Inc.</span>
              </Link>
            </SidebarMenuButton>
--- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
@@ -13,10 +13,10 @@ import {
  CardTitle,
 } from "@/registry/new-york-v4/ui/card"
 import {
+  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
-  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 import {
  Select,
@@ -174,7 +174,7 @@ export function ChartAreaInteractive() {
            value={timeRange}
            onValueChange={setTimeRange}
            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
          >
            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
--- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
@@ -35,6 +35,8 @@ import {
  IconTrendingUp,
 } from "@tabler/icons-react"
 import {
+  ColumnDef,
+  ColumnFiltersState,
  flexRender,
  getCoreRowModel,
  getFacetedRowModel,
@@ -42,12 +44,10 @@ import {
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
+  Row,
+  SortingState,
  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type Row,
-  type SortingState,
-  type VisibilityState,
+  VisibilityState,
 } from "@tanstack/react-table"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { toast } from "sonner"
@@ -57,10 +57,10 @@ import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
+  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
-  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
 import {
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
      {...listeners}
      variant="ghost"
      size="icon"
-      className="size-7 text-muted-foreground hover:bg-transparent"
+      className="text-muted-foreground size-7 hover:bg-transparent"
    >
-      <IconGripVertical className="size-3 text-muted-foreground" />
+      <IconGripVertical className="text-muted-foreground size-3" />
      <span className="sr-only">Drag to reorder</span>
    </Button>
  )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    header: "Section Type",
    cell: ({ row }) => (
      <div className="w-32">
-        <Badge variant="outline" className="px-1.5 text-muted-foreground">
+        <Badge variant="outline" className="text-muted-foreground px-1.5">
          {row.original.type}
        </Badge>
      </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
-      <Badge variant="outline" className="px-1.5 text-muted-foreground">
+      <Badge variant="outline" className="text-muted-foreground px-1.5">
        {row.original.status === "Done" ? (
          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
        ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Target
        </Label>
        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
          defaultValue={row.original.target}
          id={`${row.original.id}-target`}
        />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Limit
        </Label>
        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
          defaultValue={row.original.limit}
          id={`${row.original.id}-limit`}
        />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
-            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
+            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
            size="icon"
          >
            <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
            <SelectItem value="focus-documents">Focus Documents</SelectItem>
          </SelectContent>
        </Select>
-        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
          <TabsTrigger value="outline">Outline</TabsTrigger>
          <TabsTrigger value="past-performance">
            Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
            id={sortableId}
          >
            <Table>
-              <TableHeader className="sticky top-0 z-10 bg-muted">
+              <TableHeader className="bg-muted sticky top-0 z-10">
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
          </DndContext>
        </div>
        <div className="flex items-center justify-between px-4">
-          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
            {table.getFilteredSelectedRowModel().rows.length} of{" "}
            {table.getFilteredRowModel().rows.length} row(s) selected.
          </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
  return (
    <Drawer direction={isMobile ? "bottom" : "right"}>
      <DrawerTrigger asChild>
-        <Button variant="link" className="w-fit px-0 text-left text-foreground">
+        <Button variant="link" className="text-foreground w-fit px-0 text-left">
          {item.header}
        </Button>
      </DrawerTrigger>
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction
                  showOnHover
-                  className="rounded-sm data-[state=open]:bg-accent"
+                  className="data-[state=open]:bg-accent rounded-sm"
                >
                  <IconDots />
                  <span className="sr-only">More</span>
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs text-muted-foreground">
+                <span className="text-muted-foreground truncate text-xs">
                  {user.email}
                </span>
              </div>
@@ -76,7 +76,7 @@ export function NavUser({
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs text-muted-foreground">
+                  <span className="text-muted-foreground truncate text-xs">
                    {user.email}
                  </span>
                </div>
--- a/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"

 export function SiteHeader() {
  return (
-    <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/90 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+    <header className="bg-background/90 sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
        <h1 className="text-base font-medium">Documents</h1>
        <div className="ml-auto flex items-center gap-2">
--- a/apps/v4/app/(app)/examples/layout.tsx
+++ b/apps/v4/app/(app)/examples/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Link from "next/link"

 import { Announcement } from "@/components/announcement"
@@ -16,9 +16,8 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 export const dynamic = "force-static"
 export const revalidate = false

-const title = "The Foundation for your Design System"
-const description =
-  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
+const title = "Examples"
+const description = "Check out some examples app built using the components."

 export const metadata: Metadata = {
  title,
@@ -53,24 +52,28 @@ export default function ExamplesLayout({
    <>
      <PageHeader>
        <Announcement />
-        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageHeaderHeading>Build your Component Library</PageHeaderHeading>
+        <PageHeaderDescription>
+          A set of beautifully-designed, accessible components and a code
+          distribution platform. Works with your favorite frameworks. Open
+          Source. Open Code.
+        </PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
-            <Link href="/docs/installation">Get Started</Link>
+            <Link href="/docs">Get Started</Link>
          </Button>
          <Button asChild size="sm" variant="ghost">
-            <Link href="/docs/components">View Components</Link>
+            <Link href="/blocks">Browse Blocks</Link>
          </Button>
        </PageActions>
      </PageHeader>
-      <PageNav id="examples" className="hidden md:flex">
-        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
-        <ThemeSelector className="mr-4 hidden md:flex" />
+      <PageNav id="examples">
+        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ThemeSelector className="mr-4 hidden md:block" />
      </PageNav>
-      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
-        <div className="container flex flex-1 scroll-mt-20 flex-col theme-container">
-          <div className="flex flex-col overflow-hidden rounded-lg border bg-background bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
+      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
+        <div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
+          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding md:flex-1 xl:rounded-xl">
            {children}
          </div>
        </div>
--- a/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
@@ -76,7 +76,7 @@ export function CodeViewer() {
            </pre>
          </div>
          <div>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
              Your API Key can be found here. You should use environment
              variables or a secret management tool to expose your key to your
              applications.
--- a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import type { Slider as SliderPrimitive } from "radix-ui"
+import { SliderProps } from "@radix-ui/react-slider"

 import {
  HoverCard,
@@ -12,9 +12,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import { Slider } from "@/registry/new-york-v4/ui/slider"

 interface MaxLengthSelectorProps {
-  defaultValue: React.ComponentProps<
-    typeof SliderPrimitive.Root
-  >["defaultValue"]
+  defaultValue: SliderProps["defaultValue"]
 }

 export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
@@ -27,7 +25,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="maxlength">Maximum Length</Label>
-              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
@@ -1,8 +1,8 @@
 "use client"

 import * as React from "react"
+import { PopoverProps } from "@radix-ui/react-popover"
 import { Check, ChevronsUpDown } from "lucide-react"
-import type { Popover as PopoverPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"
 import { useMutationObserver } from "@/hooks/use-mutation-observer"
@@ -27,10 +27,9 @@ import {
  PopoverTrigger,
 } from "@/registry/new-york-v4/ui/popover"

-import { type Model, type ModelType } from "../data/models"
+import { Model, ModelType } from "../data/models"

-interface ModelSelectorProps
-  extends React.ComponentProps<typeof PopoverPrimitive.Root> {
+interface ModelSelectorProps extends PopoverProps {
  types: readonly ModelType[]
  models: Model[]
 }
@@ -78,7 +77,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
            >
              <div className="grid gap-2">
                <h4 className="leading-none font-medium">{peekedModel.name}</h4>
-                <div className="text-sm text-muted-foreground">
+                <div className="text-muted-foreground text-sm">
                  {peekedModel.description}
                </div>
                {peekedModel.strengths ? (
@@ -86,7 +85,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                    <h5 className="text-sm leading-none font-medium">
                      Strengths
                    </h5>
-                    <ul className="text-sm text-muted-foreground">
+                    <ul className="text-muted-foreground text-sm">
                      {peekedModel.strengths}
                    </ul>
                  </div>
--- a/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
@@ -1,6 +1,7 @@
 "use client"

 import * as React from "react"
+import { Dialog } from "@radix-ui/react-dialog"
 import { MoreHorizontal } from "lucide-react"
 import { toast } from "sonner"

@@ -15,7 +16,6 @@ import {
 } from "@/registry/new-york-v4/ui/alert-dialog"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
-  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
@@ -70,7 +70,7 @@ export function PresetActions() {
            </DialogDescription>
          </DialogHeader>
          <div className="py-6">
-            <h4 className="text-sm text-muted-foreground">
+            <h4 className="text-muted-foreground text-sm">
              Playground Warnings
            </h4>
            <div className="flex items-start justify-between gap-4 pt-3">
@@ -79,7 +79,7 @@ export function PresetActions() {
                <span className="font-semibold">
                  Show a warning when content is flagged
                </span>
-                <span className="text-sm text-muted-foreground">
+                <span className="text-muted-foreground text-sm">
                  A warning will be shown when sexual, hateful, violent or
                  self-harm content is detected.
                </span>
--- a/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
@@ -1,8 +1,8 @@
 "use client"

 import * as React from "react"
+import { PopoverProps } from "@radix-ui/react-popover"
 import { Check, ChevronsUpDown } from "lucide-react"
-import type { Popover as PopoverPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -21,10 +21,9 @@ import {
  PopoverTrigger,
 } from "@/registry/new-york-v4/ui/popover"

-import { type Preset } from "../data/presets"
+import { Preset } from "../data/presets"

-interface PresetSelectorProps
-  extends React.ComponentProps<typeof PopoverPrimitive.Root> {
+interface PresetSelectorProps extends PopoverProps {
  presets: Preset[]
 }

--- a/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
@@ -18,7 +18,7 @@ export function PresetShare() {
      <PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
        <div className="flex flex-col gap-1 text-center sm:text-left">
          <h3 className="text-lg font-semibold">Share preset</h3>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
            Anyone who has this link and an OpenAI account will be able to view
            this.
          </p>
--- a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import type { Slider as SliderPrimitive } from "radix-ui"
+import { SliderProps } from "@radix-ui/react-slider"

 import {
  HoverCard,
@@ -12,9 +12,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import { Slider } from "@/registry/new-york-v4/ui/slider"

 interface TemperatureSelectorProps {
-  defaultValue: React.ComponentProps<
-    typeof SliderPrimitive.Root
-  >["defaultValue"]
+  defaultValue: SliderProps["defaultValue"]
 }

 export function TemperatureSelector({
@@ -29,7 +27,7 @@ export function TemperatureSelector({
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="temperature">Temperature</Label>
-              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import type { Slider as SliderPrimitive } from "radix-ui"
+import { SliderProps } from "@radix-ui/react-slider"

 import {
  HoverCard,
@@ -12,9 +12,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import { Slider } from "@/registry/new-york-v4/ui/slider"

 interface TopPSelectorProps {
-  defaultValue: React.ComponentProps<
-    typeof SliderPrimitive.Root
-  >["defaultValue"]
+  defaultValue: SliderProps["defaultValue"]
 }

 export function TopPSelector({ defaultValue }: TopPSelectorProps) {
@@ -27,7 +25,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="top-p">Top P</Label>
-              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/page.tsx
+++ b/apps/v4/app/(app)/examples/playground/page.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Image from "next/image"
 import { RotateCcw } from "lucide-react"

@@ -278,7 +278,7 @@ export default function PlaygroundPage() {
                      placeholder="We're writing to [inset]. Congrats from OpenAI!"
                      className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
                    />
-                    <div className="rounded-md border bg-muted"></div>
+                    <div className="bg-muted rounded-md border"></div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button>Submit</Button>
@@ -312,7 +312,7 @@ export default function PlaygroundPage() {
                        />
                      </div>
                    </div>
-                    <div className="min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
+                    <div className="bg-muted min-h-[400px] rounded-md border lg:min-h-[700px]" />
                  </div>
                  <div className="flex items-center gap-2">
                    <Button>Submit</Button>
--- a/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
@@ -1,170 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/base/ui-rtl/radio-group"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    computeEnvironment: "بيئة الحوسبة",
-    computeDescription: "اختر بيئة الحوسبة لمجموعتك.",
-    kubernetes: "كوبرنيتس",
-    kubernetesDescription:
-      "تشغيل أحمال عمل GPU على مجموعة مُهيأة بـ K8s. هذا هو الافتراضي.",
-    virtualMachine: "جهاز افتراضي",
-    vmDescription: "الوصول إلى مجموعة VM مُهيأة لتشغيل أحمال العمل. (قريبًا)",
-    numberOfGpus: "عدد وحدات GPU",
-    gpuDescription: "يمكنك إضافة المزيد لاحقًا.",
-    decrement: "إنقاص",
-    increment: "زيادة",
-    wallpaperTinting: "تلوين الخلفية",
-    wallpaperDescription: "السماح بتلوين الخلفية.",
-  },
-  he: {
-    dir: "rtl" as const,
-    computeEnvironment: "סביבת מחשוב",
-    computeDescription: "בחר את סביבת המחשוב לאשכול שלך.",
-    kubernetes: "קוברנטיס",
-    kubernetesDescription:
-      "הפעל עומסי עבודה של GPU באשכול מוגדר K8s. זו ברירת המחדל.",
-    virtualMachine: "מכונה וירטואלית",
-    vmDescription: "גש לאשכול VM מוגדר להפעלת עומסי עבודה. (בקרוב)",
-    numberOfGpus: "מספר GPUs",
-    gpuDescription: "תוכל להוסיף עוד מאוחר יותר.",
-    decrement: "הפחת",
-    increment: "הגדל",
-    wallpaperTinting: "צביעת טפט",
-    wallpaperDescription: "אפשר לטפט להיצבע.",
-  },
-}
-
-export function AppearanceSettings() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [gpuCount, setGpuCount] = React.useState(8)
-
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
-  return (
-    <div dir={t.dir}>
-      <FieldSet>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>{t.computeEnvironment}</FieldLegend>
-            <FieldDescription>{t.computeDescription}</FieldDescription>
-            <RadioGroup defaultValue="kubernetes">
-              <FieldLabel htmlFor="rtl-kubernetes">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>{t.kubernetes}</FieldTitle>
-                    <FieldDescription>
-                      {t.kubernetesDescription}
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="kubernetes"
-                    id="rtl-kubernetes"
-                    aria-label={t.kubernetes}
-                  />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="rtl-vm">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>{t.virtualMachine}</FieldTitle>
-                    <FieldDescription>{t.vmDescription}</FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="vm"
-                    id="rtl-vm"
-                    aria-label={t.virtualMachine}
-                  />
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="rtl-gpu-count">{t.numberOfGpus}</FieldLabel>
-              <FieldDescription>{t.gpuDescription}</FieldDescription>
-            </FieldContent>
-            <ButtonGroup>
-              <Input
-                id="rtl-gpu-count"
-                value={gpuCount}
-                onChange={handleGpuInputChange}
-                size={3}
-                className="h-7 w-14! font-mono"
-                maxLength={3}
-              />
-              <Button
-                variant="outline"
-                size="icon-sm"
-                type="button"
-                aria-label={t.decrement}
-                onClick={() => handleGpuAdjustment(-1)}
-                disabled={gpuCount <= 1}
-              >
-                <IconMinus />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon-sm"
-                type="button"
-                aria-label={t.increment}
-                onClick={() => handleGpuAdjustment(1)}
-                disabled={gpuCount >= 99}
-              >
-                <IconPlus />
-              </Button>
-            </ButtonGroup>
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="rtl-tinting">
-                {t.wallpaperTinting}
-              </FieldLabel>
-              <FieldDescription>{t.wallpaperDescription}</FieldDescription>
-            </FieldContent>
-            <Switch id="rtl-tinting" defaultChecked />
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx
@@ -1,179 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    goBack: "رجوع",
-    archive: "أرشفة",
-    report: "إبلاغ",
-    snooze: "تأجيل",
-    moreOptions: "خيارات أخرى",
-    markAsRead: "تحديد كمقروء",
-    addToCalendar: "إضافة إلى التقويم",
-    addToList: "إضافة إلى القائمة",
-    labelAs: "تصنيف كـ...",
-    personal: "شخصي",
-    work: "عمل",
-    other: "أخرى",
-    trash: "حذف",
-  },
-  he: {
-    dir: "rtl" as const,
-    goBack: "חזור",
-    archive: "ארכיון",
-    report: "דווח",
-    snooze: "נודניק",
-    moreOptions: "אפשרויות נוספות",
-    markAsRead: "סמן כנקרא",
-    addToCalendar: "הוסף ליומן",
-    addToList: "הוסף לרשימה",
-    labelAs: "תייג כ...",
-    personal: "אישי",
-    work: "עבודה",
-    other: "אחר",
-    trash: "מחק",
-  },
-}
-
-export function ButtonGroupDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [label, setLabel] = React.useState("personal")
-
-  return (
-    <div dir={t.dir}>
-      <ButtonGroup>
-        <ButtonGroup className="hidden sm:flex">
-          <Button variant="outline" size="icon-sm" aria-label={t.goBack}>
-            <ArrowLeftIcon className="rtl:rotate-180" />
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline" size="sm">
-            {t.archive}
-          </Button>
-          <Button variant="outline" size="sm">
-            {t.report}
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline" size="sm">
-            {t.snooze}
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size="icon-sm"
-                  aria-label={t.moreOptions}
-                />
-              }
-            >
-              <MoreHorizontalIcon />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="start"
-              dir={t.dir}
-              data-lang={lang}
-              className="w-44"
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <MailCheckIcon />
-                  {t.markAsRead}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ArchiveIcon />
-                  {t.archive}
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <ClockIcon />
-                  {t.snooze}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <CalendarPlusIcon />
-                  {t.addToCalendar}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ListFilterIcon />
-                  {t.addToList}
-                </DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <TagIcon />
-                    {t.labelAs}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent
-                      side="left"
-                      dir={t.dir}
-                      data-lang={lang}
-                    >
-                      <DropdownMenuRadioGroup
-                        value={label}
-                        onValueChange={setLabel}
-                      >
-                        <DropdownMenuRadioItem value="personal">
-                          {t.personal}
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="work">
-                          {t.work}
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="other">
-                          {t.other}
-                        </DropdownMenuRadioItem>
-                      </DropdownMenuRadioGroup>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem variant="destructive">
-                  <Trash2Icon />
-                  {t.trash}
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </ButtonGroup>
-      </ButtonGroup>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx
@@ -1,82 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    add: "إضافة",
-    voicePlaceholder: "سجل وأرسل صوتًا...",
-    messagePlaceholder: "أرسل رسالة...",
-    voiceMode: "الوضع الصوتي",
-  },
-  he: {
-    dir: "rtl" as const,
-    add: "הוסף",
-    voicePlaceholder: "הקלט ושלח אודיו...",
-    messagePlaceholder: "שלח הודעה...",
-    voiceMode: "מצב קולי",
-  },
-}
-
-export function ButtonGroupInputGroup() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <ButtonGroup>
-        <Button variant="outline" size="icon" aria-label={t.add}>
-          <PlusIcon />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup className="flex-1">
-        <InputGroup>
-          <InputGroupInput
-            placeholder={
-              voiceEnabled ? t.voicePlaceholder : t.messagePlaceholder
-            }
-            disabled={voiceEnabled}
-          />
-          <InputGroupAddon align="inline-end">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <InputGroupButton
-                    onClick={() => setVoiceEnabled(!voiceEnabled)}
-                    data-active={voiceEnabled}
-                    className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
-                    aria-pressed={voiceEnabled}
-                    size="icon-xs"
-                    aria-label={t.voiceMode}
-                  />
-                }
-              >
-                <AudioLinesIcon />
-              </TooltipTrigger>
-              <TooltipContent>{t.voiceMode}</TooltipContent>
-            </Tooltip>
-          </InputGroupAddon>
-        </InputGroup>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx
@@ -1,56 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    previous: "السابق",
-    next: "التالي",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    previous: "הקודם",
-    next: "הבא",
-  },
-}
-
-function formatNumber(value: number, locale: string) {
-  return new Intl.NumberFormat(locale).format(value)
-}
-
-export function ButtonGroupNested() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          {formatNumber(1, t.locale)}
-        </Button>
-        <Button variant="outline" size="sm">
-          {formatNumber(2, t.locale)}
-        </Button>
-        <Button variant="outline" size="sm">
-          {formatNumber(3, t.locale)}
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="icon-sm" aria-label={t.previous}>
-          <ArrowLeftIcon className="rtl:rotate-180" />
-        </Button>
-        <Button variant="outline" size="icon-sm" aria-label={t.next}>
-          <ArrowRightIcon className="rtl:rotate-180" />
-        </Button>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx
@@ -1,83 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    copilot: "المساعد",
-    openPopover: "فتح القائمة",
-    agentTasks: "مهام الوكيل",
-    placeholder: "صف مهمتك بلغة طبيعية.",
-    startTask: "ابدأ مهمة جديدة مع المساعد",
-    description:
-      "صف مهمتك بلغة طبيعية. سيعمل المساعد في الخلفية ويفتح طلب سحب لمراجعتك.",
-  },
-  he: {
-    dir: "rtl" as const,
-    copilot: "עוזר",
-    openPopover: "פתח תפריט",
-    agentTasks: "משימות סוכן",
-    placeholder: "תאר את המשימה שלך בשפה טבעית.",
-    startTask: "התחל משימה חדשה עם העוזר",
-    description:
-      "תאר את המשימה שלך בשפה טבעית. העוזר יעבוד ברקע ויפתח בקשת משיכה לבדיקתך.",
-  },
-}
-
-export function ButtonGroupPopover() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <Button variant="outline" size="sm">
-        <BotIcon /> {t.copilot}
-      </Button>
-      <Popover>
-        <PopoverTrigger
-          render={
-            <Button
-              variant="outline"
-              size="icon-sm"
-              aria-label={t.openPopover}
-            />
-          }
-        >
-          <ChevronDownIcon />
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          dir={t.dir}
-          data-lang={lang}
-          className="p-0"
-        >
-          <div className="px-4 py-3">
-            <div className="text-sm font-medium">{t.agentTasks}</div>
-          </div>
-          <Separator />
-          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
-            <Textarea
-              placeholder={t.placeholder}
-              className="mb-4 resize-none"
-            />
-            <p className="font-medium">{t.startTask}</p>
-            <p className="text-muted-foreground">{t.description}</p>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </ButtonGroup>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx
@@ -1,78 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    title: "لا يوجد أعضاء في الفريق",
-    description: "قم بدعوة فريقك للتعاون في هذا المشروع.",
-    invite: "دعوة أعضاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    title: "אין חברי צוות",
-    description: "הזמן את הצוות שלך לשתף פעולה בפרויקט זה.",
-    invite: "הזמן חברים",
-  },
-}
-
-export function EmptyAvatarGroup() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <Empty className="flex-none border py-10" dir={t.dir}>
-      <EmptyHeader>
-        <EmptyMedia>
-          <AvatarGroup className="grayscale">
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="@maxleiter"
-              />
-              <AvatarFallback>LR</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/evilrabbit.png"
-                alt="@evilrabbit"
-              />
-              <AvatarFallback>ER</AvatarFallback>
-            </Avatar>
-          </AvatarGroup>
-        </EmptyMedia>
-        <EmptyTitle>{t.title}</EmptyTitle>
-        <EmptyDescription>{t.description}</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button size="sm">
-          <PlusIcon />
-          {t.invite}
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx
@@ -1,36 +0,0 @@
-"use client"
-
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    terms: "أوافق على الشروط والأحكام",
-  },
-  he: {
-    dir: "rtl" as const,
-    terms: "אני מסכים לתנאים וההגבלות",
-  },
-}
-
-export function FieldCheckbox() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const { dir, terms } = translations[lang]
-
-  return (
-    <div dir={dir}>
-      <FieldLabel htmlFor="checkbox-demo-rtl">
-        <Field orientation="horizontal">
-          <Checkbox id="checkbox-demo-rtl" defaultChecked />
-          <FieldLabel htmlFor="checkbox-demo-rtl" className="line-clamp-1">
-            {terms}
-          </FieldLabel>
-        </Field>
-      </FieldLabel>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/field-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-demo.tsx
@@ -1,217 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/base/ui-rtl/select"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    paymentMethod: "طريقة الدفع",
-    secureEncrypted: "جميع المعاملات آمنة ومشفرة",
-    nameOnCard: "الاسم على البطاقة",
-    namePlaceholder: "أحمد محمد",
-    cardNumber: "رقم البطاقة",
-    cardDescription: "أدخل رقمك المكون من 16 رقمًا.",
-    cvv: "رمز الأمان",
-    month: "الشهر",
-    year: "السنة",
-    billingAddress: "عنوان الفواتير",
-    billingDescription: "عنوان الفواتير المرتبط بطريقة الدفع الخاصة بك",
-    sameAsShipping: "نفس عنوان الشحن",
-    comments: "تعليقات",
-    commentsPlaceholder: "أضف أي تعليقات إضافية",
-    submit: "إرسال",
-    cancel: "إلغاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    paymentMethod: "אמצעי תשלום",
-    secureEncrypted: "כל העסקאות מאובטחות ומוצפנות",
-    nameOnCard: "שם על הכרטיס",
-    namePlaceholder: "ישראל ישראלי",
-    cardNumber: "מספר כרטיס",
-    cardDescription: "הזן את המספר בן 16 הספרות שלך.",
-    cvv: "קוד אבטחה",
-    month: "חודש",
-    year: "שנה",
-    billingAddress: "כתובת לחיוב",
-    billingDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך",
-    sameAsShipping: "זהה לכתובת המשלוח",
-    comments: "הערות",
-    commentsPlaceholder: "הוסף הערות נוספות",
-    submit: "שלח",
-    cancel: "ביטול",
-  },
-}
-
-function formatCardNumber(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
-  return `${formatter.format(1234)} ${formatter.format(5678)} ${formatter.format(9012)} ${formatter.format(3456)}`
-}
-
-function formatCvv(locale: string) {
-  return new Intl.NumberFormat(locale, { useGrouping: false }).format(123)
-}
-
-function getMonths(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, {
-    minimumIntegerDigits: 2,
-    useGrouping: false,
-  })
-  return Array.from({ length: 12 }, (_, i) => {
-    const value = String(i + 1).padStart(2, "0")
-    return { label: formatter.format(i + 1), value }
-  })
-}
-
-function getYears(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
-  return Array.from({ length: 6 }, (_, i) => {
-    const year = 2024 + i
-    return { label: formatter.format(year), value: String(year) }
-  })
-}
-
-export function FieldDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const months = getMonths(t.locale)
-  const years = getYears(t.locale)
-  const cardPlaceholder = formatCardNumber(t.locale)
-  const cvvPlaceholder = formatCvv(t.locale)
-
-  return (
-    <div dir={t.dir} className="w-full max-w-md rounded-lg border p-6">
-      <form>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>{t.paymentMethod}</FieldLegend>
-            <FieldDescription>{t.secureEncrypted}</FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="rtl-card-name">{t.nameOnCard}</FieldLabel>
-                <Input
-                  id="rtl-card-name"
-                  placeholder={t.namePlaceholder}
-                  required
-                />
-              </Field>
-              <div className="grid grid-cols-3 gap-4">
-                <Field className="col-span-2">
-                  <FieldLabel htmlFor="rtl-card-number">
-                    {t.cardNumber}
-                  </FieldLabel>
-                  <Input
-                    id="rtl-card-number"
-                    placeholder={cardPlaceholder}
-                    required
-                  />
-                  <FieldDescription>{t.cardDescription}</FieldDescription>
-                </Field>
-                <Field className="col-span-1">
-                  <FieldLabel htmlFor="rtl-cvv">{t.cvv}</FieldLabel>
-                  <Input id="rtl-cvv" placeholder={cvvPlaceholder} required />
-                </Field>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
-                  <Select defaultValue="" items={months}>
-                    <SelectTrigger id="rtl-exp-month">
-                      <SelectValue placeholder="MM" />
-                    </SelectTrigger>
-                    <SelectContent data-lang={lang} dir={t.dir}>
-                      <SelectGroup>
-                        {months.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
-                  <Select defaultValue="" items={years}>
-                    <SelectTrigger id="rtl-exp-year">
-                      <SelectValue placeholder="YYYY" />
-                    </SelectTrigger>
-                    <SelectContent data-lang={lang} dir={t.dir}>
-                      <SelectGroup>
-                        {years.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>{t.billingAddress}</FieldLegend>
-            <FieldDescription>{t.billingDescription}</FieldDescription>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <Checkbox id="rtl-same-as-shipping" defaultChecked />
-                <FieldLabel
-                  htmlFor="rtl-same-as-shipping"
-                  className="font-normal"
-                >
-                  {t.sameAsShipping}
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="rtl-comments">{t.comments}</FieldLabel>
-                <Textarea
-                  id="rtl-comments"
-                  placeholder={t.commentsPlaceholder}
-                  className="resize-none"
-                />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <Field orientation="horizontal">
-            <Button type="submit">{t.submit}</Button>
-            <Button variant="outline" type="button">
-              {t.cancel}
-            </Button>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
@@ -1,90 +0,0 @@
-"use client"
-
-import { Card, CardContent } from "@/examples/base/ui-rtl/card"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    legend: "كيف سمعت عنا؟",
-    description: "اختر الخيار الذي يصف أفضل طريقة سمعت عنا من خلالها.",
-    socialMedia: "التواصل الاجتماعي",
-    searchEngine: "البحث",
-    referral: "إحالة",
-    other: "أخرى",
-  },
-  he: {
-    dir: "rtl" as const,
-    legend: "איך שמעת עלינו?",
-    description: "בחר את האפשרות שמתארת בצורה הטובה ביותר כיצד שמעת עלינו.",
-    socialMedia: "חברתיות",
-    searchEngine: "חיפוש",
-    referral: "הפניה",
-    other: "אחר",
-  },
-}
-
-export function FieldHear() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  const options = [
-    { label: t.socialMedia, value: "social-media" },
-    { label: t.searchEngine, value: "search-engine" },
-    { label: t.referral, value: "referral" },
-    { label: t.other, value: "other" },
-  ]
-
-  return (
-    <div dir={t.dir}>
-      <Card className="border-0 py-4 shadow-none">
-        <CardContent className="px-4">
-          <form>
-            <FieldGroup>
-              <FieldSet className="gap-4">
-                <FieldLegend>{t.legend}</FieldLegend>
-                <FieldDescription className="line-clamp-1">
-                  {t.description}
-                </FieldDescription>
-                <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
-                  {options.map((option) => (
-                    <FieldLabel
-                      htmlFor={`rtl-${option.value}`}
-                      key={option.value}
-                      className="w-fit!"
-                    >
-                      <Field
-                        orientation="horizontal"
-                        className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
-                      >
-                        <Checkbox
-                          value={option.value}
-                          id={`rtl-${option.value}`}
-                          defaultChecked={option.value === "social-media"}
-                          className="-ms-6 translate-x-1 rounded-full transition-all duration-100 ease-linear data-checked:ms-0 data-checked:translate-x-0"
-                        />
-                        <FieldTitle>{option.label}</FieldTitle>
-                      </Field>
-                    </FieldLabel>
-                  ))}
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/field-slider.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-slider.tsx
@@ -1,67 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  Field,
-  FieldDescription,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Slider } from "@/examples/base/ui-rtl/slider"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    title: "نطاق السعر",
-    description: "حدد نطاق ميزانيتك",
-    ariaLabel: "نطاق السعر",
-    currency: "﷼",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    title: "טווח מחירים",
-    description: "הגדר את טווח התקציב שלך",
-    ariaLabel: "טווח מחירים",
-    currency: "₪",
-  },
-}
-
-function formatNumber(value: number, locale: string) {
-  return new Intl.NumberFormat(locale).format(value)
-}
-
-export function FieldSlider() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [value, setValue] = useState([200, 800])
-
-  return (
-    <Field dir={t.dir}>
-      <FieldTitle>{t.title}</FieldTitle>
-      <FieldDescription>
-        {t.description} ({t.currency}
-        <span className="font-medium tabular-nums">
-          {formatNumber(value[0], t.locale)}
-        </span>{" "}
-        -{" "}
-        <span className="font-medium tabular-nums">
-          {formatNumber(value[1], t.locale)}
-        </span>
-        ).
-      </FieldDescription>
-      <Slider
-        value={value}
-        onValueChange={(value) => setValue(value as [number, number])}
-        max={1000}
-        min={0}
-        step={10}
-        className="mt-2 w-full"
-        aria-label={t.ariaLabel}
-      />
-    </Field>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/index.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/index.tsx
@@ -1,92 +0,0 @@
-"use client"
-
-import { DirectionProvider } from "@/examples/base/ui-rtl/direction"
-import { FieldSeparator } from "@/examples/base/ui-rtl/field"
-
-import {
-  LanguageProvider,
-  LanguageSelector,
-  useLanguageContext,
-} from "@/components/language-selector"
-
-import { AppearanceSettings } from "./appearance-settings"
-import { ButtonGroupDemo } from "./button-group-demo"
-import { ButtonGroupInputGroup } from "./button-group-input-group"
-import { ButtonGroupNested } from "./button-group-nested"
-import { ButtonGroupPopover } from "./button-group-popover"
-import { EmptyAvatarGroup } from "./empty-avatar-group"
-import { FieldCheckbox } from "./field-checkbox"
-import { FieldDemo } from "./field-demo"
-import { FieldHear } from "./field-hear"
-import { FieldSlider } from "./field-slider"
-import { InputGroupButtonExample } from "./input-group-button"
-import { InputGroupDemo } from "./input-group-demo"
-import { ItemDemo } from "./item-demo"
-import { NotionPromptForm } from "./notion-prompt-form"
-import { SpinnerBadge } from "./spinner-badge"
-import { SpinnerEmpty } from "./spinner-empty"
-
-function RtlComponentsContent() {
-  const context = useLanguageContext()
-
-  if (!context) {
-    return null
-  }
-
-  const { language } = context
-
-  return (
-    <div
-      className="relative grid gap-8 p-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8"
-      dir="rtl"
-      data-lang={language}
-      data-slot="rtl-components"
-    >
-      <LanguageSelector
-        value={language}
-        onValueChange={context.setLanguage}
-        className="absolute -top-12 right-52 hidden h-8! data-[size=sm]:rounded-lg lg:flex"
-        languages={["ar", "he"]}
-      />
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <FieldDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <EmptyAvatarGroup />
-        <SpinnerBadge />
-        <ButtonGroupInputGroup />
-        <FieldSlider />
-        <InputGroupDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <InputGroupButtonExample />
-        <ItemDemo />
-        <FieldSeparator className="my-4">
-          {language === "he" ? "הגדרות מראה" : "إعدادات المظهر"}
-        </FieldSeparator>
-        <AppearanceSettings />
-      </div>
-      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
-        <NotionPromptForm />
-        <ButtonGroupDemo />
-        <FieldCheckbox />
-        <div className="flex justify-between gap-4">
-          <ButtonGroupNested />
-          <ButtonGroupPopover />
-        </div>
-        <FieldHear />
-        <SpinnerEmpty />
-      </div>
-    </div>
-  )
-}
-
-export function RtlComponents() {
-  return (
-    <LanguageProvider defaultLanguage="ar">
-      <DirectionProvider direction="rtl">
-        <RtlComponentsContent />
-      </DirectionProvider>
-    </LanguageProvider>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
@@ -1,97 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
-import { Label } from "@/examples/base/ui-rtl/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    inputLabel: "السعر",
-    info: "معلومات",
-    priceInfo: "أدخل السعر بالريال السعودي.",
-    priceDescription: "سيتم تحويل السعر تلقائياً.",
-    favorite: "مفضل",
-    currency: "ر.س",
-  },
-  he: {
-    dir: "rtl" as const,
-    inputLabel: "מחיר",
-    info: "מידע",
-    priceInfo: "הזן את המחיר בשקלים.",
-    priceDescription: "המחיר יומר אוטומטית.",
-    favorite: "מועדף",
-    currency: "₪",
-  },
-}
-
-export function InputGroupButtonExample() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [isFavorite, setIsFavorite] = React.useState(false)
-
-  return (
-    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
-      <Label htmlFor="input-secure-rtl" className="sr-only">
-        {t.inputLabel}
-      </Label>
-      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-rtl" className="pr-0.5!" />
-        <InputGroupAddon>
-          <Popover>
-            <PopoverTrigger
-              render={
-                <InputGroupButton
-                  variant="secondary"
-                  size="icon-xs"
-                  aria-label={t.info}
-                />
-              }
-            >
-              <IconInfoCircle />
-            </PopoverTrigger>
-            <PopoverContent
-              align="end"
-              alignOffset={10}
-              className="flex flex-col gap-1 rounded-xl text-sm"
-              data-lang={lang}
-              dir={t.dir}
-            >
-              <p className="font-medium">{t.priceInfo}</p>
-              <p>{t.priceDescription}</p>
-            </PopoverContent>
-          </Popover>
-        </InputGroupAddon>
-        <InputGroupAddon className="text-muted-foreground">
-          {t.currency}
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            onClick={() => setIsFavorite(!isFavorite)}
-            size="icon-xs"
-            aria-label={t.favorite}
-          >
-            <IconStar
-              data-favorite={isFavorite}
-              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
-            />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
@@ -1,140 +0,0 @@
-"use client"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import {
-  IconCheck,
-  IconChevronDown,
-  IconInfoCircle,
-  IconPlus,
-} from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    search: "بحث...",
-    results: "12 نتيجة",
-    example: "example.com",
-    tooltipContent: "هذا محتوى في تلميح.",
-    askSearchChat: "اسأل، ابحث أو تحدث...",
-    add: "إضافة",
-    auto: "تلقائي",
-    agent: "وكيل",
-    manual: "يدوي",
-    used: "52% مستخدم",
-    send: "إرسال",
-  },
-  he: {
-    dir: "rtl" as const,
-    search: "חיפוש...",
-    results: "12 תוצאות",
-    example: "example.com",
-    tooltipContent: "זה תוכן בטולטיפ.",
-    askSearchChat: "שאל, חפש או שוחח...",
-    add: "הוסף",
-    auto: "אוטומטי",
-    agent: "סוכן",
-    manual: "ידני",
-    used: "52% בשימוש",
-    send: "שלח",
-  },
-}
-
-export function InputGroupDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder={t.search} />
-        <InputGroupAddon>
-          <Search />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder={t.example} />
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <InputGroupButton
-                  className="rounded-full"
-                  size="icon-xs"
-                  aria-label={t.add}
-                />
-              }
-            >
-              <IconInfoCircle />
-            </TooltipTrigger>
-            <TooltipContent>{t.tooltipContent}</TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder={t.askSearchChat} />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton
-            variant="outline"
-            className="rounded-full"
-            size="icon-xs"
-            aria-label={t.add}
-          >
-            <IconPlus />
-          </InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
-              <IconChevronDown />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="top" align="start">
-              <DropdownMenuItem>{t.auto}</DropdownMenuItem>
-              <DropdownMenuItem>{t.agent}</DropdownMenuItem>
-              <DropdownMenuItem>{t.manual}</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
-          <Separator orientation="vertical" className="h-4!" />
-          <InputGroupButton
-            variant="default"
-            className="rounded-full"
-            size="icon-xs"
-          >
-            <ArrowUpIcon />
-            <span className="sr-only">{t.send}</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="shadcn" />
-        <InputGroupAddon align="inline-end">
-          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
-            <IconCheck className="size-3 text-white" />
-          </div>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/item-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/item-demo.tsx
@@ -1,64 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/examples/base/ui-rtl/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    twoFactor: "المصادقة الثنائية",
-    twoFactorDescription: "التحقق عبر البريد الإلكتروني أو رقم الهاتف.",
-    enable: "تفعيل",
-    verified: "تم التحقق من ملفك الشخصي.",
-  },
-  he: {
-    dir: "rtl" as const,
-    twoFactor: "אימות דו-שלבי",
-    twoFactorDescription: "אמת באמצעות אימייל או מספר טלפון.",
-    enable: "הפעל",
-    verified: "הפרופיל שלך אומת.",
-  },
-}
-
-export function ItemDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="flex w-full max-w-md flex-col gap-6">
-      <Item variant="outline">
-        <ItemContent>
-          <ItemTitle>{t.twoFactor}</ItemTitle>
-          <ItemDescription className="text-pretty xl:hidden 2xl:block">
-            {t.twoFactorDescription}
-          </ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button size="sm">{t.enable}</Button>
-        </ItemActions>
-      </Item>
-      <Item variant="outline" size="sm">
-        <ItemMedia>
-          <BadgeCheckIcon className="size-5" />
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>{t.verified}</ItemTitle>
-        </ItemContent>
-        <ItemActions>
-          <ChevronRightIcon className="size-4 rtl:rotate-180" />
-        </ItemActions>
-      </Item>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
@@ -1,516 +0,0 @@
-"use client"
-
-import { useMemo, useState } from "react"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/examples/base/ui-rtl/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Popover, PopoverContent } from "@/examples/base/ui-rtl/popover"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    prompt: "الأمر",
-    placeholder: "اسأل، ابحث، أو أنشئ أي شيء...",
-    addContext: "أضف سياق",
-    mentionTooltip: "اذكر شخصًا أو صفحة أو تاريخًا",
-    searchPages: "البحث في الصفحات...",
-    noPagesFound: "لم يتم العثور على صفحات",
-    pages: "الصفحات",
-    users: "المستخدمون",
-    attachFile: "إرفاق ملف",
-    selectModel: "اختر نموذج الذكاء الاصطناعي",
-    selectAgentMode: "اختر وضع الوكيل",
-    webSearch: "البحث على الويب",
-    appsIntegrations: "التطبيقات والتكاملات",
-    allSourcesAccess: "جميع المصادر التي يمكنني الوصول إليها",
-    findKnowledge: "ابحث أو استخدم المعرفة في...",
-    noKnowledgeFound: "لم يتم العثور على معرفة",
-    helpCenter: "مركز المساعدة",
-    connectApps: "ربط التطبيقات",
-    searchSourcesNote: "سنبحث فقط في المصادر المحددة هنا.",
-    send: "إرسال",
-    allSources: "جميع المصادر",
-    auto: "تلقائي",
-    agentMode: "وضع الوكيل",
-    planMode: "وضع التخطيط",
-    beta: "تجريبي",
-    workspace: "مساحة العمل",
-    meetingNotes: "ملاحظات الاجتماع",
-    projectDashboard: "لوحة المشروع",
-    ideasBrainstorming: "أفكار وعصف ذهني",
-    calendarEvents: "التقويم والأحداث",
-    documentation: "التوثيق",
-    goalsObjectives: "الأهداف والغايات",
-    budgetPlanning: "تخطيط الميزانية",
-    teamDirectory: "دليل الفريق",
-    technicalSpecs: "المواصفات التقنية",
-    analyticsReport: "تقرير التحليلات",
-  },
-  he: {
-    dir: "rtl" as const,
-    prompt: "פקודה",
-    placeholder: "שאל, חפש, או צור משהו...",
-    addContext: "הוסף הקשר",
-    mentionTooltip: "הזכר אדם, עמוד או תאריך",
-    searchPages: "חפש עמודים...",
-    noPagesFound: "לא נמצאו עמודים",
-    pages: "עמודים",
-    users: "משתמשים",
-    attachFile: "צרף קובץ",
-    selectModel: "בחר מודל AI",
-    selectAgentMode: "בחר מצב סוכן",
-    webSearch: "חיפוש באינטרנט",
-    appsIntegrations: "אפליקציות ואינטגרציות",
-    allSourcesAccess: "כל המקורות שיש לי גישה אליהם",
-    findKnowledge: "מצא או השתמש בידע ב...",
-    noKnowledgeFound: "לא נמצא ידע",
-    helpCenter: "מרכז עזרה",
-    connectApps: "חבר אפליקציות",
-    searchSourcesNote: "נחפש רק במקורות שנבחרו כאן.",
-    send: "שלח",
-    allSources: "כל המקורות",
-    auto: "אוטומטי",
-    agentMode: "מצב סוכן",
-    planMode: "מצב תכנון",
-    beta: "בטא",
-    workspace: "סביבת עבודה",
-    meetingNotes: "הערות פגישה",
-    projectDashboard: "לוח מחוונים לפרויקט",
-    ideasBrainstorming: "רעיונות וסיעור מוחות",
-    calendarEvents: "יומן ואירועים",
-    documentation: "תיעוד",
-    goalsObjectives: "מטרות ויעדים",
-    budgetPlanning: "תכנון תקציב",
-    teamDirectory: "ספריית צוות",
-    technicalSpecs: "מפרט טכני",
-    analyticsReport: "דוח אנליטיקה",
-  },
-}
-
-function MentionableIcon({
-  item,
-}: {
-  item: { type: string; title: string; image: string }
-}) {
-  return item.type === "page" ? (
-    <span className="flex size-4 items-center justify-center">
-      {item.image}
-    </span>
-  ) : (
-    <Avatar className="size-4">
-      <AvatarImage src={item.image} />
-      <AvatarFallback>{item.title[0]}</AvatarFallback>
-    </Avatar>
-  )
-}
-
-export function NotionPromptForm() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  const SAMPLE_DATA = useMemo(
-    () => ({
-      mentionable: [
-        { type: "page", title: t.meetingNotes, image: "📝" },
-        { type: "page", title: t.projectDashboard, image: "📊" },
-        { type: "page", title: t.ideasBrainstorming, image: "💡" },
-        { type: "page", title: t.calendarEvents, image: "📅" },
-        { type: "page", title: t.documentation, image: "📚" },
-        { type: "page", title: t.goalsObjectives, image: "🎯" },
-        { type: "page", title: t.budgetPlanning, image: "💰" },
-        { type: "page", title: t.teamDirectory, image: "👥" },
-        { type: "page", title: t.technicalSpecs, image: "🔧" },
-        { type: "page", title: t.analyticsReport, image: "📈" },
-        {
-          type: "user",
-          title: "shadcn",
-          image: "https://github.com/shadcn.png",
-          workspace: t.workspace,
-        },
-        {
-          type: "user",
-          title: "maxleiter",
-          image: "https://github.com/maxleiter.png",
-          workspace: t.workspace,
-        },
-        {
-          type: "user",
-          title: "evilrabbit",
-          image: "https://github.com/evilrabbit.png",
-          workspace: t.workspace,
-        },
-      ],
-      models: [
-        { name: t.auto },
-        { name: t.agentMode, badge: t.beta },
-        { name: t.planMode },
-      ],
-    }),
-    [t]
-  )
-
-  const [mentions, setMentions] = useState<string[]>([])
-  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
-  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<
-    (typeof SAMPLE_DATA.models)[0]
-  >(SAMPLE_DATA.models[0])
-  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
-
-  const grouped = useMemo(() => {
-    return SAMPLE_DATA.mentionable.reduce(
-      (acc, item) => {
-        const isAvailable = !mentions.includes(item.title)
-
-        if (isAvailable) {
-          if (!acc[item.type]) {
-            acc[item.type] = []
-          }
-          acc[item.type].push(item)
-        }
-        return acc
-      },
-      {} as Record<string, typeof SAMPLE_DATA.mentionable>
-    )
-  }, [mentions, SAMPLE_DATA])
-
-  const hasMentions = mentions.length > 0
-
-  return (
-    <div dir={t.dir}>
-      <form>
-        <Field>
-          <FieldLabel htmlFor="rtl-notion-prompt" className="sr-only">
-            {t.prompt}
-          </FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="rtl-notion-prompt"
-              placeholder={t.placeholder}
-            />
-            <InputGroupAddon align="block-start">
-              <Popover
-                open={mentionPopoverOpen}
-                onOpenChange={setMentionPopoverOpen}
-              >
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <InputGroupButton
-                        variant="outline"
-                        size={!hasMentions ? "sm" : "icon-sm"}
-                        className="rounded-full transition-transform"
-                      />
-                    }
-                    onFocusCapture={(e) => e.stopPropagation()}
-                  >
-                    <IconAt /> {!hasMentions && t.addContext}
-                  </TooltipTrigger>
-                  <TooltipContent>{t.mentionTooltip}</TooltipContent>
-                </Tooltip>
-                <PopoverContent className="p-0" align="start" dir={t.dir}>
-                  <Command>
-                    <CommandInput placeholder={t.searchPages} />
-                    <CommandList>
-                      <CommandEmpty>{t.noPagesFound}</CommandEmpty>
-                      {Object.entries(grouped).map(([type, items]) => (
-                        <CommandGroup
-                          key={type}
-                          heading={type === "page" ? t.pages : t.users}
-                        >
-                          {items.map((item) => (
-                            <CommandItem
-                              key={item.title}
-                              value={item.title}
-                              onSelect={(currentValue) => {
-                                setMentions((prev) => [...prev, currentValue])
-                                setMentionPopoverOpen(false)
-                              }}
-                            >
-                              <MentionableIcon item={item} />
-                              {item.title}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
-                {mentions.map((mention) => {
-                  const item = SAMPLE_DATA.mentionable.find(
-                    (item) => item.title === mention
-                  )
-
-                  if (!item) {
-                    return null
-                  }
-
-                  return (
-                    <InputGroupButton
-                      key={mention}
-                      size="sm"
-                      variant="secondary"
-                      className="rounded-full pr-2!"
-                      onClick={() => {
-                        setMentions((prev) => prev.filter((m) => m !== mention))
-                      }}
-                    >
-                      <MentionableIcon item={item} />
-                      {item.title}
-                      <IconX />
-                    </InputGroupButton>
-                  )
-                })}
-              </div>
-            </InputGroupAddon>
-            <InputGroupAddon align="block-end" className="gap-1">
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <InputGroupButton
-                      size="icon-sm"
-                      className="rounded-full"
-                      aria-label={t.attachFile}
-                    />
-                  }
-                >
-                  <IconPaperclip />
-                </TooltipTrigger>
-                <TooltipContent>{t.attachFile}</TooltipContent>
-              </Tooltip>
-              <DropdownMenu
-                open={modelPopoverOpen}
-                onOpenChange={setModelPopoverOpen}
-              >
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <InputGroupButton size="sm" className="rounded-full" />
-                    }
-                  >
-                    {selectedModel.name}
-                  </TooltipTrigger>
-                  <TooltipContent>{t.selectModel}</TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent
-                  side="top"
-                  align="start"
-                  className="w-48"
-                  dir={t.dir}
-                >
-                  <DropdownMenuGroup className="w-48">
-                    <DropdownMenuLabel className="text-xs text-muted-foreground">
-                      {t.selectAgentMode}
-                    </DropdownMenuLabel>
-                    {SAMPLE_DATA.models.map((model) => (
-                      <DropdownMenuCheckboxItem
-                        key={model.name}
-                        checked={model.name === selectedModel.name}
-                        onCheckedChange={(checked) => {
-                          if (checked) {
-                            setSelectedModel(model)
-                          }
-                        }}
-                        className="pr-2 *:[span:first-child]:right-auto *:[span:first-child]:left-2"
-                      >
-                        {model.name}
-                        {model.badge && (
-                          <Badge
-                            variant="secondary"
-                            className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
-                          >
-                            {model.badge}
-                          </Badge>
-                        )}
-                      </DropdownMenuCheckboxItem>
-                    ))}
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <DropdownMenu
-                open={scopeMenuOpen}
-                onOpenChange={setScopeMenuOpen}
-              >
-                <DropdownMenuTrigger
-                  render={
-                    <InputGroupButton size="sm" className="rounded-full" />
-                  }
-                >
-                  <IconWorld /> {t.allSources}
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  side="top"
-                  align="end"
-                  className="w-72"
-                  dir={t.dir}
-                >
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem
-                      render={
-                        <label htmlFor="rtl-web-search">
-                          <IconWorld /> {t.webSearch}{" "}
-                          <Switch
-                            id="rtl-web-search"
-                            className="ms-auto"
-                            defaultChecked
-                            size="sm"
-                          />
-                        </label>
-                      }
-                      onSelect={(e) => e.preventDefault()}
-                    ></DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem
-                      render={
-                        <label htmlFor="rtl-apps">
-                          <IconApps /> {t.appsIntegrations}
-                          <Switch
-                            id="rtl-apps"
-                            className="ms-auto"
-                            defaultChecked
-                            size="sm"
-                          />
-                        </label>
-                      }
-                      onSelect={(e) => e.preventDefault()}
-                    ></DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconCircleDashedPlus /> {t.allSourcesAccess}
-                    </DropdownMenuItem>
-                    <DropdownMenuSub>
-                      <DropdownMenuSubTrigger>
-                        <Avatar className="size-4">
-                          <AvatarImage src="https://github.com/shadcn.png" />
-                          <AvatarFallback>CN</AvatarFallback>
-                        </Avatar>
-                        shadcn
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuSubContent
-                        className="w-72 rounded-lg p-0"
-                        dir={t.dir}
-                        side="left"
-                      >
-                        <Command>
-                          <CommandInput
-                            placeholder={t.findKnowledge}
-                            autoFocus
-                          />
-                          <CommandList>
-                            <CommandEmpty>{t.noKnowledgeFound}</CommandEmpty>
-                            <CommandGroup>
-                              {SAMPLE_DATA.mentionable
-                                .filter((item) => item.type === "user")
-                                .map((user) => (
-                                  <CommandItem
-                                    key={user.title}
-                                    value={user.title}
-                                    onSelect={() => {
-                                      console.log("Selected user:", user.title)
-                                    }}
-                                  >
-                                    <Avatar className="size-4">
-                                      <AvatarImage src={user.image} />
-                                      <AvatarFallback>
-                                        {user.title[0]}
-                                      </AvatarFallback>
-                                    </Avatar>
-                                    {user.title}{" "}
-                                    <span className="text-muted-foreground">
-                                      -{" "}
-                                      {
-                                        (user as { workspace?: string })
-                                          .workspace
-                                      }
-                                    </span>
-                                  </CommandItem>
-                                ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuSub>
-                    <DropdownMenuItem>
-                      <IconBook /> {t.helpCenter}
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem>
-                      <IconPlus /> {t.connectApps}
-                    </DropdownMenuItem>
-                    <DropdownMenuLabel className="text-xs text-muted-foreground">
-                      {t.searchSourcesNote}
-                    </DropdownMenuLabel>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <InputGroupButton
-                aria-label={t.send}
-                className="ms-auto rounded-full"
-                variant="default"
-                size="icon-sm"
-              >
-                <IconArrowUp />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </form>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx
@@ -1,44 +0,0 @@
-"use client"
-
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    syncing: "جارٍ المزامنة",
-    updating: "جارٍ التحديث",
-    loading: "جارٍ التحميل",
-  },
-  he: {
-    dir: "rtl" as const,
-    syncing: "מסנכרן",
-    updating: "מעדכן",
-    loading: "טוען",
-  },
-}
-
-export function SpinnerBadge() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="flex items-center gap-2">
-      <Badge>
-        <Spinner />
-        {t.syncing}
-      </Badge>
-      <Badge variant="secondary">
-        <Spinner />
-        {t.updating}
-      </Badge>
-      <Badge variant="outline">
-        <Spinner />
-        {t.loading}
-      </Badge>
-    </div>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx
@@ -1,52 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    title: "جارٍ معالجة طلبك",
-    description: "يرجى الانتظار بينما نعالج طلبك. لا تقم بتحديث الصفحة.",
-    cancel: "إلغاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    title: "מעבד את הבקשה שלך",
-    description: "אנא המתן בזמן שאנו מעבדים את בקשתך. אל תרענן את הדף.",
-    cancel: "ביטול",
-  },
-}
-
-export function SpinnerEmpty() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <Empty className="w-full border md:p-6" dir={t.dir}>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Spinner />
-        </EmptyMedia>
-        <EmptyTitle>{t.title}</EmptyTitle>
-        <EmptyDescription>{t.description}</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button variant="outline" size="sm">
-          {t.cancel}
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}
--- a/apps/v4/app/(app)/examples/rtl/page.tsx
+++ b/apps/v4/app/(app)/examples/rtl/page.tsx
@@ -1,14 +0,0 @@
-import { type Metadata } from "next"
-
-import { RtlComponents } from "./components"
-
-export const metadata: Metadata = {
-  title: "RTL",
-  description: "RTL example page with right-to-left language support.",
-}
-
-export function RtlPage() {
-  return <RtlComponents />
-}
-
-export default RtlPage
--- a/apps/v4/app/(app)/examples/tasks/components/columns.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
@@ -1,12 +1,12 @@
 "use client"

-import { type ColumnDef } from "@tanstack/react-table"
+import { ColumnDef } from "@tanstack/react-table"

 import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"

 import { labels, priorities, statuses } from "../data/data"
-import { type Task } from "../data/schema"
+import { Task } from "../data/schema"
 import { DataTableColumnHeader } from "./data-table-column-header"
 import { DataTableRowActions } from "./data-table-row-actions"

@@ -79,7 +79,7 @@ export const columns: ColumnDef<Task>[] = [
      return (
        <div className="flex w-[100px] items-center gap-2">
          {status.icon && (
-            <status.icon className="size-4 text-muted-foreground" />
+            <status.icon className="text-muted-foreground size-4" />
          )}
          <span>{status.label}</span>
        </div>
@@ -106,7 +106,7 @@ export const columns: ColumnDef<Task>[] = [
      return (
        <div className="flex items-center gap-2">
          {priority.icon && (
-            <priority.icon className="size-4 text-muted-foreground" />
+            <priority.icon className="text-muted-foreground size-4" />
          )}
          <span>{priority.label}</span>
        </div>
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -1,4 +1,4 @@
-import { type Column } from "@tanstack/react-table"
+import { Column } from "@tanstack/react-table"
 import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -33,7 +33,7 @@ export function DataTableColumnHeader<TData, TValue>({
          <Button
            variant="ghost"
            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
          >
            <span>{title}</span>
            {column.getIsSorted() === "desc" ? (
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { type Column } from "@tanstack/react-table"
+import { Column } from "@tanstack/react-table"
 import { Check, PlusCircle } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -107,18 +107,18 @@ export function DataTableFacetedFilter<TData, TValue>({
                      className={cn(
                        "flex size-4 items-center justify-center rounded-[4px] border",
                        isSelected
-                          ? "border-primary bg-primary text-primary-foreground"
+                          ? "bg-primary border-primary text-primary-foreground"
                          : "border-input [&_svg]:invisible"
                      )}
                    >
-                      <Check className="size-3.5 text-primary-foreground" />
+                      <Check className="text-primary-foreground size-3.5" />
                    </div>
                    {option.icon && (
-                      <option.icon className="size-4 text-muted-foreground" />
+                      <option.icon className="text-muted-foreground size-4" />
                    )}
                    <span>{option.label}</span>
                    {facets?.get(option.value) && (
-                      <span className="ml-auto flex size-4 items-center justify-center font-mono text-xs text-muted-foreground">
+                      <span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
                        {facets.get(option.value)}
                      </span>
                    )}
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -1,4 +1,4 @@
-import { type Table } from "@tanstack/react-table"
+import { Table } from "@tanstack/react-table"
 import {
  ChevronLeft,
  ChevronRight,
@@ -24,7 +24,7 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
  return (
    <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
+      <div className="text-muted-foreground flex-1 text-sm">
        {table.getFilteredSelectedRowModel().rows.length} of{" "}
        {table.getFilteredRowModel().rows.length} row(s) selected.
      </div>
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { type Row } from "@tanstack/react-table"
+import { Row } from "@tanstack/react-table"
 import { MoreHorizontal } from "lucide-react"

 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -36,7 +36,7 @@ export function DataTableRowActions<TData>({
        <Button
          variant="ghost"
          size="icon"
-          className="size-8 data-[state=open]:bg-muted"
+          className="data-[state=open]:bg-muted size-8"
        >
          <MoreHorizontal />
          <span className="sr-only">Open menu</span>
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { type Table } from "@tanstack/react-table"
+import { Table } from "@tanstack/react-table"
 import { X } from "lucide-react"

 import { Button } from "@/registry/new-york-v4/ui/button"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
@@ -1,6 +1,7 @@
 "use client"

-import { type Table } from "@tanstack/react-table"
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { Table } from "@tanstack/react-table"
 import { Settings2 } from "lucide-react"

 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -10,7 +11,6 @@ import {
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
-  DropdownMenuTrigger,
 } from "@/registry/new-york-v4/ui/dropdown-menu"

 export function DataTableViewOptions<TData>({
--- a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
@@ -2,6 +2,8 @@

 import * as React from "react"
 import {
+  ColumnDef,
+  ColumnFiltersState,
  flexRender,
  getCoreRowModel,
  getFacetedRowModel,
@@ -9,11 +11,9 @@ import {
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
+  SortingState,
  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type SortingState,
-  type VisibilityState,
+  VisibilityState,
 } from "@tanstack/react-table"

 import {
--- a/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
@@ -30,7 +30,7 @@ export function UserNav() {
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm leading-none font-medium">shadcn</p>
-            <p className="text-xs leading-none text-muted-foreground">
+            <p className="text-muted-foreground text-xs leading-none">
              m@example.com
            </p>
          </div>
--- a/apps/v4/app/(app)/examples/tasks/page.tsx
+++ b/apps/v4/app/(app)/examples/tasks/page.tsx
@@ -1,6 +1,6 @@
 import { promises as fs } from "fs"
 import path from "path"
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Image from "next/image"
 import { z } from "zod"

--- a/apps/v4/app/(app)/layout.tsx
+++ b/apps/v4/app/(app)/layout.tsx
@@ -3,10 +3,7 @@ import { SiteHeader } from "@/components/site-header"

 export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
-    <div
-      data-slot="layout"
-      className="relative z-10 flex min-h-svh flex-col bg-background"
-    >
+    <div className="bg-background relative z-10 flex min-h-svh flex-col">
      <SiteHeader />
      <main className="flex flex-1 flex-col">{children}</main>
      <SiteFooter />
--- a/apps/v4/app/(app)/llm/[[...slug]]/route.ts
+++ b/apps/v4/app/(app)/llm/[[...slug]]/route.ts
@@ -3,41 +3,22 @@ import { NextResponse, type NextRequest } from "next/server"

 import { processMdxForLLMs } from "@/lib/llm"
 import { source } from "@/lib/source"
-import { getActiveStyle, type Style } from "@/registry/_legacy-styles"

 export const revalidate = false

-function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) {
-  // Detect base from URL: /docs/components/base/... or /docs/components/radix/...
-  if (slug && slug[0] === "components" && slug[1]) {
-    if (slug[1] === "base") {
-      return "base-nova"
-    }
-    if (slug[1] === "radix") {
-      return "new-york-v4"
-    }
-  }
-  return fallbackStyle
-}
-
 export async function GET(
  _req: NextRequest,
-  { params }: { params: Promise<{ slug?: string[] }> }
+  { params }: { params: Promise<{ slug: string[] }> }
 ) {
-  const [{ slug }, activeStyle] = await Promise.all([params, getActiveStyle()])
-
+  const slug = (await params).slug
  const page = source.getPage(slug)

  if (!page) {
    notFound()
  }

-  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
-
-  const processedContent = processMdxForLLMs(
-    await page.data.getText("raw"),
-    effectiveStyle as Style["name"]
-  )
+  // @ts-expect-error - revisit fumadocs types.
+  const processedContent = processMdxForLLMs(page.data.content)

  return new NextResponse(processedContent, {
    headers: {
--- a/apps/v4/app/(app)/themes/layout.tsx
+++ b/apps/v4/app/(app)/themes/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import { Metadata } from "next"
 import Link from "next/link"

 import { Announcement } from "@/components/announcement"
--- a/apps/v4/app/(app)/themes/page.tsx
+++ b/apps/v4/app/(app)/themes/page.tsx
@@ -12,8 +12,8 @@ export default function ThemesPage() {
          <ThemeCustomizer />
        </div>
      </div>
-      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
-        <div className="container flex flex-1 flex-col theme-container">
+      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
+        <div className="theme-container container flex flex-1 flex-col">
          <CardsDemo />
        </div>
      </div>
--- a/apps/v4/app/(create)/components/accent-picker.tsx
+++ b/apps/v4/app/(create)/components/accent-picker.tsx
@@ -1,104 +0,0 @@
-"use client"
-
-import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
-import { LockButton } from "@/app/(create)/components/lock-button"
-import {
-  Picker,
-  PickerContent,
-  PickerGroup,
-  PickerRadioGroup,
-  PickerRadioItem,
-  PickerTrigger,
-} from "@/app/(create)/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-export function MenuAccentPicker({
-  isMobile,
-  anchorRef,
-}: {
-  isMobile: boolean
-  anchorRef: React.RefObject<HTMLDivElement | null>
-}) {
-  const [params, setParams] = useDesignSystemSearchParams()
-
-  const currentAccent = MENU_ACCENTS.find(
-    (accent) => accent.value === params.menuAccent
-  )
-
-  return (
-    <div className="group/picker relative pr-3 md:pr-0">
-      <Picker>
-        <PickerTrigger>
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-xs text-muted-foreground">Menu Accent</div>
-            <div className="text-sm font-medium text-foreground">
-              {currentAccent?.label}
-            </div>
-          </div>
-          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="128"
-              height="128"
-              viewBox="0 0 24 24"
-              fill="none"
-              className="size-4 text-foreground"
-            >
-              <path
-                d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                data-accent={currentAccent?.value}
-                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
-              ></path>
-              <path
-                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                data-accent={currentAccent?.value}
-                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
-              ></path>
-            </svg>
-          </div>
-        </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-        >
-          <PickerRadioGroup
-            value={currentAccent?.value}
-            onValueChange={(value) => {
-              setParams({ menuAccent: value as MenuAccentValue })
-            }}
-          >
-            <PickerGroup>
-              {MENU_ACCENTS.map((accent) => (
-                <PickerRadioItem
-                  key={accent.value}
-                  value={accent.value}
-                  closeOnClick={isMobile}
-                  disabled={
-                    accent.value === "bold" &&
-                    (params.menuColor === "default-translucent" ||
-                      params.menuColor === "inverted-translucent")
-                  }
-                >
-                  {accent.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="menuAccent"
-        className="absolute top-1/2 right-8 -translate-y-1/2"
-      />
-    </div>
-  )
-}
--- a/apps/v4/app/(create)/components/action-menu.tsx
+++ b/apps/v4/app/(create)/components/action-menu.tsx
@@ -1,88 +0,0 @@
-"use client"
-
-import Script from "next/script"
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/examples/base/ui/command"
-import { type RegistryItem } from "shadcn/schema"
-
-import { useActionMenu } from "@/app/(create)/hooks/use-action-menu"
-
-export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
-
-export function ActionMenu({
-  itemsByBase,
-}: {
-  itemsByBase: Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
-}) {
-  const {
-    activeRegistryName,
-    getCommandValue,
-    groups,
-    handleSelect,
-    open,
-    setOpen,
-  } = useActionMenu(itemsByBase)
-
-  return (
-    <CommandDialog open={open} onOpenChange={setOpen} className="animate-none!">
-      <Command loop>
-        <CommandInput placeholder="Search" />
-        <CommandList>
-          <CommandEmpty>No items found.</CommandEmpty>
-          <CommandGroup>
-            {groups.map((group) =>
-              group.items.map((item) => (
-                <CommandItem
-                  key={item.id}
-                  value={getCommandValue(item)}
-                  data-checked={activeRegistryName === item.registryName}
-                  className="px-2"
-                  onSelect={() => {
-                    handleSelect(item.registryName)
-                  }}
-                >
-                  {item.label}
-                </CommandItem>
-              ))
-            )}
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </CommandDialog>
-  )
-}
-
-export function ActionMenuScript() {
-  return (
-    <Script
-      id="design-system-listener"
-      strategy="beforeInteractive"
-      dangerouslySetInnerHTML={{
-        __html: `
-            (function() {
-              // Forward Cmd/Ctrl + K (and P) to parent
-              document.addEventListener('keydown', function(e) {
-                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  if (window.parent && window.parent !== window) {
-                    window.parent.postMessage({
-                      type: '${CMD_K_FORWARD_TYPE}',
-                      key: e.key
-                    }, '*');
-                  }
-                }
-              });
-
-            })();
-          `,
-      }}
-    />
-  )
-}
--- a/Show More
+++ b/Show More