fix

.changeset/kind-candies-float.md

@@ -1,5 +0,0 @@
----
-"shadcn": patch
----
-
-Fix: skip all transforms for universal registry items

.github/ISSUE_TEMPLATE/registry_directory.yml

@@ -0,0 +1,63 @@
+name: Add registry to directory
+description: Add your registry to the directory
+title: "[Registry Directory]: "
+labels: ["registry", "directory"]
+assignees: []
+body:
+  - type: input
+    id: name
+    attributes:
+      label: Name
+      description: The name of your registry. This is also the namespace.
+      placeholder: e.g., "@acme"
+    validations:
+      required: true
+
+  - type: input
+    id: url
+    attributes:
+      label: URL
+      description: The URL to your registry index. Use {name} placeholder.
+      placeholder: https://ui.acme.com/r/{name}.json
+    validations:
+      required: true
+
+  - type: input
+    id: homepage
+    attributes:
+      label: Homepage
+      description: The URL to your registry homepage. This is where users can browse your registry.
+      placeholder: https://ui.acme.com
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Briefly describe what is your registry and what type of components or code it distributes.
+      placeholder: 
+    validations:
+      required: true
+
+  - type: textarea
+    id: logo
+    attributes:
+      label: Logo
+      description: Add your SVG logo here.
+      placeholder: 
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: requirements
+    attributes:
+      label: Checklist
+      description: Verify that your registry meets the following requirements.
+      options:
+        - label: The registry must be open source and publicly accessible.
+        - label: The registry must be a valid JSON file that conforms to the [registry schema](https://ui.shadcn.com/docs/registry/registry-json) specification.
+        - label: The `files` array, if present on your registry items, must NOT include a `content` property.
+        - label: I've attached a square SVG logo to this issue
+    validations:
+      required: true

.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' }}
@@ -29,15 +24,12 @@ jobs:
           version: 9.0.6
 
       - name: Use Node.js 20
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
+          version: 9.0.6
           node-version: 20
-          registry-url: "https://registry.npmjs.org"
           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"

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -1,8 +1,10 @@
 "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 { Button } from "@/registry/new-york-v4/ui/button"
+import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
   Field,
   FieldContent,
@@ -13,11 +15,13 @@ 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 {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
 
 export function AppearanceSettings() {
   const [gpuCount, setGpuCount] = React.useState(8)

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,
+  ListFilterIcon,
+  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")

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)

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>

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 (

apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx

@@ -1,5 +1,11 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
-import { Button } from "@/examples/radix/ui/button"
+import { PlusIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -7,8 +13,7 @@ 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 (

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 (

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,16 +8,16 @@ 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,
   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 (

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 = [
   {

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

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"

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)

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 (

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 (

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

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -1,5 +1,5 @@
-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 (

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 (

apps/v4/app/(app)/(root)/page.tsx

@@ -1,6 +1,8 @@
 import { type Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
+import { PlusSignIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
 
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
@@ -56,7 +58,10 @@ export default function IndexPage() {
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm" className="h-[31px] rounded-lg">
-            <Link href="/docs/installation">Get Started</Link>
+            <Link href="/create">
+              <HugeiconsIcon icon={PlusSignIcon} />
+              New Project
+            </Link>
           </Button>
           <Button asChild size="sm" variant="ghost" className="rounded-lg">
             <Link href="/docs/components">View Components</Link>

apps/v4/app/(app)/charts/[type]/page.tsx

@@ -2,11 +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 { ChartDisplay } from "@/components/chart-display"
 import { getActiveStyle } from "@/registry/_legacy-styles"
 import { charts } from "@/app/(app)/charts/charts"
 
@@ -48,26 +44,6 @@ export default async function ChartPage({ params }: ChartPageProps) {
   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">
       <h2 className="sr-only">
@@ -75,14 +51,16 @@ 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}
+              styleName={activeStyle.name}
               className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            />
+            >
+              <chart.component />
+            </ChartDisplay>
           ) : (
             <div
               key={`empty-${index}`}

apps/v4/app/(app)/charts/layout.tsx

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

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -1,15 +1,21 @@
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUpRight,
+} from "@tabler/icons-react"
+import fm from "front-matter"
 import { findNeighbour } from "fumadocs-core/page-tree"
+import z from "zod"
 
 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
@@ -80,110 +86,126 @@ export default async function Page(props: {
   const doc = page.data
   const MDX = doc.body
   const neighbours = findNeighbour(source.pageTree, page.url)
+
   const raw = await page.data.getText("raw")
+  const { attributes } = fm(raw)
+  const { links } = z
+    .object({
+      links: z
+        .object({
+          doc: z.string().optional(),
+          api: z.string().optional(),
+        })
+        .optional(),
+    })
+    .parse(attributes)
 
   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 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-start justify-between">
-                <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
+                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
                   {doc.title}
                 </h1>
-                <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:py-1.5 sm:backdrop-blur-none">
+                <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 page={raw} url={absoluteUrl(page.url)} />
-                  <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>
+                  {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-muted-foreground text-[1.05rem] 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-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg: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" />
         {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">
             <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>

apps/v4/app/(app)/docs/layout.tsx

@@ -9,10 +9,7 @@ export default function DocsLayout({
 }) {
   return (
     <div className="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider
-        className="3xl:fixed:container 3xl:fixed:px-3 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)]"
-        style={{ "--sidebar-width": "220px" } 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>

apps/v4/app/(app)/llm/[[...slug]]/route.ts

@@ -3,23 +3,10 @@ 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"
+import { getActiveStyle } 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[] }> }
@@ -32,11 +19,9 @@ export async function GET(
     notFound()
   }
 
-  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
-
   const processedContent = processMdxForLLMs(
     await page.data.getText("raw"),
-    effectiveStyle as Style["name"]
+    activeStyle.name
   )
 
   return new NextResponse(processedContent, {

apps/v4/app/(create)/components/accent-picker.tsx

@@ -26,8 +26,8 @@ export function MenuAccentPicker({
   )
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Menu Accent</div>
@@ -35,7 +35,7 @@ export function MenuAccentPicker({
               {currentAccent?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="128"
@@ -65,31 +65,31 @@ export function MenuAccentPicker({
             </svg>
           </div>
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
+        <LockButton
+          param="menuAccent"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentAccent?.value}
+          onValueChange={(value) => {
+            setParams({ menuAccent: value as MenuAccentValue })
+          }}
         >
-          <PickerRadioGroup
-            value={currentAccent?.value}
-            onValueChange={(value) => {
-              setParams({ menuAccent: value as MenuAccentValue })
-            }}
-          >
-            <PickerGroup>
-              {MENU_ACCENTS.map((accent) => (
-                <PickerRadioItem key={accent.value} value={accent.value}>
-                  {accent.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="menuAccent"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+          <PickerGroup>
+            {MENU_ACCENTS.map((accent) => (
+              <PickerRadioItem key={accent.value} value={accent.value}>
+                {accent.label}
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/base-color-picker.tsx

@@ -35,8 +35,8 @@ export function BaseColorPicker({
   )
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Base Color</div>
@@ -54,72 +54,72 @@ export function BaseColorPicker({
                     ]?.["muted-foreground"],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
             />
           )}
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-        >
-          <PickerRadioGroup
-            value={currentBaseColor?.name}
-            onValueChange={(value) => {
-              if (value === "dark") {
-                setTheme(resolvedTheme === "dark" ? "light" : "dark")
-                return
-              }
+        <LockButton
+          param="baseColor"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentBaseColor?.name}
+          onValueChange={(value) => {
+            if (value === "dark") {
+              setTheme(resolvedTheme === "dark" ? "light" : "dark")
+              return
+            }
 
-              setParams({ baseColor: value as BaseColorName })
-            }}
-          >
-            <PickerGroup>
-              {BASE_COLORS.map((baseColor) => (
-                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
-                  <div className="flex items-center gap-2">
-                    {mounted && resolvedTheme && (
-                      <div
-                        style={
-                          {
-                            "--color":
-                              baseColor.cssVars?.[
-                                resolvedTheme as "light" | "dark"
-                              ]?.["muted-foreground"],
-                          } as React.CSSProperties
-                        }
-                        className="size-4 rounded-full bg-(--color)"
-                      />
-                    )}
-                    {baseColor.title}
-                  </div>
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-            <PickerSeparator />
-            <PickerGroup>
-              <PickerItem
-                onClick={() => {
-                  setTheme(resolvedTheme === "dark" ? "light" : "dark")
-                }}
-              >
-                <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                  <div>
-                    Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
-                  </div>
-                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                    Base colors are easier to see in dark mode.
-                  </div>
+            setParams({ baseColor: value as BaseColorName })
+          }}
+        >
+          <PickerGroup>
+            {BASE_COLORS.map((baseColor) => (
+              <PickerRadioItem key={baseColor.name} value={baseColor.name}>
+                <div className="flex items-center gap-2">
+                  {mounted && resolvedTheme && (
+                    <div
+                      style={
+                        {
+                          "--color":
+                            baseColor.cssVars?.[
+                              resolvedTheme as "light" | "dark"
+                            ]?.["muted-foreground"],
+                        } as React.CSSProperties
+                      }
+                      className="size-4 rounded-full bg-(--color)"
+                    />
+                  )}
+                  {baseColor.title}
                 </div>
-              </PickerItem>
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="baseColor"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            <PickerItem
+              onClick={() => {
+                setTheme(resolvedTheme === "dark" ? "light" : "dark")
+              }}
+            >
+              <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                <div>
+                  Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
+                </div>
+                <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                  Base colors are easier to see in dark mode.
+                </div>
+              </div>
+            </PickerItem>
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/base-picker.tsx

@@ -50,7 +50,7 @@ export function BasePicker({
         </div>
         {currentBase?.meta?.logo && (
           <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[svg]:size-4"
             dangerouslySetInnerHTML={{
               __html: currentBase.meta.logo,
             }}

apps/v4/app/(create)/components/customizer-controls.tsx

@@ -2,11 +2,13 @@
 
 import * as React from "react"
 import Script from "next/script"
-import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
+import { DiceFaces05Icon, Undo02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
+import { cn } from "@/lib/utils"
 import {
   BASE_COLORS,
+  DEFAULT_CONFIG,
   getThemesForBaseColor,
   iconLibraries,
   MENU_ACCENTS,
@@ -16,11 +18,6 @@ import {
 } from "@/registry/config"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 import { useLocks } from "@/app/(create)/hooks/use-locks"
 import { FONTS } from "@/app/(create)/lib/fonts"
 import {
@@ -36,10 +33,26 @@ function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
 }
 
-export function RandomButton() {
+export function CustomizerControls({ className }: { className?: string }) {
   const { locks } = useLocks()
   const [params, setParams] = useDesignSystemSearchParams()
 
+  const handleReset = React.useCallback(() => {
+    setParams({
+      base: params.base, // Keep the current base value
+      style: DEFAULT_CONFIG.style,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      theme: DEFAULT_CONFIG.theme,
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      font: DEFAULT_CONFIG.font,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      template: DEFAULT_CONFIG.template,
+      item: "preview",
+    })
+  }, [setParams, params.base])
+
   const handleRandomize = React.useCallback(() => {
     // Use current value if locked, otherwise randomize.
     const baseColor = locks.has("baseColor")
@@ -117,30 +130,33 @@ export function RandomButton() {
   }, [handleRandomize])
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleRandomize}
-          className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-        >
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Shuffle</div>
-            <div className="text-foreground text-sm font-medium">
-              Try Random
-            </div>
-          </div>
-          <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
-          <Kbd className="bg-foreground/10 text-foreground hidden md:flex">
-            R
-          </Kbd>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="left">
-        Use browser back/forward to navigate history
-      </TooltipContent>
-    </Tooltip>
+    <div className={cn("items-center gap-0", className)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleRandomize}
+        className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+      >
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-muted-foreground text-xs">Shuffle</div>
+          <div className="text-foreground text-sm font-medium">Try Random</div>
+        </div>
+        <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
+        <Kbd className="bg-foreground/10 text-foreground hidden md:flex">R</Kbd>
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleReset}
+        className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+      >
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-muted-foreground text-xs">Reset</div>
+          <div className="text-foreground text-sm font-medium">Start Over</div>
+        </div>
+        <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
+      </Button>
+    </div>
   )
 }
 

apps/v4/app/(create)/components/customizer.tsx

@@ -7,17 +7,15 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
 import { FieldGroup } from "@/registry/new-york-v4/ui/field"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
 import { BasePicker } from "@/app/(create)/components/base-picker"
+import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
 import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
 import { PresetPicker } from "@/app/(create)/components/preset-picker"
 import { RadiusPicker } from "@/app/(create)/components/radius-picker"
-import { RandomButton } from "@/app/(create)/components/random-button"
-import { ResetButton } from "@/app/(create)/components/reset-button"
 import { StylePicker } from "@/app/(create)/components/style-picker"
 import { ThemePicker } from "@/app/(create)/components/theme-picker"
 import { FONTS } from "@/app/(create)/lib/fonts"
@@ -77,10 +75,7 @@ export function Customizer() {
           <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
-          <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
-            <RandomButton />
-            <ResetButton />
-          </div>
+          <CustomizerControls className="mt-auto hidden w-full flex-col md:flex" />
         </FieldGroup>
       </div>
     </div>

apps/v4/app/(create)/components/design-system-provider.tsx

@@ -7,23 +7,21 @@ import {
   DEFAULT_CONFIG,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
+import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
 import { FONTS } from "@/app/(create)/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function DesignSystemProvider({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const [
-    { style, theme, font, baseColor, menuAccent, menuColor, radius },
-    setSearchParams,
-  ] = useDesignSystemSearchParams({
-    shallow: true, // No need to go through the server…
-    history: "replace", // …or push updates into the iframe history.
-  })
-  useIframeMessageListener("design-system-params", setSearchParams)
+  const style = useDesignSystemParam("style")
+  const theme = useDesignSystemParam("theme")
+  const font = useDesignSystemParam("font")
+  const baseColor = useDesignSystemParam("baseColor")
+  const menuAccent = useDesignSystemParam("menuAccent")
+  const menuColor = useDesignSystemParam("menuColor")
+  const radius = useDesignSystemParam("radius")
   const [isReady, setIsReady] = React.useState(false)
 
   // Use useLayoutEffect for synchronous style updates to prevent flash.

apps/v4/app/(create)/components/font-picker.tsx

@@ -39,8 +39,8 @@ export function FontPicker({
   )
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Font</div>
@@ -49,55 +49,54 @@ export function FontPicker({
             </div>
           </div>
           <div
-            className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
+            className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base"
             style={{ fontFamily: currentFont?.font.style.fontFamily }}
           >
             Aa
           </div>
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-          className="max-h-80 md:w-72"
+        <LockButton
+          param="font"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+        className="max-h-80 md:w-72"
+      >
+        <PickerRadioGroup
+          value={currentFont?.value}
+          onValueChange={(value) => {
+            setParams({ font: value as FontValue })
+          }}
         >
-          <PickerRadioGroup
-            value={currentFont?.value}
-            onValueChange={(value) => {
-              setParams({ font: value as FontValue })
-            }}
-          >
-            <PickerGroup>
-              {fonts.map((font, index) => (
-                <React.Fragment key={font.value}>
-                  <PickerRadioItem value={font.value}>
-                    <Item size="xs">
-                      <ItemContent className="gap-1">
-                        <ItemTitle className="text-muted-foreground text-xs font-medium">
-                          {font.name}
-                        </ItemTitle>
-                        <ItemDescription
-                          style={{ fontFamily: font.font.style.fontFamily }}
-                        >
-                          Designers love packing quirky glyphs into test
-                          phrases.
-                        </ItemDescription>
-                      </ItemContent>
-                    </Item>
-                  </PickerRadioItem>
-                  {index < fonts.length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="font"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+          <PickerGroup>
+            {fonts.map((font, index) => (
+              <React.Fragment key={font.value}>
+                <PickerRadioItem value={font.value}>
+                  <Item size="xs">
+                    <ItemContent className="gap-1">
+                      <ItemTitle className="text-muted-foreground text-xs font-medium">
+                        {font.name}
+                      </ItemTitle>
+                      <ItemDescription
+                        style={{ fontFamily: font.font.style.fontFamily }}
+                      >
+                        Designers love packing quirky glyphs into test phrases.
+                      </ItemDescription>
+                    </ItemContent>
+                  </Item>
+                </PickerRadioItem>
+                {index < fonts.length - 1 && (
+                  <PickerSeparator className="opacity-50" />
+                )}
+              </React.Fragment>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/icon-library-picker.tsx

@@ -39,18 +39,6 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
-const IconPhosphor = lazy(() =>
-  import("@/registry/icons/icon-phosphor").then((mod) => ({
-    default: mod.IconPhosphor,
-  }))
-)
-
-const IconRemixicon = lazy(() =>
-  import("@/registry/icons/icon-remixicon").then((mod) => ({
-    default: mod.IconRemixicon,
-  }))
-)
-
 const PREVIEW_ICONS = {
   lucide: [
     "CopyIcon",
@@ -100,38 +88,6 @@ const PREVIEW_ICONS = {
     "ArrowDown01Icon",
     "ArrowRight01Icon",
   ],
-  phosphor: [
-    "CopyIcon",
-    "WarningCircleIcon",
-    "TrashIcon",
-    "ShareIcon",
-    "BagIcon",
-    "DotsThreeIcon",
-    "SpinnerIcon",
-    "PlusIcon",
-    "MinusIcon",
-    "ArrowLeftIcon",
-    "ArrowRightIcon",
-    "CheckIcon",
-    "CaretDownIcon",
-    "CaretRightIcon",
-  ],
-  remixicon: [
-    "RiFileCopyLine",
-    "RiErrorWarningLine",
-    "RiDeleteBinLine",
-    "RiShareLine",
-    "RiShoppingBagLine",
-    "RiMoreLine",
-    "RiLoaderLine",
-    "RiAddLine",
-    "RiSubtractLine",
-    "RiArrowLeftLine",
-    "RiArrowRightLine",
-    "RiCheckLine",
-    "RiArrowDownSLine",
-    "RiArrowRightSLine",
-  ],
 }
 
 const logos = {
@@ -198,35 +154,6 @@ const logos = {
       ></path>
     </svg>
   ),
-  phosphor: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
-      width="32"
-      height="32"
-    >
-      <path fill="none" d="M0 0h32v32H0z" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
-      />
-    </svg>
-  ),
-  remixicon: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="currentColor"
-    >
-      <path d="M12 2C17.5228 2 22 6.47715 22 12C22 15.3137 19.3137 18 16 18C12.6863 18 10 15.3137 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 16.4183 11.5817 20 16 20C16.8708 20 17.7084 19.8588 18.4932 19.6016C16.7458 21.0956 14.4792 22 12 22C6.6689 22 2.3127 17.8283 2.0166 12.5713C2.23647 9.45772 4.83048 7 8 7C11.3137 7 14 9.68629 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 8.58172 12.4183 5 8 5C6.50513 5 5.1062 5.41032 3.90918 6.12402C5.72712 3.62515 8.67334 2 12 2Z" />
-    </svg>
-  ),
 }
 
 export function IconLibraryPicker({
@@ -244,8 +171,8 @@ export function IconLibraryPicker({
   )
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Icon Library</div>
@@ -253,42 +180,42 @@ export function IconLibraryPicker({
               {currentIconLibrary?.title}
             </div>
           </div>
-          <div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
             {logos[currentIconLibrary?.name as keyof typeof logos]}
           </div>
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
+        <LockButton
+          param="iconLibrary"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentIconLibrary?.name}
+          onValueChange={(value) => {
+            setParams({ iconLibrary: value as IconLibraryName })
+          }}
         >
-          <PickerRadioGroup
-            value={currentIconLibrary?.name}
-            onValueChange={(value) => {
-              setParams({ iconLibrary: value as IconLibraryName })
-            }}
-          >
-            <PickerGroup>
-              {Object.values(iconLibraries).map((iconLibrary, index) => (
-                <React.Fragment key={iconLibrary.name}>
-                  <IconLibraryPickerItem
-                    iconLibrary={iconLibrary}
-                    value={iconLibrary.name}
-                  />
-                  {index < Object.values(iconLibraries).length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="iconLibrary"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+          <PickerGroup>
+            {Object.values(iconLibraries).map((iconLibrary, index) => (
+              <React.Fragment key={iconLibrary.name}>
+                <IconLibraryPickerItem
+                  iconLibrary={iconLibrary}
+                  value={iconLibrary.name}
+                />
+                {index < Object.values(iconLibraries).length - 1 && (
+                  <PickerSeparator className="opacity-50" />
+                )}
+              </React.Fragment>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }
 
@@ -332,11 +259,7 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
       ? IconLucide
       : iconLibrary === "tabler"
         ? IconTabler
-        : iconLibrary === "hugeicons"
-          ? IconHugeicons
-          : iconLibrary === "phosphor"
-            ? IconPhosphor
-            : IconRemixicon
+        : IconHugeicons
 
   return (
     <Suspense

apps/v4/app/(create)/components/icon-placeholder.tsx

@@ -4,7 +4,7 @@ import { lazy, Suspense } from "react"
 import { SquareIcon } from "lucide-react"
 import type { IconLibraryName } from "shadcn/icons"
 
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
 
 const IconLucide = lazy(() =>
   import("@/registry/icons/icon-lucide").then((mod) => ({
@@ -24,24 +24,12 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
-const IconPhosphor = lazy(() =>
-  import("@/registry/icons/icon-phosphor").then((mod) => ({
-    default: mod.IconPhosphor,
-  }))
-)
-
-const IconRemixicon = lazy(() =>
-  import("@/registry/icons/icon-remixicon").then((mod) => ({
-    default: mod.IconRemixicon,
-  }))
-)
-
 export function IconPlaceholder({
   ...props
 }: {
   [K in IconLibraryName]: string
 } & React.ComponentProps<"svg">) {
-  const [{ iconLibrary }] = useDesignSystemSearchParams()
+  const iconLibrary = useDesignSystemParam("iconLibrary")
   const iconName = props[iconLibrary]
 
   if (!iconName) {
@@ -55,12 +43,6 @@ export function IconPlaceholder({
       {iconLibrary === "hugeicons" && (
         <IconHugeicons name={iconName} {...props} />
       )}
-      {iconLibrary === "phosphor" && (
-        <IconPhosphor name={iconName} {...props} />
-      )}
-      {iconLibrary === "remixicon" && (
-        <IconRemixicon name={iconName} {...props} />
-      )}
     </Suspense>
   )
 }

apps/v4/app/(create)/components/item-picker.tsx

@@ -99,7 +99,7 @@ export function ItemPicker({
             variant="outline"
             aria-label="Select item"
             size="sm"
-            className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-64"
+            className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-md"
           />
         }
       >
@@ -123,9 +123,9 @@ export function ItemPicker({
         <HugeiconsIcon icon={Search01Icon} />
       </ComboboxTrigger>
       <ComboboxContent
-        className="ring-foreground/10 min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 data-open:animate-none sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0 xl:w-96"
+        className="ring-foreground/10 min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 data-open:animate-none sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0"
         side="bottom"
-        align="end"
+        align="center"
       >
         <ComboboxInput
           showTrigger={false}

apps/v4/app/(create)/components/menu-picker.tsx

@@ -119,8 +119,8 @@ export function MenuColorPicker({
   )
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Menu Color</div>
@@ -128,36 +128,36 @@ export function MenuColorPicker({
               {currentMenu?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
             {currentMenu?.icon}
           </div>
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
+        <LockButton
+          param="menuColor"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentMenu?.value}
+          onValueChange={(value) => {
+            setParams({ menuColor: value as MenuColorValue })
+          }}
         >
-          <PickerRadioGroup
-            value={currentMenu?.value}
-            onValueChange={(value) => {
-              setParams({ menuColor: value as MenuColorValue })
-            }}
-          >
-            <PickerGroup>
-              {MENU_OPTIONS.map((menu) => (
-                <PickerRadioItem key={menu.value} value={menu.value}>
-                  {menu.icon}
-                  {menu.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="menuColor"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+          <PickerGroup>
+            {MENU_OPTIONS.map((menu) => (
+              <PickerRadioItem key={menu.value} value={menu.value}>
+                {menu.icon}
+                {menu.label}
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/picker.tsx

@@ -138,8 +138,6 @@ function PickerSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
         className="ml-auto"
       />
     </MenuPrimitive.SubmenuTrigger>
@@ -192,8 +190,6 @@ function PickerCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -234,8 +230,6 @@ function PickerRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
             className="size-4 pointer-coarse:size-5"
           />
         </MenuPrimitive.RadioItemIndicator>

apps/v4/app/(create)/components/preview.tsx

@@ -5,18 +5,18 @@ import { type ImperativePanelHandle } from "react-resizable-panels"
 
 import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/customizer-controls"
 import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
-import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
-import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
-import {
-  serializeDesignSystemSearchParams,
-  useDesignSystemSearchParams,
-} from "@/app/(create)/lib/search-params"
+import { useDesignSystemSync } from "@/app/(create)/hooks/use-design-system"
+
+const MESSAGE_TYPE = "design-system-params"
 
 export function Preview() {
-  const [params] = useDesignSystemSearchParams()
+  const params = useDesignSystemSync()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
   const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const [initialParams] = React.useState(params)
+  const [iframeKey, setIframeKey] = React.useState(0)
 
   // Sync resizable panel with URL param changes.
   React.useEffect(() => {
@@ -32,7 +32,13 @@ export function Preview() {
     }
 
     const sendParams = () => {
-      sendToIframe(iframe, "design-system-params", params)
+      iframe.contentWindow?.postMessage(
+        {
+          type: MESSAGE_TYPE,
+          params,
+        },
+        "*"
+      )
     }
 
     if (iframe.contentWindow) {
@@ -90,25 +96,18 @@ export function Preview() {
     }
   }, [])
 
-  const iframeSrc = React.useMemo(() => {
-    // The iframe src needs to include the serialized design system params
-    // for the initial load, but not be reactive to them as it would cause
-    // full-iframe reloads on every param change (flashes & loss of state).
-    // Further updates of the search params will be sent to the iframe
-    // via a postMessage channel, for it to sync its own history onto the host's.
-    return serializeDesignSystemSearchParams(
-      `/preview/${params.base}/${params.item}`,
-      params
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [params.base, params.item])
+  if (!params.item || !params.base) {
+    return null
+  }
+
+  const iframeSrc = `/preview/${params.base}/${params.item}?theme=${initialParams.theme ?? "neutral"}&iconLibrary=${initialParams.iconLibrary ?? "lucide"}&style=${initialParams.style ?? "vega"}&font=${initialParams.font ?? "inter"}&baseColor=${initialParams.baseColor ?? "neutral"}`
 
   return (
     <div className="relative -mx-1 flex flex-1 flex-col justify-center sm:mx-0">
       <div className="ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px] relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1">
         <div className="bg-muted dark:bg-muted/30 absolute inset-0 rounded-2xl" />
         <iframe
-          key={params.base + params.item}
+          key={`${params.item}-${iframeKey}`}
           ref={iframeRef}
           src={iframeSrc}
           className="z-10 size-full flex-1"

apps/v4/app/(create)/components/radius-picker.tsx

@@ -27,8 +27,8 @@ export function RadiusPicker({
   const otherRadii = RADII.filter((radius) => radius.name !== "default")
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Radius</div>
@@ -36,7 +36,7 @@ export function RadiusPicker({
               {currentRadius?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
+          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -55,47 +55,47 @@ export function RadiusPicker({
             </svg>
           </div>
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
+        <LockButton
+          param="radius"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentRadius?.name}
+          onValueChange={(value) => {
+            setParams({ radius: value as RadiusValue })
+          }}
         >
-          <PickerRadioGroup
-            value={currentRadius?.name}
-            onValueChange={(value) => {
-              setParams({ radius: value as RadiusValue })
-            }}
-          >
-            <PickerGroup>
-              {defaultRadius && (
-                <PickerRadioItem
-                  key={defaultRadius.name}
-                  value={defaultRadius.name}
-                >
-                  <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                    <div>{defaultRadius.label}</div>
-                    <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                      Use radius from style
-                    </div>
+          <PickerGroup>
+            {defaultRadius && (
+              <PickerRadioItem
+                key={defaultRadius.name}
+                value={defaultRadius.name}
+              >
+                <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                  <div>{defaultRadius.label}</div>
+                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                    Use radius from style
                   </div>
-                </PickerRadioItem>
-              )}
-            </PickerGroup>
-            <PickerSeparator />
-            <PickerGroup>
-              {otherRadii.map((radius) => (
-                <PickerRadioItem key={radius.name} value={radius.name}>
-                  {radius.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="radius"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+                </div>
+              </PickerRadioItem>
+            )}
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            {otherRadii.map((radius) => (
+              <PickerRadioItem key={radius.name} value={radius.name}>
+                {radius.label}
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/reset-button.tsx

@@ -1,75 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Undo02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { DEFAULT_CONFIG } from "@/registry/config"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/new-york-v4/ui/alert-dialog"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-export function ResetButton() {
-  const [params, setParams] = useDesignSystemSearchParams()
-
-  const handleReset = React.useCallback(() => {
-    setParams({
-      base: params.base, // Keep the current base value.
-      style: DEFAULT_CONFIG.style,
-      baseColor: DEFAULT_CONFIG.baseColor,
-      theme: DEFAULT_CONFIG.theme,
-      iconLibrary: DEFAULT_CONFIG.iconLibrary,
-      font: DEFAULT_CONFIG.font,
-      menuAccent: DEFAULT_CONFIG.menuAccent,
-      menuColor: DEFAULT_CONFIG.menuColor,
-      radius: DEFAULT_CONFIG.radius,
-      template: DEFAULT_CONFIG.template,
-      item: "preview",
-    })
-  }, [setParams, params.base])
-
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-        >
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Reset</div>
-            <div className="text-foreground text-sm font-medium">
-              Start Over
-            </div>
-          </div>
-          <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
-        <AlertDialogHeader>
-          <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This will reset all customization options to their default values.
-            This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
-          <AlertDialogAction className="rounded-lg" onClick={handleReset}>
-            Reset
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

apps/v4/app/(create)/components/share-button.tsx

@@ -56,7 +56,7 @@ export function ShareButton() {
         <Button
           size="sm"
           variant="outline"
-          className="rounded-lg shadow-none lg:w-8 xl:w-fit"
+          className="rounded-lg shadow-none"
           onClick={handleCopy}
         >
           {hasCopied ? (
@@ -64,7 +64,7 @@ export function ShareButton() {
           ) : (
             <HugeiconsIcon icon={Share03Icon} strokeWidth={2} />
           )}
-          <span className="lg:hidden xl:block">Share</span>
+          Share
         </Button>
       </TooltipTrigger>
       <TooltipContent>Copy Link</TooltipContent>

apps/v4/app/(create)/components/style-picker.tsx

@@ -29,8 +29,8 @@ export function StylePicker({
   const currentStyle = styles.find((style) => style.name === params.style)
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Style</div>
@@ -39,58 +39,58 @@ export function StylePicker({
             </div>
           </div>
           {currentStyle?.icon && (
-            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none">
+            <div className="absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center">
               {React.cloneElement(currentStyle.icon, {
                 className: "size-4",
               })}
             </div>
           )}
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-          className="md:w-64"
+        <LockButton
+          param="style"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+        className="md:w-64"
+      >
+        <PickerRadioGroup
+          value={currentStyle?.name}
+          onValueChange={(value) => {
+            setParams({ style: value as StyleName })
+          }}
         >
-          <PickerRadioGroup
-            value={currentStyle?.name}
-            onValueChange={(value) => {
-              setParams({ style: value as StyleName })
-            }}
-          >
-            <PickerGroup>
-              {styles.map((style, index) => (
-                <React.Fragment key={style.name}>
-                  <PickerRadioItem value={style.name}>
-                    <div className="flex items-start gap-2">
-                      {style.icon && (
-                        <div className="flex size-4 translate-y-0.5 items-center justify-center">
-                          {React.cloneElement(style.icon, {
-                            className: "size-4",
-                          })}
-                        </div>
-                      )}
-                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                        <div>{style.title}</div>
-                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                          {style.description}
-                        </div>
+          <PickerGroup>
+            {styles.map((style, index) => (
+              <React.Fragment key={style.name}>
+                <PickerRadioItem value={style.name}>
+                  <div className="flex items-start gap-2">
+                    {style.icon && (
+                      <div className="flex size-4 translate-y-0.5 items-center justify-center">
+                        {React.cloneElement(style.icon, {
+                          className: "size-4",
+                        })}
+                      </div>
+                    )}
+                    <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                      <div>{style.title}</div>
+                      <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                        {style.description}
                       </div>
                     </div>
-                  </PickerRadioItem>
-                  {index < styles.length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="style"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+                  </div>
+                </PickerRadioItem>
+                {index < styles.length - 1 && (
+                  <PickerSeparator className="opacity-50" />
+                )}
+              </React.Fragment>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/template-picker.tsx

@@ -52,7 +52,7 @@ export function TemplatePicker({
         </div>
         {currentTemplate?.logo && (
           <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[svg]:size-4"
             dangerouslySetInnerHTML={{
               __html: currentTemplate.logo,
             }}

apps/v4/app/(create)/components/theme-picker.tsx

@@ -47,8 +47,8 @@ export function ThemePicker({
   }, [currentTheme, themes, setParams])
 
   return (
-    <div className="group/picker relative">
-      <Picker>
+    <Picker>
+      <div className="group/picker relative">
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Theme</div>
@@ -68,99 +68,99 @@ export function ThemePicker({
                     ],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
             />
           )}
         </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-          className="max-h-96"
+        <LockButton
+          param="theme"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+        className="max-h-96"
+      >
+        <PickerRadioGroup
+          value={currentTheme?.name}
+          onValueChange={(value) => {
+            setParams({ theme: value as ThemeName })
+          }}
         >
-          <PickerRadioGroup
-            value={currentTheme?.name}
-            onValueChange={(value) => {
-              setParams({ theme: value as ThemeName })
-            }}
-          >
-            <PickerGroup>
-              {themes
-                .filter((theme) =>
-                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+          <PickerGroup>
+            {themes
+              .filter((theme) =>
+                BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+              )
+              .map((theme) => {
+                const isBaseColor = BASE_COLORS.find(
+                  (baseColor) => baseColor.name === theme.name
                 )
-                .map((theme) => {
-                  const isBaseColor = BASE_COLORS.find(
-                    (baseColor) => baseColor.name === theme.name
-                  )
-                  return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
-                      <div className="flex items-start gap-2">
-                        {mounted && resolvedTheme && (
-                          <div
-                            style={
-                              {
-                                "--color":
-                                  theme.cssVars?.[
-                                    resolvedTheme as "light" | "dark"
-                                  ]?.[
-                                    isBaseColor ? "muted-foreground" : "primary"
-                                  ],
-                              } as React.CSSProperties
-                            }
-                            className="size-4 translate-y-1 rounded-full bg-(--color)"
-                          />
-                        )}
-                        <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                          <div>{theme.title}</div>
-                          <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                            Match base color
-                          </div>
+                return (
+                  <PickerRadioItem key={theme.name} value={theme.name}>
+                    <div className="flex items-start gap-2">
+                      {mounted && resolvedTheme && (
+                        <div
+                          style={
+                            {
+                              "--color":
+                                theme.cssVars?.[
+                                  resolvedTheme as "light" | "dark"
+                                ]?.[
+                                  isBaseColor ? "muted-foreground" : "primary"
+                                ],
+                            } as React.CSSProperties
+                          }
+                          className="size-4 translate-y-1 rounded-full bg-(--color)"
+                        />
+                      )}
+                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                        <div>{theme.title}</div>
+                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                          Match base color
                         </div>
                       </div>
-                    </PickerRadioItem>
-                  )
-                })}
-            </PickerGroup>
-            <PickerSeparator />
-            <PickerGroup>
-              {themes
-                .filter(
-                  (theme) =>
-                    !BASE_COLORS.find(
-                      (baseColor) => baseColor.name === theme.name
-                    )
+                    </div>
+                  </PickerRadioItem>
                 )
-                .map((theme) => {
-                  return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
-                      <div className="flex items-center gap-2">
-                        {mounted && resolvedTheme && (
-                          <div
-                            style={
-                              {
-                                "--color":
-                                  theme.cssVars?.[
-                                    resolvedTheme as "light" | "dark"
-                                  ]?.["primary"],
-                              } as React.CSSProperties
-                            }
-                            className="size-4 rounded-full bg-(--color)"
-                          />
-                        )}
-                        {theme.title}
-                      </div>
-                    </PickerRadioItem>
+              })}
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            {themes
+              .filter(
+                (theme) =>
+                  !BASE_COLORS.find(
+                    (baseColor) => baseColor.name === theme.name
                   )
-                })}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="theme"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
-      />
-    </div>
+              )
+              .map((theme) => {
+                return (
+                  <PickerRadioItem key={theme.name} value={theme.name}>
+                    <div className="flex items-center gap-2">
+                      {mounted && resolvedTheme && (
+                        <div
+                          style={
+                            {
+                              "--color":
+                                theme.cssVars?.[
+                                  resolvedTheme as "light" | "dark"
+                                ]?.["primary"],
+                            } as React.CSSProperties
+                          }
+                          className="size-4 rounded-full bg-(--color)"
+                        />
+                      )}
+                      {theme.title}
+                    </div>
+                  </PickerRadioItem>
+                )
+              })}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
   )
 }

apps/v4/app/(create)/components/v0-button.tsx

@@ -14,12 +14,14 @@ import {
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {
-  const [params] = useDesignSystemSearchParams()
+  const [params, setParams] = useDesignSystemSearchParams()
   const isMobile = useIsMobile()
   const isMounted = useMounted()
 
   const url = `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
 
+  console.log(url)
+
   if (!isMounted) {
     return <Skeleton className="h-8 w-24 rounded-lg" />
   }
@@ -32,7 +34,7 @@ export function V0Button({ className }: { className?: string }) {
             size="sm"
             variant={isMobile ? "default" : "outline"}
             className={cn(
-              "w-24 rounded-lg shadow-none data-[variant=default]:h-[31px] lg:w-8 xl:w-24",
+              "w-24 rounded-lg shadow-none data-[variant=default]:h-[31px]",
               className
             )}
             asChild
@@ -41,8 +43,7 @@ export function V0Button({ className }: { className?: string }) {
               href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${encodeURIComponent(url)}&title=${params.item}`}
               target="_blank"
             >
-              <span className="lg:hidden xl:block">Open in</span>
-              <Icons.v0 className="size-5" />
+              Open in <Icons.v0 className="size-5" />
             </a>
           </Button>
         </TooltipTrigger>

apps/v4/app/(create)/create/page.tsx

@@ -4,11 +4,7 @@ import { ArrowLeftIcon } from "lucide-react"
 import type { SearchParams } from "nuqs/server"
 
 import { siteConfig } from "@/lib/config"
-import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
-import { Icons } from "@/components/icons"
-import { MainNav } from "@/components/main-nav"
-import { MobileNav } from "@/components/mobile-nav"
 import { ModeSwitcher } from "@/components/mode-switcher"
 import { SiteConfig } from "@/components/site-config"
 import { BASES } from "@/registry/config"
@@ -16,11 +12,10 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
 import { Customizer } from "@/app/(create)/components/customizer"
+import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
 import { ItemExplorer } from "@/app/(create)/components/item-explorer"
 import { ItemPicker } from "@/app/(create)/components/item-picker"
 import { Preview } from "@/app/(create)/components/preview"
-import { RandomButton } from "@/app/(create)/components/random-button"
-import { ResetButton } from "@/app/(create)/components/reset-button"
 import { ShareButton } from "@/app/(create)/components/share-button"
 import { ToolbarControls } from "@/app/(create)/components/toolbar-controls"
 import { V0Button } from "@/app/(create)/components/v0-button"
@@ -68,7 +63,6 @@ export default async function CreatePage({
   const params = await loadDesignSystemSearchParams(searchParams)
   const base = BASES.find((b) => b.name === params.base) ?? BASES[0]
 
-  const pageTree = source.pageTree
   const items = await getItemsForBase(base.name)
 
   const filteredItems = items
@@ -87,34 +81,35 @@ export default async function CreatePage({
       <header className="sticky top-0 z-50 w-full">
         <div className="container-wrapper 3xl:fixed:px-0 px-6">
           <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
-            <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
-              <MobileNav
-                tree={pageTree}
-                items={siteConfig.navItems}
-                className="flex lg:hidden"
-              />
+            <div className="flex items-center xl:w-1/3">
               <Button
                 asChild
-                variant="ghost"
-                size="icon"
-                className="hidden size-8 lg:flex"
+                variant="outline"
+                size="sm"
+                className="rounded-lg shadow-none"
               >
                 <Link href="/">
-                  <Icons.logo className="size-5" />
-                  <span className="sr-only">{siteConfig.name}</span>
+                  <ArrowLeftIcon />
+                  Back
                 </Link>
               </Button>
-              <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
-            </div>
-            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center justify-end gap-2 px-4.5 pb-4 sm:static sm:p-0 lg:ml-0">
-              <ItemPicker items={filteredItems} />
-              <div className="items-center gap-0 sm:hidden">
-                <RandomButton />
-                <ResetButton />
+              <Separator
+                orientation="vertical"
+                className="mx-2 hidden sm:mx-4 lg:flex"
+              />
+              <div className="text-muted-foreground hidden text-sm font-medium lg:flex">
+                New Project
               </div>
-              <Separator orientation="vertical" className="mr-2 flex" />
             </div>
-            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end">
+            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center gap-2 px-4.5 pb-4 sm:static sm:justify-end sm:p-0 lg:ml-0 xl:justify-center">
+              <ItemPicker items={filteredItems} />
+              <CustomizerControls className="sm:hidden" />
+              <Separator
+                orientation="vertical"
+                className="mr-2 hidden sm:flex xl:hidden"
+              />
+            </div>
+            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end xl:ml-auto xl:w-1/3">
               <SiteConfig className="3xl:flex hidden" />
               <Separator orientation="vertical" className="3xl:flex hidden" />
               <ModeSwitcher />

apps/v4/app/(create)/hooks/use-canva.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  sendToIframe,
+  sendToParent,
+  useParentMessageListener,
+} from "@/app/(create)/hooks/use-iframe-sync"
+
+const MESSAGE_TYPE = "canva-zoom"
+
+export type ZoomCommand =
+  | { type: "ZOOM_IN" }
+  | { type: "ZOOM_OUT" }
+  | { type: "ZOOM_SET"; value: number }
+  | { type: "ZOOM_FIT" }
+  | { type: "RESET" }
+
+export function sendCanvaZoomCommand(
+  iframe: HTMLIFrameElement | null,
+  command: ZoomCommand
+) {
+  sendToIframe(iframe, MESSAGE_TYPE, { command })
+}
+
+export function sendCanvaZoomUpdate(zoom: number) {
+  sendToParent(MESSAGE_TYPE, { zoom })
+}
+
+export function useCanvaZoomSync() {
+  const [zoom, setZoom] = React.useState(1)
+
+  useParentMessageListener<{ zoom: number }>(MESSAGE_TYPE, (data) => {
+    if (typeof data.zoom === "number") {
+      setZoom(data.zoom)
+    }
+  })
+
+  return zoom
+}

apps/v4/app/(create)/hooks/use-design-system.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {
+  createIframeSyncStore,
+  useIframeSyncAll,
+  useIframeSyncValue,
+} from "@/app/(create)/hooks/use-iframe-sync"
+import {
+  loadDesignSystemSearchParams,
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
+
+const MESSAGE_TYPE = "design-system-params"
+
+const getInitialValues = (): DesignSystemSearchParams => {
+  const initialValues = loadDesignSystemSearchParams(
+    typeof window === "undefined" ? "" : location.search
+  )
+  // Override defaults for iframe use case
+  initialValues.item = "cover-example"
+  return initialValues
+}
+
+const designSystemStore = createIframeSyncStore(
+  MESSAGE_TYPE,
+  getInitialValues()
+)
+
+export function useDesignSystemSync() {
+  const [urlParams] = useDesignSystemSearchParams()
+
+  const keys = Object.keys(urlParams) as (keyof DesignSystemSearchParams)[]
+
+  return useIframeSyncAll(designSystemStore, keys, urlParams)
+}
+
+export function useDesignSystemParam<K extends keyof DesignSystemSearchParams>(
+  key: K
+) {
+  const [urlParams] = useDesignSystemSearchParams()
+
+  return useIframeSyncValue(designSystemStore, key, urlParams[key])
+}

apps/v4/app/(create)/hooks/use-iframe-sync.tsx

@@ -1,14 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client"
 
 import * as React from "react"
 
-import type { DesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-type ParentToIframeMessage = {
-  type: "design-system-params"
-  data: DesignSystemSearchParams
-}
-
 export const isInIframe = () => {
   if (typeof window === "undefined") {
     return false
@@ -16,21 +10,157 @@ export const isInIframe = () => {
   return window.self !== window.top
 }
 
-export function useIframeMessageListener<
-  Message extends ParentToIframeMessage,
-  MessageType extends Message["type"],
->(
-  messageType: MessageType,
-  onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
+export function createIframeSyncStore<T extends Record<string, any>>(
+  messageType: string,
+  defaultValues: T
+) {
+  const store = new Map<keyof T, any>()
+  const listeners = new Map<keyof T, Set<() => void>>()
+
+  if (typeof window !== "undefined") {
+    Object.entries(defaultValues).forEach(([key, value]) => {
+      store.set(key as keyof T, value)
+    })
+  }
+
+  if (typeof window !== "undefined" && isInIframe()) {
+    window.addEventListener("message", (event: MessageEvent) => {
+      if (event.data.type === messageType && event.data.params) {
+        Object.keys(event.data.params).forEach((key) => {
+          const newValue = event.data.params[key]
+          const oldValue = store.get(key as keyof T)
+
+          if (newValue !== oldValue) {
+            store.set(key as keyof T, newValue)
+
+            const keyListeners = listeners.get(key as keyof T)
+            if (keyListeners) {
+              keyListeners.forEach((listener) => listener())
+            }
+          }
+        })
+      }
+    })
+  }
+
+  return {
+    store,
+    listeners,
+    subscribe(key: keyof T, callback: () => void) {
+      if (!isInIframe()) return () => {}
+
+      if (!listeners.has(key)) {
+        listeners.set(key, new Set())
+      }
+      const keyListeners = listeners.get(key)!
+      keyListeners.add(callback)
+
+      return () => {
+        keyListeners.delete(callback)
+        if (keyListeners.size === 0) {
+          listeners.delete(key)
+        }
+      }
+    },
+    subscribeAll(keys: (keyof T)[], callback: () => void) {
+      if (!isInIframe()) return () => {}
+
+      keys.forEach((key) => {
+        if (!listeners.has(key)) {
+          listeners.set(key, new Set())
+        }
+        listeners.get(key)!.add(callback)
+      })
+
+      return () => {
+        keys.forEach((key) => {
+          const keyListeners = listeners.get(key)
+          if (keyListeners) {
+            keyListeners.delete(callback)
+            if (keyListeners.size === 0) {
+              listeners.delete(key)
+            }
+          }
+        })
+      }
+    },
+    get(key: keyof T) {
+      return store.get(key) as T[keyof T]
+    },
+    getAll() {
+      const result = {} as T
+      store.forEach((value, key) => {
+        result[key as keyof T] = value
+      })
+      return result
+    },
+  }
+}
+
+export function useIframeSyncValue<T>(
+  store: ReturnType<typeof createIframeSyncStore<any>>,
+  key: string,
+  urlValue: T
+) {
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      return store.subscribe(key, callback)
+    },
+    [store, key]
+  )
+
+  const getSnapshot = React.useCallback(() => {
+    if (!isInIframe()) {
+      return urlValue
+    }
+    return store.get(key) as T
+  }, [store, key, urlValue])
+
+  const getServerSnapshot = React.useCallback(() => {
+    return urlValue
+  }, [urlValue])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export function useIframeSyncAll<T extends Record<string, any>>(
+  store: ReturnType<typeof createIframeSyncStore<T>>,
+  keys: (keyof T)[],
+  urlValues: T
+) {
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      return store.subscribeAll(keys, callback)
+    },
+    [store, keys]
+  )
+
+  const getSnapshot = React.useCallback(() => {
+    if (!isInIframe()) {
+      return urlValues
+    }
+    return store.getAll()
+  }, [store, urlValues])
+
+  const getServerSnapshot = React.useCallback(() => {
+    return urlValues
+  }, [urlValues])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export function useParentMessageListener<T>(
+  messageType: string,
+  onMessage: (data: T) => void
 ) {
   React.useEffect(() => {
-    if (!isInIframe()) {
+    if (isInIframe()) {
       return
     }
 
     const handleMessage = (event: MessageEvent) => {
       if (event.data.type === messageType) {
-        onMessage(event.data.data)
+        onMessage(event.data)
       }
     }
 
@@ -41,22 +171,33 @@ export function useIframeMessageListener<
   }, [messageType, onMessage])
 }
 
-export function sendToIframe<
-  Message extends ParentToIframeMessage,
-  MessageType extends Message["type"],
->(
+export function sendToIframe(
   iframe: HTMLIFrameElement | null,
-  messageType: MessageType,
-  data: Extract<Message, { type: MessageType }>["data"]
+  messageType: string,
+  data: any
 ) {
-  if (!iframe?.contentWindow) {
+  if (!iframe || !iframe.contentWindow) {
     return
   }
 
   iframe.contentWindow.postMessage(
     {
       type: messageType,
-      data,
+      ...data,
+    },
+    "*"
+  )
+}
+
+export function sendToParent(messageType: string, data: any) {
+  if (!isInIframe()) {
+    return
+  }
+
+  window.parent.postMessage(
+    {
+      type: messageType,
+      ...data,
     },
     "*"
   )

apps/v4/app/(create)/lib/search-params.ts

@@ -1,7 +1,6 @@
 import { useQueryStates } from "nuqs"
 import {
   createLoader,
-  createSerializer,
   parseAsBoolean,
   parseAsInteger,
   parseAsString,
@@ -36,7 +35,7 @@ const designSystemSearchParams = {
   base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
     DEFAULT_CONFIG.base
   ),
-  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
+  item: parseAsString.withDefault("preview"),
   iconLibrary: parseAsStringLiteral<IconLibraryName>(
     Object.values(iconLibraries).map((i) => i.name)
   ).withDefault(DEFAULT_CONFIG.iconLibrary),
@@ -74,10 +73,6 @@ export const loadDesignSystemSearchParams = createLoader(
   designSystemSearchParams
 )
 
-export const serializeDesignSystemSearchParams = createSerializer(
-  designSystemSearchParams
-)
-
 export const useDesignSystemSearchParams = (options: Options = {}) =>
   useQueryStates(designSystemSearchParams, {
     shallow: false,

apps/v4/app/(create)/preview/[base]/[name]/page.tsx

@@ -7,10 +7,10 @@ import { absoluteUrl } from "@/lib/utils"
 import { DarkModeScript } from "@/components/mode-switcher"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { BASES, type Base } from "@/registry/config"
+import { RandomizeScript } from "@/app/(create)/components/customizer-controls"
 import { DesignSystemProvider } from "@/app/(create)/components/design-system-provider"
 import { ItemPickerScript } from "@/app/(create)/components/item-picker"
 import { PreviewStyle } from "@/app/(create)/components/preview-style"
-import { RandomizeScript } from "@/app/(create)/components/random-button"
 import { getBaseComponent, getBaseItem } from "@/app/(create)/lib/api"
 import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
 

apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx

@@ -117,8 +117,6 @@ function DropdownMenuCheckboxes() {
               lucide="UserIcon"
               tabler="IconUser"
               hugeicons="UserIcon"
-              phosphor="UserIcon"
-              remixicon="RiUserLine"
             />
             Profile
           </DropdownMenuItem>
@@ -127,8 +125,6 @@ function DropdownMenuCheckboxes() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -137,8 +133,6 @@ function DropdownMenuCheckboxes() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
-              phosphor="GearIcon"
-              remixicon="RiSettings3Line"
             />
             Settings
           </DropdownMenuItem>
@@ -173,8 +167,6 @@ function DropdownMenuCheckboxes() {
               lucide="LogOutIcon"
               tabler="IconLogout"
               hugeicons="LogoutIcon"
-              phosphor="SignOutIcon"
-              remixicon="RiLogoutBoxLine"
             />
             Sign Out
           </DropdownMenuItem>
@@ -230,8 +222,6 @@ function DropdownMenuWithAvatar() {
             lucide="ChevronsUpDownIcon"
             tabler="IconChevronsUpDown"
             hugeicons="ChevronUpDownIcon"
-            phosphor="CaretUpDownIcon"
-            remixicon="RiExpandUpDownLine"
             className="text-muted-foreground ml-auto"
           />
         </Button>
@@ -261,8 +251,6 @@ function DropdownMenuWithAvatar() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
-              phosphor="SparklesIcon"
-              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -274,8 +262,6 @@ function DropdownMenuWithAvatar() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
-              phosphor="CheckCircleIcon"
-              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -284,8 +270,6 @@ function DropdownMenuWithAvatar() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -294,8 +278,6 @@ function DropdownMenuWithAvatar() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
-              phosphor="BellIcon"
-              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -306,8 +288,6 @@ function DropdownMenuWithAvatar() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
-            phosphor="SignOutIcon"
-            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -361,8 +341,6 @@ function DropdownMenuAvatarOnly() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
-              phosphor="SparklesIcon"
-              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -374,8 +352,6 @@ function DropdownMenuAvatarOnly() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
-              phosphor="CheckCircleIcon"
-              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -384,8 +360,6 @@ function DropdownMenuAvatarOnly() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -394,8 +368,6 @@ function DropdownMenuAvatarOnly() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
-              phosphor="BellIcon"
-              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -406,8 +378,6 @@ function DropdownMenuAvatarOnly() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
-            phosphor="SignOutIcon"
-            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -425,8 +395,6 @@ function DropdownMenuIconColor() {
             lucide="MoreHorizontalIcon"
             tabler="IconDots"
             hugeicons="MoreHorizontalCircle01Icon"
-            phosphor="DotsThreeOutlineIcon"
-            remixicon="RiMoreLine"
           />
           <span className="sr-only">Toggle menu</span>
         </Button>
@@ -438,8 +406,6 @@ function DropdownMenuIconColor() {
               lucide="PencilIcon"
               tabler="IconPencil"
               hugeicons="EditIcon"
-              phosphor="PencilIcon"
-              remixicon="RiPencilLine"
             />
             Edit
           </DropdownMenuItem>
@@ -448,8 +414,6 @@ function DropdownMenuIconColor() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="ShareIcon"
-              phosphor="ShareIcon"
-              remixicon="RiShareLine"
             />
             Share
           </DropdownMenuItem>
@@ -459,8 +423,6 @@ function DropdownMenuIconColor() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="DeleteIcon"
-              phosphor="TrashIcon"
-              remixicon="RiDeleteBinLine"
             />
             Delete
           </DropdownMenuItem>

apps/v4/app/(view)/view/[style]/[name]/component-preview.tsx

@@ -1,13 +1,5 @@
 import { cn } from "@/lib/utils"
 
 export function ComponentPreview({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className={cn(
-        "bg-background *:data-[slot=card]:has-[[data-slot=chart]]:shadow-none"
-      )}
-    >
-      {children}
-    </div>
-  )
+  return <div className={cn("bg-background")}>{children}</div>
 }

apps/v4/app/(view)/view/[style]/[name]/page.tsx

@@ -4,16 +4,10 @@ import { type Metadata } from "next"
 import { notFound } from "next/navigation"
 
 import { siteConfig } from "@/lib/config"
-import {
-  getDemoItem,
-  getRegistryComponent,
-  getRegistryItem,
-} from "@/lib/registry"
+import { getRegistryComponent, getRegistryItem } from "@/lib/registry"
 import { absoluteUrl } from "@/lib/utils"
 import { getStyle, legacyStyles, type Style } from "@/registry/_legacy-styles"
 
-import "@/styles/legacy-themes.css"
-
 import { ComponentPreview } from "./component-preview"
 
 export const revalidate = false
@@ -22,12 +16,7 @@ export const dynamicParams = false
 
 const getCachedRegistryItem = React.cache(
   async (name: string, styleName: Style["name"]) => {
-    // Try registry item first, then fallback to demo item (for examples).
-    const item = await getRegistryItem(name, styleName)
-    if (item) {
-      return item
-    }
-    return await getDemoItem(name, styleName)
+    return await getRegistryItem(name, styleName)
   }
 )
 
@@ -84,54 +73,9 @@ export async function generateMetadata({
 
 export async function generateStaticParams() {
   const { Index } = await import("@/registry/__index__")
-  // const { Index: BasesIndex } = await import("@/registry/bases/__index__")
-  const { ExamplesIndex } = await import("@/examples/__index__")
   const params: Array<{ style: string; name: string }> = []
 
   for (const style of legacyStyles) {
-    // Check if this is a base-prefixed style (e.g., base-nova, radix-nova).
-    const baseMatch = style.name.match(/^(base|radix)-/)
-    if (baseMatch) {
-      const baseName = baseMatch[1]
-
-      // Add examples from ExamplesIndex.
-      const examples = ExamplesIndex[baseName]
-      if (examples) {
-        for (const exampleName of Object.keys(examples)) {
-          if (exampleName.startsWith("sidebar-")) {
-            params.push({
-              style: style.name,
-              name: exampleName,
-            })
-          }
-        }
-      }
-
-      // // Add UI components from BasesIndex.
-      // const baseIndex = BasesIndex[baseName]
-      // if (baseIndex) {
-      //   for (const itemName in baseIndex) {
-      //     const item = baseIndex[itemName]
-      //     if (
-      //       [
-      //         "registry:block",
-      //         "registry:component",
-      //         "registry:example",
-      //         "registry:internal",
-      //       ].includes(item.type)
-      //     ) {
-      //       params.push({
-      //         style: style.name,
-      //         name: item.name,
-      //       })
-      //     }
-      //   }
-      // }
-
-      continue
-    }
-
-    // Handle legacy styles (e.g., new-york-v4).
     if (!Index[style.name]) {
       continue
     }

apps/v4/components/announcement.tsx

@@ -3,27 +3,12 @@ import { ArrowRightIcon } from "lucide-react"
 
 import { Badge } from "@/registry/new-york-v4/ui/badge"
 
-function BaseUILogo() {
-  return (
-    <svg width="17" height="24" viewBox="0 0 17 24" className="size-3">
-      <path
-        fill="currentColor"
-        d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z"
-      />
-      <path
-        fill="currentColor"
-        d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z"
-      />
-    </svg>
-  )
-}
-
 export function Announcement() {
   return (
     <Badge asChild variant="secondary" className="bg-transparent">
       <Link href="/docs/changelog">
-        <BaseUILogo />
-        Base UI Documentation <ArrowRightIcon />
+        <span className="flex size-2 rounded-full bg-blue-500" title="New" />
+        npx shadcn create <ArrowRightIcon />
       </Link>
     </Badge>
   )

apps/v4/components/chart-display.tsx

@@ -5,7 +5,6 @@ import { type z } from "zod"
 import { highlightCode } from "@/lib/highlight-code"
 import { getRegistryItem } from "@/lib/registry"
 import { cn } from "@/lib/utils"
-import { ChartIframe } from "@/components/chart-iframe"
 import { ChartToolbar } from "@/components/chart-toolbar"
 import { type Style } from "@/registry/_legacy-styles"
 
@@ -13,43 +12,50 @@ export type Chart = z.infer<typeof registryItemSchema> & {
   highlightedCode: string
 }
 
-export function ChartDisplay({
-  chart,
-  style,
+export async function ChartDisplay({
+  name,
+  styleName,
+  children,
   className,
 }: {
-  chart: Chart
-  style: string
+  name: string
+  styleName: Style["name"]
 } & React.ComponentProps<"div">) {
+  const chart = await getCachedRegistryItem(name, styleName)
+  const highlightedCode = await getChartHighlightedCode(
+    chart?.files?.[0]?.content ?? ""
+  )
+
+  if (!chart || !highlightedCode) {
+    return null
+  }
+
   return (
     <div
       className={cn(
-        "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl transition-all duration-200 ease-in-out hover:z-30",
+        "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200 ease-in-out hover:z-30",
         className
       )}
     >
       <ChartToolbar
-        chart={chart}
-        className="relative z-20 flex justify-end px-3 py-2.5"
-      />
-      <div className="bg-background relative z-10 overflow-hidden rounded-xl">
-        <ChartIframe
-          src={`/view/${style}/${chart.name}`}
-          height={460}
-          title={chart.name}
-        />
+        chart={{ ...chart, highlightedCode }}
+        className="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
+      >
+        {children}
+      </ChartToolbar>
+      <div className="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+        {children}
       </div>
     </div>
   )
 }
 
-// Exported for parallel prefetching in page components.
-export const getCachedRegistryItem = React.cache(
+const getCachedRegistryItem = React.cache(
   async (name: string, styleName: Style["name"]) => {
     return await getRegistryItem(name, styleName)
   }
 )
 
-export const getChartHighlightedCode = React.cache(async (content: string) => {
+const getChartHighlightedCode = React.cache(async (content: string) => {
   return await highlightCode(content)
 })

apps/v4/components/chart-iframe.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export function ChartIframe({
-  src,
-  height,
-  title,
-}: {
-  src: string
-  height: number
-  title: string
-}) {
-  const [loaded, setLoaded] = React.useState(false)
-
-  return (
-    <iframe
-      src={src}
-      className={cn(
-        "w-full border-none transition-opacity duration-300",
-        loaded ? "opacity-100" : "opacity-0"
-      )}
-      height={height}
-      loading="lazy"
-      title={title}
-      onLoad={() => setLoaded(true)}
-    />
-  )
-}

apps/v4/components/chart-toolbar.tsx

@@ -46,7 +46,7 @@ export function ChartToolbar({
 }
 
 function ChartTitle({ chart }: { chart: Chart }) {
-  if (chart.name.includes("chart-line")) {
+  if (chart.name.includes("charts-line")) {
     return (
       <>
         <LineChartIcon /> Line Chart

apps/v4/components/code-tabs.tsx

@@ -18,7 +18,7 @@ export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
       onValueChange={(value) =>
         setConfig({ ...config, installationType: value as "cli" | "manual" })
       }
-      className="relative mt-6 w-full *:data-[slot=tabs-list]:gap-6"
+      className="relative mt-6 w-full"
     >
       {children}
     </Tabs>

apps/v4/components/command-menu.tsx

@@ -1,17 +1,15 @@
 "use client"
 
 import * as React from "react"
-import { usePathname, useRouter } from "next/navigation"
+import { useRouter } from "next/navigation"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { IconArrowRight } from "@tabler/icons-react"
 import { useDocsSearch } from "fumadocs-core/search/client"
-import { CornerDownLeftIcon, SquareDashedIcon, XIcon } from "lucide-react"
+import { CornerDownLeftIcon, SquareDashedIcon } from "lucide-react"
 
 import { type Color, type ColorPalette } from "@/lib/colors"
 import { trackEvent } from "@/lib/events"
 import { showMcpDocs } from "@/lib/flags"
-import { getCurrentBase, getPagesFromFolder } from "@/lib/page-tree"
 import { type source } from "@/lib/source"
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
@@ -28,13 +26,13 @@ import {
 } from "@/registry/new-york-v4/ui/command"
 import {
   Dialog,
+  DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogPortal,
   DialogTitle,
   DialogTrigger,
 } from "@/registry/new-york-v4/ui/dialog"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
+import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { Spinner } from "@/registry/new-york-v4/ui/spinner"
 
@@ -51,9 +49,7 @@ export function CommandMenu({
   navItems?: { href: string; label: string }[]
 }) {
   const router = useRouter()
-  const pathname = usePathname()
   const [config] = useConfig()
-  const currentBase = getCurrentBase(pathname)
   const [open, setOpen] = React.useState(false)
   const [selectedType, setSelectedType] = React.useState<
     "color" | "page" | "component" | "block" | null
@@ -142,13 +138,10 @@ export function CommandMenu({
     [setSelectedType, setCopyPayload, packageManager]
   )
 
-  const runCommand = React.useCallback(
-    (command: () => unknown) => {
-      setOpen(false)
-      command()
-    },
-    [setOpen]
-  )
+  const runCommand = React.useCallback((command: () => unknown) => {
+    setOpen(false)
+    command()
+  }, [])
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -214,7 +207,10 @@ export function CommandMenu({
           </div>
         </Button>
       </DialogTrigger>
-      <DialogContent className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800">
+      <DialogContent
+        showCloseButton={false}
+        className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800"
+      >
         <DialogHeader className="sr-only">
           <DialogTitle>Search documentation...</DialogTitle>
           <DialogDescription>Search for a command to run...</DialogDescription>
@@ -273,37 +269,40 @@ export function CommandMenu({
                 className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
               >
                 {group.type === "folder" &&
-                  getPagesFromFolder(group, currentBase).map((item) => {
-                    const isComponent = item.url.includes("/components/")
+                  group.children.map((item) => {
+                    if (item.type === "page") {
+                      const isComponent = item.url.includes("/components/")
 
-                    if (!showMcpDocs && item.url.includes("/mcp")) {
-                      return null
+                      if (!showMcpDocs && item.url.includes("/mcp")) {
+                        return null
+                      }
+
+                      return (
+                        <CommandMenuItem
+                          key={item.url}
+                          value={
+                            item.name?.toString()
+                              ? `${group.name} ${item.name}`
+                              : ""
+                          }
+                          keywords={isComponent ? ["component"] : undefined}
+                          onHighlight={() =>
+                            handlePageHighlight(isComponent, item)
+                          }
+                          onSelect={() => {
+                            runCommand(() => router.push(item.url))
+                          }}
+                        >
+                          {isComponent ? (
+                            <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
+                          ) : (
+                            <IconArrowRight />
+                          )}
+                          {item.name}
+                        </CommandMenuItem>
+                      )
                     }
-
-                    return (
-                      <CommandMenuItem
-                        key={item.url}
-                        value={
-                          item.name?.toString()
-                            ? `${group.name} ${item.name}`
-                            : ""
-                        }
-                        keywords={isComponent ? ["component"] : undefined}
-                        onHighlight={() =>
-                          handlePageHighlight(isComponent, item)
-                        }
-                        onSelect={() => {
-                          runCommand(() => router.push(item.url))
-                        }}
-                      >
-                        {isComponent ? (
-                          <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
-                        ) : (
-                          <IconArrowRight />
-                        )}
-                        {item.name}
-                      </CommandMenuItem>
-                    )
+                    return null
                   })}
               </CommandGroup>
             ))}
@@ -524,30 +523,3 @@ function SearchResults({
     </CommandGroup>
   )
 }
-
-function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogPrimitive.Overlay
-        data-slot="dialog-overlay"
-        className="fixed inset-0 z-50 bg-black/50"
-      />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}

apps/v4/components/component-preview-tabs.tsx

@@ -3,11 +3,9 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york-v4/ui/button"
 
 export function ComponentPreviewTabs({
   className,
-  previewClassName,
   align = "center",
   hideCode = false,
   chromeLessOnMobile = false,
@@ -15,19 +13,16 @@ export function ComponentPreviewTabs({
   source,
   ...props
 }: React.ComponentProps<"div"> & {
-  previewClassName?: string
   align?: "center" | "start" | "end"
   hideCode?: boolean
   chromeLessOnMobile?: boolean
   component: React.ReactNode
   source: React.ReactNode
 }) {
-  const [isMobileCodeVisible, setIsMobileCodeVisible] = React.useState(false)
-
   return (
     <div
       className={cn(
-        "group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-xl border",
+        "group relative mt-4 mb-12 flex flex-col gap-2 rounded-lg border",
         className
       )}
       {...props}
@@ -35,10 +30,9 @@ export function ComponentPreviewTabs({
       <div data-slot="preview">
         <div
           data-align={align}
-          data-chromeless={chromeLessOnMobile}
           className={cn(
-            "preview flex h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
-            previewClassName
+            "preview flex w-full justify-center data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start",
+            chromeLessOnMobile ? "sm:p-10" : "h-[450px] p-10"
           )}
         >
           {component}
@@ -46,32 +40,9 @@ export function ComponentPreviewTabs({
         {!hideCode && (
           <div
             data-slot="code"
-            data-mobile-code-visible={isMobileCodeVisible}
-            className="relative overflow-hidden data-[mobile-code-visible=false]:max-h-24 md:max-h-none data-[mobile-code-visible=false]:md:max-h-none [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
+            className="overflow-hidden [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-[400px]"
           >
             {source}
-            {!isMobileCodeVisible && (
-              <div className="absolute inset-0 flex items-center justify-center md:hidden">
-                <div
-                  className="absolute inset-0"
-                  style={{
-                    background:
-                      "linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
-                  }}
-                />
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="outline"
-                  className="bg-background text-foreground dark:bg-background dark:text-foreground relative z-10"
-                  onClick={() => {
-                    setIsMobileCodeVisible(true)
-                  }}
-                >
-                  View Code
-                </Button>
-              </div>
-            )}
           </div>
         )}
       </div>

apps/v4/components/component-preview.tsx

@@ -1,33 +1,45 @@
-import * as React from "react"
 import Image from "next/image"
 
-import { getRegistryComponent } from "@/lib/registry"
 import { ComponentPreviewTabs } from "@/components/component-preview-tabs"
 import { ComponentSource } from "@/components/component-source"
+import { Index } from "@/registry/__index__"
+import { type Style } from "@/registry/_legacy-styles"
 
 export function ComponentPreview({
   name,
+  styleName = "new-york-v4",
   type,
   className,
-  previewClassName,
   align = "center",
   hideCode = false,
   chromeLessOnMobile = false,
-  styleName = "new-york-v4",
   ...props
 }: React.ComponentProps<"div"> & {
   name: string
-  styleName?: string
+  styleName?: Style["name"]
   align?: "center" | "start" | "end"
   description?: string
   hideCode?: boolean
   type?: "block" | "component" | "example"
   chromeLessOnMobile?: boolean
-  previewClassName?: string
 }) {
+  const Component = Index[styleName]?.[name]?.component
+
+  if (!Component) {
+    return (
+      <p className="text-muted-foreground mt-6 text-sm">
+        Component{" "}
+        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+          {name}
+        </code>{" "}
+        not found in registry.
+      </p>
+    )
+  }
+
   if (type === "block") {
     return (
-      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-xl border md:-mx-1">
+      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-1">
         <Image
           src={`/r/styles/new-york-v4/${name}-light.png`}
           alt={name}
@@ -49,27 +61,12 @@ export function ComponentPreview({
     )
   }
 
-  const Component = getRegistryComponent(name, styleName)
-
-  if (!Component) {
-    return (
-      <p className="text-muted-foreground mt-6 text-sm">
-        Component{" "}
-        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
-          {name}
-        </code>{" "}
-        not found in registry.
-      </p>
-    )
-  }
-
   return (
     <ComponentPreviewTabs
       className={className}
-      previewClassName={previewClassName}
       align={align}
       hideCode={hideCode}
-      component={<DynamicComponent name={name} styleName={styleName} />}
+      component={<Component />}
       source={
         <ComponentSource
           name={name}
@@ -82,22 +79,3 @@ export function ComponentPreview({
     />
   )
 }
-
-function DynamicComponent({
-  name,
-  styleName,
-}: {
-  name: string
-  styleName: string
-}) {
-  const Component = React.useMemo(
-    () => getRegistryComponent(name, styleName),
-    [name, styleName]
-  )
-
-  if (!Component) {
-    return null
-  }
-
-  return React.createElement(Component)
-}

apps/v4/components/component-source.tsx

@@ -3,12 +3,12 @@ import path from "node:path"
 import * as React from "react"
 
 import { highlightCode } from "@/lib/highlight-code"
-import { getDemoItem, getRegistryItem } from "@/lib/registry"
-import { formatCode } from "@/lib/rehype"
+import { getRegistryItem } from "@/lib/registry"
 import { cn } from "@/lib/utils"
 import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper"
 import { CopyButton } from "@/components/copy-button"
 import { getIconForLanguageExtension } from "@/components/icons"
+import { type Style } from "@/registry/_legacy-styles"
 
 export async function ComponentSource({
   name,
@@ -24,7 +24,7 @@ export async function ComponentSource({
   title?: string
   language?: string
   collapsible?: boolean
-  styleName?: string
+  styleName?: Style["name"]
 }) {
   if (!name && !src) {
     return null
@@ -33,9 +33,7 @@ export async function ComponentSource({
   let code: string | undefined
 
   if (name) {
-    const item =
-      (await getDemoItem(name, styleName)) ??
-      (await getRegistryItem(name, styleName))
+    const item = await getRegistryItem(name, styleName)
     code = item?.files?.[0]?.content
   }
 
@@ -48,7 +46,12 @@ export async function ComponentSource({
     return null
   }
 
-  code = await formatCode(code, styleName)
+  // Fix imports.
+  // Replace @/registry/${style}/ with @/components/.
+  code = code.replaceAll(`@/registry/${styleName}/`, "@/components/")
+
+  // Replace export default with export.
+  code = code.replaceAll("export default", "export")
   code = code.replaceAll("/* eslint-disable react/no-children-prop */\n", "")
 
   const lang = language ?? title?.split(".").pop() ?? "tsx"

apps/v4/components/components-list.tsx

@@ -1,16 +1,20 @@
 import Link from "next/link"
 
 import { PAGES_NEW } from "@/lib/docs"
-import { getPagesFromFolder, type PageTreeFolder } from "@/lib/page-tree"
+import { source } from "@/lib/source"
 
-export function ComponentsList({
-  componentsFolder,
-  currentBase,
-}: {
-  componentsFolder: PageTreeFolder
-  currentBase: string
-}) {
-  const list = getPagesFromFolder(componentsFolder, currentBase)
+export function ComponentsList() {
+  const components = source.pageTree.children.find(
+    (page) => page.$id === "components"
+  )
+
+  if (components?.type !== "folder") {
+    return
+  }
+
+  const list = components.children.filter(
+    (component) => component.type === "page"
+  )
 
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">

apps/v4/components/directory-add-button.tsx

@@ -1,11 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { IconCheck, IconCopy, IconPlus } from "@tabler/icons-react"
+import Link from "next/link"
+import { IconCheck } from "@tabler/icons-react"
 
-import { useConfig } from "@/hooks/use-config"
+import { cn } from "@/lib/utils"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { useIsMobile } from "@/hooks/use-mobile"
-import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { CopyButton } from "@/components/copy-button"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Dialog,
@@ -27,114 +29,77 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/registry/new-york-v4/ui/drawer"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 
 export function DirectoryAddButton({
   registry,
 }: {
-  registry: { name: string }
+  registry: {
+    name: string
+    url: string
+  }
 }) {
-  const [config, setConfig] = useConfig()
-  const [hasCopied, setHasCopied] = React.useState(false)
-  const [open, setOpen] = React.useState(false)
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
   const isMobile = useIsMobile()
+  const [open, setOpen] = React.useState(false)
 
-  const packageManager = config.packageManager || "pnpm"
-
-  const commands = React.useMemo(() => {
-    return {
-      pnpm: `pnpm dlx shadcn@latest registry add ${registry.name}`,
-      npm: `npx shadcn@latest registry add ${registry.name}`,
-      yarn: `yarn dlx shadcn@latest registry add ${registry.name}`,
-      bun: `bunx --bun shadcn@latest registry add ${registry.name}`,
-    }
-  }, [registry.name])
-
-  const command = commands[packageManager]
-
-  React.useEffect(() => {
-    if (hasCopied) {
-      const timer = setTimeout(() => setHasCopied(false), 2000)
-      return () => clearTimeout(timer)
-    }
-  }, [hasCopied])
-
-  const handleCopy = React.useCallback(() => {
-    copyToClipboardWithMeta(command, {
-      name: "copy_registry_add_command",
-      properties: {
-        command,
-        registry: registry.name,
-      },
-    })
-    setHasCopied(true)
-  }, [command, registry.name])
+  const jsonValue = `{
+  "registries": {
+    "${registry.name}": "${registry.url}"
+  }
+}`
 
   const Trigger = (
-    <Button size="sm" variant="outline" className="relative z-10">
-      Add <IconPlus />
+    <Button
+      size="sm"
+      variant="outline"
+      className="relative z-10"
+      onClick={() => setOpen(true)}
+    >
+      {isCopied ? (
+        <IconCheck />
+      ) : (
+        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <title>Model Context Protocol</title>
+          <path
+            d="M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0 2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l.1-.098 7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0 .835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902 4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0 2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18.84.84 0 0 0-.59-.245"
+            className="fill-foreground"
+          />
+        </svg>
+      )}
+      MCP
     </Button>
   )
 
   const Content = (
-    <Tabs
-      value={packageManager}
-      onValueChange={(value) => {
-        setConfig({
-          ...config,
-          packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
-        })
-      }}
-      className="gap-0 overflow-hidden rounded-lg border"
-    >
-      <div className="flex items-center gap-2 border-b p-2">
-        <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
-          <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          <TabsTrigger value="npm">npm</TabsTrigger>
-          <TabsTrigger value="yarn">yarn</TabsTrigger>
-          <TabsTrigger value="bun">bun</TabsTrigger>
-        </TabsList>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              size="icon-sm"
-              variant="ghost"
-              className="ml-auto size-7 rounded-lg"
-              onClick={handleCopy}
-            >
-              {hasCopied ? (
-                <IconCheck className="size-4" />
-              ) : (
-                <IconCopy className="size-4" />
-              )}
-              <span className="sr-only">Copy command</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            {hasCopied ? "Copied!" : "Copy command"}
-          </TooltipContent>
-        </Tooltip>
-      </div>
-      {Object.entries(commands).map(([key, cmd]) => (
-        <TabsContent key={key} value={key} className="mt-0">
-          <div className="bg-surface text-surface-foreground px-3 py-3">
-            <div className="no-scrollbar overflow-x-auto">
-              <code className="font-mono text-sm whitespace-nowrap">{cmd}</code>
-            </div>
-          </div>
-        </TabsContent>
-      ))}
-    </Tabs>
+    <>
+      <figure
+        data-rehype-pretty-code-figure
+        className={cn(
+          "group relative mt-0",
+          !isMobile &&
+            "dark:bg-background dark:[&_[data-line]:not([data-highlighted-line]):before]:bg-background!"
+        )}
+      >
+        <CopyButton
+          value={jsonValue}
+          className="top-3 right-2"
+          tooltip="Copy Code"
+        />
+        <div data-rehype-pretty-code-title>components.json</div>
+        <pre className="no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0">
+          <code data-line-numbers data-language="json">
+            <span data-line>{"{"}</span>
+            <span data-line>{'  "registries": {'}</span>
+            <span
+              data-line
+              data-highlighted-line
+            >{`    "${registry.name}": "${registry.url}"`}</span>
+            <span data-line>{"  }"}</span>
+            <span data-line>{"}"}</span>
+          </code>
+        </pre>
+      </figure>
+    </>
   )
 
   if (isMobile) {
@@ -143,16 +108,20 @@ export function DirectoryAddButton({
         <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
         <DrawerContent>
           <DrawerHeader>
-            <DrawerTitle>Add Registry</DrawerTitle>
+            <DrawerTitle>Configure MCP</DrawerTitle>
             <DrawerDescription>
-              Run this command to add {registry.name} to your project.
+              Copy and paste the following code into your project&apos;s
+              components.json.
             </DrawerDescription>
           </DrawerHeader>
-          <div className="px-4">{Content}</div>
+          <div className="px-6">{Content}</div>
           <DrawerFooter>
             <DrawerClose asChild>
-              <Button size="sm">Done</Button>
+              <Button size="sm">Close</Button>
             </DrawerClose>
+            <Button size="sm" asChild variant="outline">
+              <Link href="/docs/mcp">Read the docs</Link>
+            </Button>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>
@@ -162,15 +131,22 @@ export function DirectoryAddButton({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{Trigger}</DialogTrigger>
-      <DialogContent className="dialog-ring animate-none! rounded-xl sm:max-w-md">
+      <DialogContent
+        className="rounded-xl border-none bg-clip-padding shadow-2xl ring-4 ring-neutral-200/80 sm:max-w-[600px] dark:bg-neutral-900 dark:ring-neutral-800"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
         <DialogHeader>
-          <DialogTitle>Add Registry</DialogTitle>
+          <DialogTitle>Configure MCP</DialogTitle>
           <DialogDescription>
-            Run this command to add {registry.name} to your project.
+            Copy and paste the following code into your project&apos;s
+            components.json.
           </DialogDescription>
         </DialogHeader>
         {Content}
-        <DialogFooter>
+        <DialogFooter className="justify-between!">
+          <Button size="sm" asChild variant="ghost">
+            <Link href="/docs/mcp">Read the docs</Link>
+          </Button>
           <DialogClose asChild>
             <Button size="sm">Done</Button>
           </DialogClose>

apps/v4/components/directory-list.tsx

@@ -50,10 +50,8 @@ export function DirectoryList() {
                     href={getHomepageUrl(registry.homepage)}
                     target="_blank"
                     rel="noopener noreferrer external"
-                    className="group flex items-center gap-1"
                   >
-                    {registry.name}{" "}
-                    <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
+                    {registry.name}
                   </a>
                 </ItemTitle>
                 {registry.description && (
@@ -63,6 +61,15 @@ export function DirectoryList() {
                 )}
               </ItemContent>
               <ItemActions className="relative z-10 hidden self-start sm:flex">
+                <Button size="sm" variant="outline" asChild>
+                  <a
+                    href={getHomepageUrl(registry.homepage)}
+                    target="_blank"
+                    rel="noopener noreferrer external"
+                  >
+                    View <IconArrowUpRight />
+                  </a>
+                </Button>
                 <DirectoryAddButton registry={registry} />
               </ItemActions>
               <ItemFooter className="justify-start pl-16 sm:hidden">

apps/v4/components/docs-base-switcher.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import { BASES } from "@/registry/bases"
-
-export function DocsBaseSwitcher({
-  base,
-  component,
-  className,
-}: {
-  base: string
-  component: string
-  className?: string
-}) {
-  const activeBase = BASES.find((baseItem) => base === baseItem.name)
-
-  return (
-    <div className={cn("inline-flex w-full items-center gap-6", className)}>
-      {BASES.map((baseItem) => (
-        <Link
-          key={baseItem.name}
-          href={`/docs/components/${baseItem.name}/${component}`}
-          data-active={base === baseItem.name}
-          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground after:bg-foreground relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:opacity-0 after:transition-opacity data-[active=true]:after:opacity-100"
-        >
-          {baseItem.title}
-        </Link>
-      ))}
-      {activeBase?.meta?.logo && (
-        <div
-          className="text-muted-foreground ml-auto size-4 shrink-0 opacity-80 [&_svg]:size-4"
-          dangerouslySetInnerHTML={{
-            __html: activeBase.meta.logo,
-          }}
-        />
-      )}
-    </div>
-  )
-}

apps/v4/components/docs-copy-page.tsx

@@ -87,70 +87,6 @@ const menuItems = {
       Open in Claude
     </a>
   ),
-  scira: (url: string) => (
-    <a
-      href={getPromptUrl("https://scira.ai/", url)}
-      target="_blank"
-      className="m-0 p-0"
-    >
-      <svg
-        width="910"
-        height="934"
-        viewBox="0 0 910 934"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
-          fill="currentColor"
-          stroke="currentColor"
-          strokeWidth="8"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
-          fill="currentColor"
-          stroke="currentColor"
-          strokeWidth="8"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
-          stroke="currentColor"
-          strokeWidth="20"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
-          stroke="currentColor"
-          strokeWidth="20"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
-          fill="currentColor"
-          stroke="currentColor"
-          strokeWidth="8"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
-          fill="currentColor"
-          stroke="currentColor"
-          strokeWidth="8"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
-          stroke="currentColor"
-          strokeWidth="30"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-      Open in Scira
-    </a>
-  ),
 }
 
 export function DocsCopyPage({ page, url }: { page: string; url: string }) {
@@ -183,10 +119,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
           <DropdownMenuTrigger asChild className="hidden sm:flex">
             {trigger}
           </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="animate-none! rounded-lg shadow-none"
-          >
+          <DropdownMenuContent align="end" className="shadow-none">
             {Object.entries(menuItems).map(([key, value]) => (
               <DropdownMenuItem key={key} asChild>
                 {value(url)}
@@ -196,13 +129,13 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
         </DropdownMenu>
         <Separator
           orientation="vertical"
-          className="!bg-foreground/5 absolute top-1 right-8 z-0 !h-6 peer-focus-visible:opacity-0 sm:right-7 sm:!h-5"
+          className="!bg-foreground/10 absolute top-0 right-8 z-0 !h-8 peer-focus-visible:opacity-0 sm:right-7 sm:!h-7"
         />
         <PopoverTrigger asChild className="flex sm:hidden">
           {trigger}
         </PopoverTrigger>
         <PopoverContent
-          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-none backdrop-blur-sm"
+          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-sm backdrop-blur-sm"
           align="start"
         >
           {Object.entries(menuItems).map(([key, value]) => (

apps/v4/components/docs-page-links.tsx

@@ -1,179 +0,0 @@
-"use client"
-
-import { IconCheck, IconCopy } from "@tabler/icons-react"
-
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-
-function getPromptUrl(baseURL: string, url: string) {
-  return `${baseURL}?q=${encodeURIComponent(
-    `I'm looking at this shadcn/ui documentation: ${url}.
-Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.
-  `
-  )}`
-}
-
-export function DocsPageLinks({ page, url }: { page: string; url: string }) {
-  const { copyToClipboard, isCopied } = useCopyToClipboard()
-
-  return (
-    <div className="flex flex-col gap-3 px-6">
-      <ul className="text-muted-foreground flex flex-col gap-2 text-[0.8rem]">
-        <li>
-          <button
-            onClick={() => copyToClipboard(page)}
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            {isCopied ? (
-              <IconCheck className="size-4" />
-            ) : (
-              <IconCopy className="size-4" />
-            )}
-            Copy page
-          </button>
-        </li>
-        <li>
-          <a
-            href={`${url}.md`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            <svg strokeLinejoin="round" viewBox="0 0 22 16" className="size-4">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
-                fill="currentColor"
-              />
-            </svg>
-            View as Markdown
-          </a>
-        </li>
-        <li>
-          <a
-            href={getPromptUrl("https://v0.dev", url)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 147 70"
-              className="size-4"
-            >
-              <path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
-            </svg>
-            Open in v0
-          </a>
-        </li>
-        <li>
-          <a
-            href={getPromptUrl("https://chatgpt.com", url)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              className="size-4"
-            >
-              <path
-                d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
-                fill="currentColor"
-              />
-            </svg>
-            Open in ChatGPT
-          </a>
-        </li>
-        <li>
-          <a
-            href={getPromptUrl("https://claude.ai/new", url)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              className="size-4"
-            >
-              <path
-                d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
-                fill="currentColor"
-              />
-            </svg>
-            Open in Claude
-          </a>
-        </li>
-        <li>
-          <a
-            href={getPromptUrl("https://scira.ai/", url)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
-          >
-            <svg
-              width="910"
-              height="934"
-              viewBox="0 0 910 934"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="size-4"
-            >
-              <path
-                d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
-                fill="currentColor"
-                stroke="currentColor"
-                strokeWidth="8"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
-                fill="currentColor"
-                stroke="currentColor"
-                strokeWidth="8"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
-                stroke="currentColor"
-                strokeWidth="20"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
-                stroke="currentColor"
-                strokeWidth="20"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
-                fill="currentColor"
-                stroke="currentColor"
-                strokeWidth="8"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
-                fill="currentColor"
-                stroke="currentColor"
-                strokeWidth="8"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
-                stroke="currentColor"
-                strokeWidth="30"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            Open in Scira
-          </a>
-        </li>
-      </ul>
-    </div>
-  )
-}

apps/v4/components/docs-sidebar.tsx

@@ -5,7 +5,6 @@ import { usePathname } from "next/navigation"
 
 import { PAGES_NEW } from "@/lib/docs"
 import { showMcpDocs } from "@/lib/flags"
-import { getCurrentBase, getPagesFromFolder } from "@/lib/page-tree"
 import type { source } from "@/lib/source"
 import {
   Sidebar,
@@ -19,15 +18,11 @@ import {
 } from "@/registry/new-york-v4/ui/sidebar"
 
 const TOP_LEVEL_SECTIONS = [
-  { name: "Introduction", href: "/docs" },
+  { name: "Get Started", href: "/docs" },
   {
     name: "Components",
     href: "/docs/components",
   },
-  {
-    name: "Installation",
-    href: "/docs/installation",
-  },
   {
     name: "Directory",
     href: "/docs/directory",
@@ -36,10 +31,6 @@ const TOP_LEVEL_SECTIONS = [
     name: "MCP Server",
     href: "/docs/mcp",
   },
-  {
-    name: "Registry",
-    href: "/docs/registry",
-  },
   {
     name: "Forms",
     href: "/docs/forms",
@@ -57,11 +48,10 @@ export function DocsSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar> & { tree: typeof source.pageTree }) {
   const pathname = usePathname()
-  const currentBase = getCurrentBase(pathname)
 
   return (
     <Sidebar
-      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-6rem)] overscroll-none bg-transparent lg:flex"
+      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-var(--footer-height)-4rem)] overscroll-none bg-transparent lg:flex"
       collapsible="none"
       {...props}
     >
@@ -112,34 +102,37 @@ export function DocsSidebar({
               <SidebarGroupContent>
                 {item.type === "folder" && (
                   <SidebarMenu className="gap-0.5">
-                    {getPagesFromFolder(item, currentBase).map((page) => {
-                      if (!showMcpDocs && page.url.includes("/mcp")) {
-                        return null
-                      }
-
-                      if (EXCLUDED_PAGES.includes(page.url)) {
+                    {item.children.map((item) => {
+                      if (
+                        !showMcpDocs &&
+                        item.type === "page" &&
+                        item.url?.includes("/mcp")
+                      ) {
                         return null
                       }
 
                       return (
-                        <SidebarMenuItem key={page.url}>
-                          <SidebarMenuButton
-                            asChild
-                            isActive={page.url === pathname}
-                            className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
-                          >
-                            <Link href={page.url}>
-                              <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
-                              {page.name}
-                              {PAGES_NEW.includes(page.url) && (
-                                <span
-                                  className="flex size-2 rounded-full bg-blue-500"
-                                  title="New"
-                                />
-                              )}
-                            </Link>
-                          </SidebarMenuButton>
-                        </SidebarMenuItem>
+                        item.type === "page" &&
+                        !EXCLUDED_PAGES.includes(item.url) && (
+                          <SidebarMenuItem key={item.url}>
+                            <SidebarMenuButton
+                              asChild
+                              isActive={item.url === pathname}
+                              className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                            >
+                              <Link href={item.url}>
+                                <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                                {item.name}
+                                {PAGES_NEW.includes(item.url) && (
+                                  <span
+                                    className="flex size-2 rounded-full bg-blue-500"
+                                    title="New"
+                                  />
+                                )}
+                              </Link>
+                            </SidebarMenuButton>
+                          </SidebarMenuItem>
+                        )
                       )
                     })}
                   </SidebarMenu>

apps/v4/components/docs-toc.tsx

@@ -107,7 +107,7 @@ export function DocsTableOfContents({
 
   return (
     <div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
-      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
+      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs">
         On This Page
       </p>
       {toc.map((item) => (

apps/v4/components/mobile-nav.tsx

@@ -2,11 +2,10 @@
 
 import * as React from "react"
 import Link, { type LinkProps } from "next/link"
-import { usePathname, useRouter } from "next/navigation"
+import { useRouter } from "next/navigation"
 
 import { PAGES_NEW } from "@/lib/docs"
 import { showMcpDocs } from "@/lib/flags"
-import { getCurrentBase, getPagesFromFolder } from "@/lib/page-tree"
 import { type source } from "@/lib/source"
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -17,15 +16,11 @@ import {
 } from "@/registry/new-york-v4/ui/popover"
 
 const TOP_LEVEL_SECTIONS = [
-  { name: "Introduction", href: "/docs" },
+  { name: "Get Started", href: "/docs" },
   {
     name: "Components",
     href: "/docs/components",
   },
-  {
-    name: "Installation",
-    href: "/docs/installation",
-  },
   {
     name: "Directory",
     href: "/docs/directory",
@@ -34,10 +29,6 @@ const TOP_LEVEL_SECTIONS = [
     name: "MCP Server",
     href: "/docs/mcp",
   },
-  {
-    name: "Registry",
-    href: "/docs/registry",
-  },
   {
     name: "Forms",
     href: "/docs/forms",
@@ -58,8 +49,6 @@ export function MobileNav({
   className?: string
 }) {
   const [open, setOpen] = React.useState(false)
-  const pathname = usePathname()
-  const currentBase = getCurrentBase(pathname)
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -136,30 +125,31 @@ export function MobileNav({
           <div className="flex flex-col gap-8">
             {tree?.children?.map((group, index) => {
               if (group.type === "folder") {
-                const pages = getPagesFromFolder(group, currentBase)
                 return (
                   <div key={index} className="flex flex-col gap-4">
                     <div className="text-muted-foreground text-sm font-medium">
                       {group.name}
                     </div>
                     <div className="flex flex-col gap-3">
-                      {pages.map((item) => {
-                        if (!showMcpDocs && item.url.includes("/mcp")) {
-                          return null
+                      {group.children.map((item) => {
+                        if (item.type === "page") {
+                          if (!showMcpDocs && item.url.includes("/mcp")) {
+                            return null
+                          }
+                          return (
+                            <MobileLink
+                              key={`${item.url}-${index}`}
+                              href={item.url}
+                              onOpenChange={setOpen}
+                              className="flex items-center gap-2"
+                            >
+                              {item.name}{" "}
+                              {PAGES_NEW.includes(item.url) && (
+                                <span className="flex size-2 rounded-full bg-blue-500" />
+                              )}
+                            </MobileLink>
+                          )
                         }
-                        return (
-                          <MobileLink
-                            key={`${item.url}-${index}`}
-                            href={item.url}
-                            onOpenChange={setOpen}
-                            className="flex items-center gap-2"
-                          >
-                            {item.name}{" "}
-                            {PAGES_NEW.includes(item.url) && (
-                              <span className="flex size-2 rounded-full bg-blue-500" />
-                            )}
-                          </MobileLink>
-                        )
                       })}
                     </div>
                   </div>

apps/v4/components/page-header.tsx

@@ -23,7 +23,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-primary leading-tighter max-w-2xl text-4xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
+        "text-primary leading-tighter max-w-2xl text-4xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tight",
         className
       )}
       {...props}

apps/v4/components/search-directory.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/registry/new-york-v4/ui/input-group"
 
 export const SearchDirectory = () => {
-  const { query, registries, setQuery } = useSearchRegistry()
+  const { query, setQuery } = useSearchRegistry()
 
   const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -29,12 +29,6 @@ export const SearchDirectory = () => {
           value={query}
           onChange={onQueryChange}
         />
-        <InputGroupAddon align="inline-end">
-          <span className="text-muted-foreground tabular-nums sm:text-xs">
-            {registries.length}{" "}
-            {registries.length === 1 ? "registry" : "registries"}
-          </span>
-        </InputGroupAddon>
         <InputGroupAddon
           align="inline-end"
           data-disabled={!query.length}

apps/v4/components/site-footer.tsx

@@ -2,7 +2,7 @@ import { siteConfig } from "@/lib/config"
 
 export function SiteFooter() {
   return (
-    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 group-has-[[data-slot=designer]]/body:hidden group-has-[[data-slot=docs]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent dark:group-has-[.section-soft]/body:bg-surface/40">
+    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 group-has-[[data-slot=designer]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent">
       <div className="container-wrapper px-4 xl:px-6">
         <div className="flex h-(--footer-height) items-center justify-between">
           <div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">

apps/v4/components/tailwind-indicator.tsx

@@ -1,4 +1,4 @@
-const SHOW = true
+const SHOW = false
 
 export function TailwindIndicator({
   forceMount = false,

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

@@ -4,50 +4,6 @@ description: Latest updates and announcements.
 toc: false
 ---
 
-## January 2026 - Base UI Documentation
-
-We've shipped full documentation for Base UI components.
-
-<div className="bg-muted/50 mt-6 flex w-full items-center justify-center rounded-lg border py-32">
-  <svg width="17" height="24" viewBox="0 0 17 24" className="size-12">
-    <path
-      fill="currentColor"
-      d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z"
-    />
-    <path
-      fill="currentColor"
-      d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z"
-    />
-  </svg>
-</div>
-
-When we launched `npx shadcn create` in December, we introduced the ability to choose between Radix and Base UI as your component library. Today, we're following up with complete documentation for all Base UI components.
-
-### What's New
-
-- **Full Base UI docs** - Every component now has dedicated documentation for Base UI, covering usage, props, and examples.
-- **Rebuilt examples** - All component examples have been rebuilt for both Radix and Base UI. Switch between them to see the implementation differences.
-- **Side-by-side comparison** - The docs make it easy to compare how components work across both libraries.
-
-### Same Abstraction, Different Primitives
-
-The goal remains the same: give you a consistent API regardless of which primitive library you choose. The components look and behave the same way. Only the underlying implementation changes.
-
-```tsx
-// Works the same whether you're using Radix or Base UI.
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
-```
-
-If you're starting a new project, run `npx shadcn create` and pick your preferred library. The CLI handles the rest.
-
-<Button asChild size="sm">
-  <Link href="/create" className="mt-6 no-underline!">
-    Try shadcn/create
-  </Link>
-</Button>
-
----
-
 ## December 2025 - npx shadcn create
 
 From the very first commit, the goal of shadcn/ui was to make it customizable.

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

@@ -3,22 +3,12 @@ title: Registry Directory
 description: Discover community registries for shadcn/ui components and blocks.
 ---
 
-import { TriangleAlertIcon } from "lucide-react"
-
 These registries are built into the CLI with no additional configuration required. To add a component, run: `npx shadcn add @<registry>/<component>`.
 
-<Callout
-  type="warning"
-  className="border-amber-200 bg-amber-50 font-semibold dark:border-amber-900 dark:bg-amber-950"
->
-  Community registries are maintained by third-party developers. Always review
-  code on installation to ensure it meets your security and quality standards.
-</Callout>
+<DirectoryList />
 
 Don't see a registry? Learn how to [add it here](/docs/registry/registry-index).
 
-<DirectoryList />
-
 ## Documentation
 
 You can use the `shadcn` CLI to run your own code registry. Running your own registry allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.

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

@@ -29,7 +29,6 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
     <TabsTrigger value="cursor">Cursor</TabsTrigger>
     <TabsTrigger value="vscode">VS Code</TabsTrigger>
     <TabsTrigger value="codex">Codex</TabsTrigger>
-    <TabsTrigger value="opencode">OpenCode</TabsTrigger>
   </TabsList>
   <TabsContent value="claude" className="mt-4">
     **Run the following command** in your project:
@@ -96,19 +95,6 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
        - Create a contact form using components from the shadcn registry
 
   </TabsContent>
-
-  <TabsContent value="opencode" className="mt-4">
-    **Run the following command** in your project:
-       ```bash
-       npx shadcn@latest mcp init --client opencode
-       ```
-
-    **Restart OpenCode** and try the following prompts:
-       - Show me all available components in the shadcn registry
-       - Add the button, dialog and card components to my project
-       - Create a contact form using components from the shadcn registry
-
-  </TabsContent>
 </Tabs>
 
 ---
@@ -167,7 +153,7 @@ To use the shadcn MCP server with Claude Code, add the following configuration t
 
 After adding the configuration, restart Claude Code and run `/mcp` to see the shadcn MCP server in the list. If you see `Connected`, you're good to go.
 
-See the [Claude Code MCP documentation](https://code.claude.com/docs/en/mcp) for more details.
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.
 
 ### Cursor
 

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

@@ -108,7 +108,6 @@ Here's the list of variables available for customization:
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -143,7 +142,6 @@ Here's the list of variables available for customization:
   --accent: oklch(0.371 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -220,7 +218,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -255,7 +252,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -299,7 +295,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.97 0.001 106.424);
   --accent-foreground: oklch(0.216 0.006 56.043);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.923 0.003 48.717);
   --input: oklch(0.923 0.003 48.717);
   --ring: oklch(0.709 0.01 56.259);
@@ -334,7 +329,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.268 0.007 34.298);
   --accent-foreground: oklch(0.985 0.001 106.423);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.553 0.013 58.071);
@@ -378,7 +372,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.705 0.015 286.067);
@@ -413,7 +406,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
@@ -457,7 +449,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.967 0.003 264.542);
   --accent-foreground: oklch(0.21 0.034 264.665);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.928 0.006 264.531);
   --input: oklch(0.928 0.006 264.531);
   --ring: oklch(0.707 0.022 261.325);
@@ -492,7 +483,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.278 0.033 256.848);
   --accent-foreground: oklch(0.985 0.002 247.839);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
@@ -536,7 +526,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.968 0.007 247.896);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
@@ -571,7 +560,6 @@ For reference, here's a list of the base colors that are available.
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);

apps/v4/content/docs/components/accordion.mdx

@@ -0,0 +1,76 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/accordion
+  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
+---
+
+<ComponentPreview
+  name="accordion-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]"
+  description="An accordion with three items"
+  align="start"
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add accordion
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="accordion" title="components/ui/accordion.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+```
+
+```tsx showLineNumbers
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

apps/v4/content/docs/components/alert-dialog.mdx

@@ -0,0 +1,88 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
+  api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
+---
+
+<ComponentPreview
+  name="alert-dialog-demo"
+  title="An alert dialog with cancel and continue buttons."
+  description="An alert dialog with cancel and continue buttons."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add alert-dialog
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert-dialog" title="components/ui/alert-dialog.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+```
+
+```tsx showLineNumbers
+<AlertDialog>
+  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```

apps/v4/content/docs/components/alert.mdx

@@ -0,0 +1,59 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+component: true
+---
+
+<ComponentPreview
+  name="alert-demo"
+  title="An alert with an icon, title and description."
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add alert
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert" title="components/ui/alert.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+```
+
+```tsx showLineNumbers
+<Alert variant="default | destructive">
+  <Terminal />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```

apps/v4/content/docs/components/aspect-ratio.mdx

@@ -0,0 +1,64 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
+  api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
+---
+
+<ComponentPreview
+  name="aspect-ratio-demo"
+  title="Aspect Ratio"
+  description="A component that displays an image with a 16:9 aspect ratio."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add aspect-ratio
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aspect-ratio" title="components/ui/aspect-ratio.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+```
+
+```tsx showLineNumbers
+<AspectRatio ratio={16 / 9}>
+  <Image src="..." alt="Image" className="rounded-md object-cover" />
+</AspectRatio>
+```

apps/v4/content/docs/components/avatar.mdx

@@ -0,0 +1,65 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/avatar
+  api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
+---
+
+<ComponentPreview
+  name="avatar-demo"
+  title="Avatar"
+  description="An avatar with a fallback."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add avatar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-avatar
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="avatar" title="components/ui/avatar.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+```
+
+```tsx showLineNumbers
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```

apps/v4/content/docs/components/badge.mdx

@@ -0,0 +1,71 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+component: true
+---
+
+<ComponentPreview
+  name="badge-demo"
+  title="Badge"
+  description="A default badge"
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add badge
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="badge" title="components/ui/badge.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Badge } from "@/components/ui/badge"
+```
+
+```tsx
+<Badge variant="default | outline | secondary | destructive">Badge</Badge>
+```
+
+### Link
+
+You can use the `asChild` prop to make another component look like a badge. Here's an example of a link that looks like a badge.
+
+```tsx showLineNumbers
+import Link from "next/link"
+
+import { Badge } from "@/components/ui/badge"
+
+export function LinkAsBadge() {
+  return (
+    <Badge asChild>
+      <Link href="/">Badge</Link>
+    </Badge>
+  )
+}
+```

apps/v4/content/docs/components/base/accordion.mdx

@@ -1,142 +0,0 @@
----
-title: Accordion
-description: A vertically stacked set of interactive headings that each reveal a section of content.
-base: base
-component: true
-links:
-  doc: https://base-ui.com/react/components/accordion
-  api: https://base-ui.com/react/components/accordion#api-reference
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-demo"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add accordion
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="accordion"
-  title="components/ui/accordion.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-```
-
-```tsx showLineNumbers
-<Accordion defaultValue={["item-1"]}>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Examples
-
-### Basic
-
-A basic accordion that shows one item at a time. The first item is open by default.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-basic"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
-/>
-
-### Multiple
-
-Use the `multiple` prop to allow multiple items to be open at the same time.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-multiple"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[450px]"
-/>
-
-### Disabled
-
-Use the `disabled` prop on `AccordionItem` to disable individual items.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-disabled"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
-/>
-
-### Borders
-
-Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-borders"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
-/>
-
-### Card
-
-Wrap the `Accordion` in a `Card` component.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="accordion-card"
-  align="start"
-  previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
-/>
-
-## API Reference
-
-See the [Base UI](https://base-ui.com/react/components/accordion#api-reference) documentation for more information.

apps/v4/content/docs/components/base/alert-dialog.mdx

@@ -1,159 +0,0 @@
----
-title: Alert Dialog
-description: A modal dialog that interrupts the user with important content and expects a response.
-featured: true
-base: base
-component: true
-links:
-  doc: https://base-ui.com/react/components/alert-dialog
-  api: https://base-ui.com/react/components/alert-dialog#api-reference
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-demo"
-  previewClassName="h-56"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add alert-dialog
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="alert-dialog"
-  title="components/ui/alert-dialog.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-```
-
-```tsx showLineNumbers
-<AlertDialog>
-  <AlertDialogTrigger render={<Button variant="outline" />}>
-    Show Dialog
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>
-        This action cannot be undone. This will permanently delete your account
-        from our servers.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-## Examples
-
-### Basic
-
-A basic alert dialog with a title, description, and cancel and continue buttons.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-basic"
-  previewClassName="h-56"
-/>
-
-### Small
-
-Use the `size="sm"` prop to make the alert dialog smaller.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-small"
-  previewClassName="h-56"
-/>
-
-### Media
-
-Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-media"
-  previewClassName="h-56"
-/>
-
-### Small with Media
-
-Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-small-media"
-  previewClassName="h-56"
-/>
-
-### Destructive
-
-Use the `AlertDialogAction` component to add a destructive action button to the alert dialog.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-destructive"
-  previewClassName="h-56"
-/>
-
-## API Reference
-
-### size
-
-Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
-
-| Prop   | Type                | Default     |
-| ------ | ------------------- | ----------- |
-| `size` | `"default" \| "sm"` | `"default"` |
-
-For more information about the other components and their props, see the [Base UI documentation](https://base-ui.com/react/components/alert-dialog#api-reference).

apps/v4/content/docs/components/base/alert.mdx

@@ -1,144 +0,0 @@
----
-title: Alert
-description: Displays a callout for user attention.
-base: base
-component: true
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-demo"
-  previewClassName="h-auto sm:h-72 p-6"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add alert
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="alert" title="components/ui/alert.tsx" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Alert,
-  AlertAction,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert"
-```
-
-```tsx showLineNumbers
-<Alert>
-  <InfoIcon />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-  <AlertAction>
-    <Button variant="outline">Enable</Button>
-  </AlertAction>
-</Alert>
-```
-
-## Examples
-
-### Basic
-
-A basic alert with an icon, title and description.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-basic"
-  previewClassName="h-auto sm:h-72 p-6"
-/>
-
-### Destructive
-
-Use `variant="destructive"` to create a destructive alert.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-destructive"
-  previewClassName="h-auto sm:h-72 p-6"
-/>
-
-### Action
-
-Use `AlertAction` to add a button or other action element to the alert.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-action"
-  previewClassName="h-auto sm:h-72 p-6"
-/>
-
-### Custom Colors
-
-You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="alert-colors"
-  previewClassName="h-auto sm:h-72 p-6"
-/>
-
-## API Reference
-
-### Alert
-
-The `Alert` component displays a callout for user attention.
-
-| Prop      | Type                         | Default     |
-| --------- | ---------------------------- | ----------- |
-| `variant` | `"default" \| "destructive"` | `"default"` |
-
-### AlertTitle
-
-The `AlertTitle` component displays the title of the alert.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### AlertDescription
-
-The `AlertDescription` component displays the description or content of the alert.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### AlertAction
-
-The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |

apps/v4/content/docs/components/base/aspect-ratio.mdx

@@ -1,93 +0,0 @@
----
-title: Aspect Ratio
-description: Displays content within a desired ratio.
-base: base
-component: true
----
-
-<ComponentPreview name="aspect-ratio-demo" styleName="base-nova" />
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add aspect-ratio
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="aspect-ratio"
-  title="components/ui/aspect-ratio.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-```
-
-```tsx showLineNumbers
-<AspectRatio ratio={16 / 9}>
-  <Image src="..." alt="Image" className="rounded-md object-cover" />
-</AspectRatio>
-```
-
-## Examples
-
-### Square
-
-A square aspect ratio component using the `ratio={1 / 1}` prop. This is useful for displaying images in a square format.
-
-<ComponentPreview name="aspect-ratio-square" styleName="base-nova" />
-
-### Portrait
-
-A portrait aspect ratio component using the `ratio={9 / 16}` prop. This is useful for displaying images in a portrait format.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="aspect-ratio-portrait"
-  previewClassName="h-96"
-/>
-
-## API Reference
-
-### AspectRatio
-
-The `AspectRatio` component displays content within a desired ratio.
-
-| Prop        | Type     | Default | Required |
-| ----------- | -------- | ------- | -------- |
-| `ratio`     | `number` | -       | Yes      |
-| `className` | `string` | -       | No       |
-
-For more information, see the [Base UI documentation](https://base-ui.com/react/components/aspect-ratio#api-reference).

apps/v4/content/docs/components/base/avatar.mdx

@@ -1,185 +0,0 @@
----
-title: Avatar
-description: An image element with a fallback for representing the user.
-base: base
-component: true
-links:
-  doc: https://base-ui.com/react/components/avatar
-  api: https://base-ui.com/react/components/avatar#api-reference
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="avatar-demo"
-  previewClassName="h-72"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add avatar
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="avatar"
-  title="components/ui/avatar.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-```
-
-```tsx showLineNumbers
-<Avatar>
-  <AvatarImage src="https://github.com/shadcn.png" />
-  <AvatarFallback>CN</AvatarFallback>
-</Avatar>
-```
-
-## Examples
-
-### Basic
-
-A basic avatar component with an image and a fallback.
-
-<ComponentPreview styleName="base-nova" name="avatar-basic" />
-
-### Badge
-
-Use the `AvatarBadge` component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
-
-<ComponentPreview styleName="base-nova" name="avatar-badge" />
-
-Use the `className` prop to add custom styles to the badge such as custom colors, sizes, etc.
-
-```tsx showLineNumbers
-<Avatar>
-  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-  <AvatarFallback>CN</AvatarFallback>
-  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
-</Avatar>
-```
-
-### Badge with Icon
-
-You can also use an icon inside `<AvatarBadge>`.
-
-<ComponentPreview styleName="base-nova" name="avatar-badge-icon" />
-
-### Avatar Group
-
-Use the `AvatarGroup` component to add a group of avatars.
-
-<ComponentPreview styleName="base-nova" name="avatar-group" />
-
-### Avatar Group Count
-
-Use `<AvatarGroupCount>` to add a count to the group.
-
-<ComponentPreview styleName="base-nova" name="avatar-group-count" />
-
-### Avatar Group with Icon
-
-You can also use an icon inside `<AvatarGroupCount>`.
-
-<ComponentPreview styleName="base-nova" name="avatar-group-count-icon" />
-
-### Sizes
-
-Use the `size` prop to change the size of the avatar.
-
-<ComponentPreview styleName="base-nova" name="avatar-size" />
-
-### Dropdown
-
-You can use the `Avatar` component as a trigger for a dropdown menu.
-
-<ComponentPreview styleName="base-nova" name="avatar-dropdown" />
-
-## API Reference
-
-### Avatar
-
-The `Avatar` component is the root component that wraps the avatar image and fallback.
-
-| Prop        | Type                        | Default     |
-| ----------- | --------------------------- | ----------- |
-| `size`      | `"default" \| "sm" \| "lg"` | `"default"` |
-| `className` | `string`                    | -           |
-
-### AvatarImage
-
-The `AvatarImage` component displays the avatar image. It accepts all Base UI Avatar Image props.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `src`       | `string` | -       |
-| `alt`       | `string` | -       |
-| `className` | `string` | -       |
-
-### AvatarFallback
-
-The `AvatarFallback` component displays a fallback when the image fails to load. It accepts all Base UI Avatar Fallback props.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### AvatarBadge
-
-The `AvatarBadge` component displays a badge indicator on the avatar, typically positioned at the bottom right.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### AvatarGroup
-
-The `AvatarGroup` component displays a group of avatars with overlapping styling.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### AvatarGroupCount
-
-The `AvatarGroupCount` component displays a count indicator in an avatar group, typically showing the number of additional avatars.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-For more information about Base UI Avatar props, see the [Base UI documentation](https://base-ui.com/react/components/avatar#api-reference).

apps/v4/content/docs/components/base/badge.mdx

@@ -1,97 +0,0 @@
----
-title: Badge
-description: Displays a badge or a component that looks like a badge.
-base: base
-component: true
----
-
-<ComponentPreview styleName="base-nova" name="badge-demo" />
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add badge
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="badge"
-  title="components/ui/badge.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx
-import { Badge } from "@/components/ui/badge"
-```
-
-```tsx
-<Badge variant="default | outline | secondary | destructive">Badge</Badge>
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop to change the variant of the badge.
-
-<ComponentPreview styleName="base-nova" name="badge-variants" />
-
-### With Icon
-
-You can render an icon inside the badge. Use `data-icon="inline-start"` to render the icon on the left and `data-icon="inline-end"` to render the icon on the right.
-
-<ComponentPreview styleName="base-nova" name="badge-icon" />
-
-### With Spinner
-
-You can render a spinner inside the badge. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` prop to the spinner.
-
-<ComponentPreview styleName="base-nova" name="badge-spinner" />
-
-### Link
-
-Use the `render` prop to render a link as a badge.
-
-<ComponentPreview styleName="base-nova" name="badge-link" />
-
-### Custom Colors
-
-You can customize the colors of a badge by adding custom classes such as `bg-green-50 dark:bg-green-800` to the `Badge` component.
-
-<ComponentPreview styleName="base-nova" name="badge-colors" />
-
-## API Reference
-
-### Badge
-
-The `Badge` component displays a badge or a component that looks like a badge.
-
-| Prop        | Type                                                                          | Default     |
-| ----------- | ----------------------------------------------------------------------------- | ----------- |
-| `variant`   | `"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"` | `"default"` |
-| `className` | `string`                                                                      | -           |

apps/v4/content/docs/components/base/breadcrumb.mdx

@@ -1,176 +0,0 @@
----
-title: Breadcrumb
-description: Displays the path to the current resource using a hierarchy of links.
-base: base
-component: true
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="breadcrumb-demo"
-  previewClassName="p-2"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add breadcrumb
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="breadcrumb"
-  title="components/ui/breadcrumb.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-```
-
-```tsx showLineNumbers
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink render={<a href="/components" />}>
-        Components
-      </BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>
-```
-
-## Examples
-
-### Basic
-
-A basic breadcrumb with a home link and a components link.
-
-<ComponentPreview styleName="base-nova" name="breadcrumb-basic" />
-
-### Custom separator
-
-Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
-
-<ComponentPreview styleName="base-nova" name="breadcrumb-separator" />
-
-### Dropdown
-
-You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
-
-<ComponentPreview styleName="base-nova" name="breadcrumb-dropdown" />
-
-### Collapsed
-
-We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="breadcrumb-ellipsis"
-  previewClassName="p-2"
-/>
-
-### Link component
-
-To use a custom link component from your routing library, you can use the `render` prop on `<BreadcrumbLink />`.
-
-<ComponentPreview styleName="base-nova" name="breadcrumb-link" />
-
-## API Reference
-
-### Breadcrumb
-
-The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### BreadcrumbList
-
-The `BreadcrumbList` component displays the ordered list of breadcrumb items.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### BreadcrumbItem
-
-The `BreadcrumbItem` component wraps individual breadcrumb items.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### BreadcrumbLink
-
-The `BreadcrumbLink` component displays a clickable link in the breadcrumb.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### BreadcrumbPage
-
-The `BreadcrumbPage` component displays the current page in the breadcrumb (non-clickable).
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### BreadcrumbSeparator
-
-The `BreadcrumbSeparator` component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.
-
-| Prop        | Type              | Default |
-| ----------- | ----------------- | ------- |
-| `children`  | `React.ReactNode` | -       |
-| `className` | `string`          | -       |
-
-### BreadcrumbEllipsis
-
-The `BreadcrumbEllipsis` component displays an ellipsis indicator for collapsed breadcrumb items.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |

apps/v4/content/docs/components/base/button.mdx

@@ -1,153 +0,0 @@
----
-title: Button
-description: Displays a button or a component that looks like a button.
-featured: true
-base: base
-component: true
----
-
-<ComponentPreview styleName="base-nova" name="button-demo" />
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add button
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="button"
-  title="components/ui/button.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx
-import { Button } from "@/components/ui/button"
-```
-
-```tsx
-<Button variant="outline">Button</Button>
-```
-
-## Cursor
-
-Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.
-
-If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:
-
-```css showLineNumbers title="globals.css"
-@layer base {
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}
-```
-
-## Examples
-
-### Size
-
-Use the `size` prop to change the size of the button.
-
-<ComponentPreview styleName="base-nova" name="button-size" />
-
-### Default
-
-<ComponentPreview styleName="base-nova" name="button-default" />
-
-### Outline
-
-<ComponentPreview styleName="base-nova" name="button-outline" />
-
-### Secondary
-
-<ComponentPreview styleName="base-nova" name="button-secondary" />
-
-### Ghost
-
-<ComponentPreview styleName="base-nova" name="button-ghost" />
-
-### Destructive
-
-<ComponentPreview styleName="base-nova" name="button-destructive" />
-
-### Link
-
-<ComponentPreview styleName="base-nova" name="button-link" />
-
-### Icon
-
-<ComponentPreview styleName="base-nova" name="button-icon" />
-
-### With Icon
-
-Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.
-
-<ComponentPreview styleName="base-nova" name="button-with-icon" />
-
-### Rounded
-
-Use the `rounded-full` class to make the button rounded.
-
-<ComponentPreview styleName="base-nova" name="button-rounded" />
-
-### Spinner
-
-Render a `<Spinner />` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.
-
-<ComponentPreview styleName="base-nova" name="button-spinner" />
-
-### Button Group
-
-To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/base/button-group) documentation for more details.
-
-<ComponentPreview styleName="base-nova" name="button-group-demo" />
-
-### Link
-
-You can use the `render` prop on `<Button />` to make another component look like a button. Here's an example of a link that looks like a button.
-
-<ComponentPreview styleName="base-nova" name="button-render" />
-
-## API Reference
-
-### Button
-
-The `Button` component is a wrapper around the `button` element that adds a variety of styles and functionality.
-
-| Prop      | Type                                                                                 | Default     |
-| --------- | ------------------------------------------------------------------------------------ | ----------- |
-| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`        | `"default"` |
-| `size`    | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` |

apps/v4/content/docs/components/base/card.mdx

@@ -1,159 +0,0 @@
----
-title: Card
-description: Displays a card with header, content, and footer.
-base: base
-component: true
----
-
-<ComponentPreview
-  name="card-demo"
-  styleName="base-nova"
-  previewClassName="h-[30rem]"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add card
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="card"
-  title="components/ui/card.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-```
-
-```tsx showLineNumbers
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-    <CardAction>Card Action</CardAction>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content</p>
-  </CardContent>
-  <CardFooter>
-    <p>Card Footer</p>
-  </CardFooter>
-</Card>
-```
-
-## Examples
-
-### Size
-
-Use the `size="sm"` prop to set the size of the card to small. The small size variant uses smaller spacing.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="card-small"
-  previewClassName="h-96"
-/>
-
-### Image
-
-Add an image before the card header to create a card with an image.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="card-image"
-  previewClassName="h-[32rem]"
-/>
-
-## API Reference
-
-### Card
-
-The `Card` component is the root container for card content.
-
-| Prop        | Type                | Default     |
-| ----------- | ------------------- | ----------- |
-| `size`      | `"default" \| "sm"` | `"default"` |
-| `className` | `string`            | -           |
-
-### CardHeader
-
-The `CardHeader` component is used for a title, description, and optional action.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### CardTitle
-
-The `CardTitle` component is used for the card title.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### CardDescription
-
-The `CardDescription` component is used for helper text under the title.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### CardAction
-
-The `CardAction` component places content in the top-right of the header (for example, a button or a badge).
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### CardContent
-
-The `CardContent` component is used for the main card body.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |
-
-### CardFooter
-
-The `CardFooter` component is used for actions and secondary content at the bottom of the card.
-
-| Prop        | Type     | Default |
-| ----------- | -------- | ------- |
-| `className` | `string` | -       |

apps/v4/content/docs/components/base/chart.mdx

@@ -1,582 +0,0 @@
----
-title: Chart
-description: Beautiful charts. Built using Recharts. Copy and paste into your apps.
-base: base
-component: true
----
-
-<Callout>
-
-**Note:** We're working on upgrading to Recharts v3. In the meantime, if you'd like to start testing v3, see the code in the comment [here](https://github.com/shadcn-ui/ui/issues/7669#issuecomment-2998299159). We'll have an official release soon.
-
-</Callout>
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-demo"
-  className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
-  hideCode
-/>
-
-Introducing **Charts**. A collection of chart components that you can copy and paste into your apps.
-
-Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.
-
-[Browse the Charts Library](/charts).
-
-## Component
-
-We use [Recharts](https://recharts.org/) under the hood.
-
-We designed the `chart` component with composition in mind. **You build your charts using Recharts components and only bring in custom components, such as `ChartTooltip`, when and where you need it**.
-
-```tsx showLineNumbers /ChartContainer/ /ChartTooltipContent/
-import { Bar, BarChart } from "recharts"
-
-import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
-
-export function MyChart() {
-  return (
-    <ChartContainer>
-      <BarChart data={data}>
-        <Bar dataKey="value" />
-        <ChartTooltip content={<ChartTooltipContent />} />
-      </BarChart>
-    </ChartContainer>
-  )
-}
-```
-
-We do not wrap Recharts. This means you're not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts.
-
-**The components are yours**.
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add chart
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install recharts
-```
-
-<Step>Copy and paste the following code into `components/ui/chart.tsx`.</Step>
-
-<ComponentSource
-  name="chart"
-  title="components/ui/chart.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Add the following colors to your CSS file</Step>
-
-```css title="app/globals.css" showLineNumbers
-@layer base {
-  :root {
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-  }
-
-  .dark {
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-  }
-}
-```
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Your First Chart
-
-Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
-
-<Steps>
-
-<Step>Start by defining your data</Step>
-
-The following data represents the number of desktop and mobile users for each month.
-
-<Callout className="mt-4">
-
-**Note:** Your data can be in any shape. You are not limited to the shape of the data below. Use the `dataKey` prop to map your data to the chart.
-
-</Callout>
-
-```tsx title="components/example-chart.tsx" showLineNumbers
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-```
-
-<Step>Define your chart config</Step>
-
-The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.
-
-```tsx title="components/example-chart.tsx" showLineNumbers
-import { type ChartConfig } from "@/components/ui/chart"
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "#2563eb",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "#60a5fa",
-  },
-} satisfies ChartConfig
-```
-
-<Step>Build your chart</Step>
-
-You can now build your chart using Recharts components.
-
-<Callout className="mt-4 bg-amber-50 border-amber-200 dark:bg-amber-950/50 dark:border-amber-950">
-
-**Important:** Remember to set a `min-h-[VALUE]` on the `ChartContainer` component. This is required for the chart to be responsive.
-
-</Callout>
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-example"
-  previewClassName="h-80"
-/>
-
-</Steps>
-
-### Add a Grid
-
-Let's add a grid to the chart.
-
-<Steps className="mb-0 pt-2">
-
-<Step>Import the `CartesianGrid` component.</Step>
-
-```tsx /CartesianGrid/
-import { Bar, BarChart, CartesianGrid } from "recharts"
-```
-
-<Step>Add the `CartesianGrid` component to your chart.</Step>
-
-```tsx showLineNumbers {3}
-<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>
-```
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-example-grid"
-  previewClassName="h-80"
-/>
-
-</Steps>
-
-### Add an Axis
-
-To add an x-axis to the chart, we'll use the `XAxis` component.
-
-<Steps className="mb-0 pt-2">
-
-<Step>Import the `XAxis` component.</Step>
-
-```tsx /XAxis/
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-```
-
-<Step>Add the `XAxis` component to your chart.</Step>
-
-```tsx showLineNumbers {4-10}
-<ChartContainer config={chartConfig} className="h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <XAxis
-      dataKey="month"
-      tickLine={false}
-      tickMargin={10}
-      axisLine={false}
-      tickFormatter={(value) => value.slice(0, 3)}
-    />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>
-```
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-example-axis"
-  previewClassName="h-80"
-/>
-
-</Steps>
-
-### Add Tooltip
-
-So far we've only used components from Recharts. They look great out of the box thanks to some customization in the `chart` component.
-
-To add a tooltip, we'll use the custom `ChartTooltip` and `ChartTooltipContent` components from `chart`.
-
-<Steps className="mb-0 pt-2">
-
-<Step>Import the `ChartTooltip` and `ChartTooltipContent` components.</Step>
-
-```tsx
-import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
-```
-
-<Step>Add the components to your chart.</Step>
-
-```tsx showLineNumbers {11}
-<ChartContainer config={chartConfig} className="h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <XAxis
-      dataKey="month"
-      tickLine={false}
-      tickMargin={10}
-      axisLine={false}
-      tickFormatter={(value) => value.slice(0, 3)}
-    />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>
-```
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-example-tooltip"
-  previewClassName="h-80"
-/>
-
-Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
-
-</Steps>
-
-### Add Legend
-
-We'll do the same for the legend. We'll use the `ChartLegend` and `ChartLegendContent` components from `chart`.
-
-<Steps className="mb-0 pt-2">
-
-<Step>Import the `ChartLegend` and `ChartLegendContent` components.</Step>
-
-```tsx
-import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
-```
-
-<Step>Add the components to your chart.</Step>
-
-```tsx showLineNumbers {12}
-<ChartContainer config={chartConfig} className="h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <XAxis
-      dataKey="month"
-      tickLine={false}
-      tickMargin={10}
-      axisLine={false}
-      tickFormatter={(value) => value.slice(0, 3)}
-    />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>
-```
-
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-example-legend"
-  previewClassName="h-80"
-/>
-
-</Steps>
-
-Done. You've built your first chart! What's next?
-
-- [Themes and Colors](/docs/components/chart#theming)
-- [Tooltip](/docs/components/chart#tooltip)
-- [Legend](/docs/components/chart#legend)
-
-## Chart Config
-
-The chart config is where you define the labels, icons and colors for a chart.
-
-It is intentionally decoupled from chart data.
-
-This allows you to share config and color tokens between charts. It can also work independently for cases where your data or color tokens live remotely or in a different format.
-
-```tsx showLineNumbers /ChartConfig/
-import { Monitor } from "lucide-react"
-
-import { type ChartConfig } from "@/components/ui/chart"
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    icon: Monitor,
-    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
-    color: "#2563eb",
-    // OR a theme object with 'light' and 'dark' keys
-    theme: {
-      light: "#2563eb",
-      dark: "#dc2626",
-    },
-  },
-} satisfies ChartConfig
-```
-
-## Theming
-
-Charts have built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.
-
-### CSS Variables
-
-<Steps className="mb-0 pt-2">
-
-<Step>Define your colors in your css file</Step>
-
-```css title="app/globals.css" showLineNumbers
-@layer base {
-  :root {
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-  }
-
-  .dark: {
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-  }
-}
-```
-
-<Step>Add the color to your `chartConfig`</Step>
-
-```tsx title="components/example-chart.tsx" showLineNumbers
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-```
-
-</Steps>
-
-### hex, hsl or oklch
-
-You can also define your colors directly in the chart config. Use the color format you prefer.
-
-```tsx title="components/example-chart.tsx" showLineNumbers
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "#2563eb",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(220, 98%, 61%)",
-  },
-  tablet: {
-    label: "Tablet",
-    color: "oklch(0.5 0.2 240)",
-  },
-  laptop: {
-    label: "Laptop",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-```
-
-### Using Colors
-
-To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`.
-
-#### Components
-
-```tsx
-<Bar dataKey="desktop" fill="var(--color-desktop)" />
-```
-
-#### Chart Data
-
-```tsx title="components/example-chart.tsx" showLineNumbers
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-]
-```
-
-#### Tailwind
-
-```tsx title="components/example-chart.tsx"
-<LabelList className="fill-[--color-desktop]" />
-```
-
-## Tooltip
-
-A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
-
-<ComponentPreview styleName="base-nova" name="chart-tooltip" hideCode />
-
-You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
-
-Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
-
-Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
-
-```tsx title="components/example-chart.tsx"
-import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
-```
-
-```tsx title="components/example-chart.tsx"
-<ChartTooltip content={<ChartTooltipContent />} />
-```
-
-### Props
-
-Use the following props to customize the tooltip.
-
-| Prop            | Type                     | Description                                  |
-| :-------------- | :----------------------- | :------------------------------------------- |
-| `labelKey`      | string                   | The config or data key to use for the label. |
-| `nameKey`       | string                   | The config or data key to use for the name.  |
-| `indicator`     | `dot` `line` or `dashed` | The indicator style for the tooltip.         |
-| `hideLabel`     | boolean                  | Whether to hide the label.                   |
-| `hideIndicator` | boolean                  | Whether to hide the indicator.               |
-
-### Colors
-
-Colors are automatically referenced from the chart config.
-
-### Custom
-
-To use a custom key for tooltip label and names, use the `labelKey` and `nameKey` props.
-
-```tsx showLineNumbers /browser/
-const chartData = [
-  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Total Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-```
-
-```tsx title="components/example-chart.tsx"
-<ChartTooltip
-  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
-/>
-```
-
-This will use `Total Visitors` for label and `Chrome` and `Safari` for the tooltip names.
-
-## Legend
-
-You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
-
-```tsx title="components/example-chart.tsx"
-import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
-```
-
-```tsx title="components/example-chart.tsx"
-<ChartLegend content={<ChartLegendContent />} />
-```
-
-### Colors
-
-Colors are automatically referenced from the chart config.
-
-### Custom
-
-To use a custom key for legend names, use the `nameKey` prop.
-
-```tsx showLineNumbers /browser/
-const chartData = [
-  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-]
-
-const chartConfig = {
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-```
-
-```tsx title="components/example-chart.tsx"
-<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
-```
-
-This will use `Chrome` and `Safari` for the legend names.
-
-## Accessibility
-
-You can turn on the `accessibilityLayer` prop to add an accessible layer to your chart.
-
-This prop adds keyboard access and screen reader support to your charts.
-
-```tsx title="components/example-chart.tsx"
-<LineChart accessibilityLayer />
-```

apps/v4/content/docs/components/base/checkbox.mdx

@@ -1,127 +0,0 @@
----
-title: Checkbox
-description: A control that allows the user to toggle between checked and not checked.
-base: base
-component: true
-links:
-  doc: https://base-ui.com/react/components/checkbox
-  api: https://base-ui.com/react/components/checkbox#api-reference
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="checkbox-demo"
-  previewClassName="h-80"
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add checkbox
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="checkbox"
-  title="components/ui/checkbox.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx
-import { Checkbox } from "@/components/ui/checkbox"
-```
-
-```tsx
-<Checkbox />
-```
-
-## Checked State
-
-Use `defaultChecked` for uncontrolled checkboxes, or `checked` and
-`onCheckedChange` to control the state.
-
-```tsx showLineNumbers
-import * as React from "react"
-
-export function Example() {
-  const [checked, setChecked] = React.useState(false)
-
-  return <Checkbox checked={checked} onCheckedChange={setChecked} />
-}
-```
-
-## Invalid State
-
-Set `aria-invalid` on the checkbox and `data-invalid` on the field wrapper to
-show the invalid styles.
-
-<ComponentPreview styleName="base-nova" name="checkbox-invalid" />
-
-## Examples
-
-### Basic
-
-Pair the checkbox with `Field` and `FieldLabel` for proper layout and labeling.
-
-<ComponentPreview styleName="base-nova" name="checkbox-basic" />
-
-### Description
-
-Use `FieldContent` and `FieldDescription` for helper text.
-
-<ComponentPreview styleName="base-nova" name="checkbox-description" />
-
-### Disabled
-
-Use the `disabled` prop to prevent interaction and add the `data-disabled` attribute to the `<Field>` component for disabled styles.
-
-<ComponentPreview styleName="base-nova" name="checkbox-disabled" />
-
-### Group
-
-Use multiple fields to create a checkbox list.
-
-<ComponentPreview styleName="base-nova" name="checkbox-group" />
-
-### Table
-
-<ComponentPreview
-  styleName="base-nova"
-  name="checkbox-table"
-  previewClassName="p-4 md:p-8"
-/>
-
-## API Reference
-
-See the [Base UI](https://base-ui.com/react/components/checkbox#api-reference) documentation for more information.

apps/v4/content/docs/components/base/collapsible.mdx

@@ -1,123 +0,0 @@
----
-title: Collapsible
-description: An interactive component which expands/collapses a panel.
-base: base
-component: true
-featured: true
-links:
-  doc: https://base-ui.com/react/components/collapsible
-  api: https://base-ui.com/react/components/collapsible#api-reference
----
-
-<ComponentPreview styleName="base-nova" name="collapsible-demo" align="start" />
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add collapsible
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="collapsible"
-  title="components/ui/collapsible.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-```
-
-```tsx showLineNumbers
-<Collapsible>
-  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
-  <CollapsibleContent>
-    Yes. Free to use for personal and commercial projects. No attribution
-    required.
-  </CollapsibleContent>
-</Collapsible>
-```
-
-## Controlled State
-
-Use the `open` and `onOpenChange` props to control the state.
-
-```tsx showLineNumbers
-import * as React from "react"
-
-export function Example() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
-      <CollapsibleContent>Content</CollapsibleContent>
-    </Collapsible>
-  )
-}
-```
-
-## Examples
-
-### Basic
-
-<ComponentPreview
-  styleName="base-nova"
-  name="collapsible-basic"
-  align="start"
-/>
-
-### Settings Panel
-
-Use a trigger button to reveal additional settings.
-
-<ComponentPreview styleName="base-nova" name="collapsible-settings" />
-
-### File Tree
-
-Use nested collapsibles to build a file tree.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="collapsible-file-tree"
-  previewClassName="h-[36rem]"
-/>
-
-## API Reference
-
-See the [Base UI](https://base-ui.com/react/components/collapsible#api-reference) documentation for more information.

apps/v4/content/docs/components/base/combobox.mdx

@@ -1,261 +0,0 @@
----
-title: Combobox
-description: Autocomplete input with a list of suggestions.
-base: base
-component: true
-links:
-  doc: https://base-ui.com/react/components/combobox
-  api: https://base-ui.com/react/components/combobox#api-reference
----
-
-<ComponentPreview
-  styleName="base-nova"
-  name="combobox-demo"
-  description="A combobox with a list of frameworks."
-/>
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">Command</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn@latest add combobox
-```
-
-</TabsContent>
-<TabsContent value="manual">
-
-<Steps className="mb-0 pt-2">
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @base-ui/react
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="combobox"
-  title="components/ui/combobox.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-```tsx showLineNumbers
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/components/ui/combobox"
-```
-
-```tsx showLineNumbers
-const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
-
-export function ExampleCombobox() {
-  return (
-    <Combobox items={frameworks}>
-      <ComboboxInput placeholder="Select a framework" />
-      <ComboboxContent>
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList>
-          {(item) => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  )
-}
-```
-
-## Custom Items
-
-Use `itemToStringValue` when your items are objects.
-
-```tsx showLineNumbers
-import * as React from "react"
-
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/components/ui/combobox"
-
-type Framework = {
-  label: string
-  value: string
-}
-
-const frameworks: Framework[] = [
-  { label: "Next.js", value: "next" },
-  { label: "SvelteKit", value: "sveltekit" },
-  { label: "Nuxt", value: "nuxt" },
-]
-
-export function ExampleComboboxCustomItems() {
-  return (
-    <Combobox
-      items={frameworks}
-      itemToStringValue={(framework) => framework.label}
-    >
-      <ComboboxInput placeholder="Select a framework" />
-      <ComboboxContent>
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList>
-          {(framework) => (
-            <ComboboxItem key={framework.value} value={framework}>
-              {framework.label}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  )
-}
-```
-
-## Multiple Selection
-
-Use `multiple` with chips for multi-select behavior.
-
-```tsx showLineNumbers
-import * as React from "react"
-
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxValue,
-} from "@/components/ui/combobox"
-
-const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
-
-export function ExampleComboboxMultiple() {
-  const [value, setValue] = React.useState<string[]>([])
-
-  return (
-    <Combobox
-      items={frameworks}
-      multiple
-      value={value}
-      onValueChange={setValue}
-    >
-      <ComboboxChips>
-        <ComboboxValue>
-          {value.map((item) => (
-            <ComboboxChip key={item}>{item}</ComboboxChip>
-          ))}
-        </ComboboxValue>
-        <ComboboxChipsInput placeholder="Add framework" />
-      </ComboboxChips>
-      <ComboboxContent>
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList>
-          {(item) => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  )
-}
-```
-
-## Examples
-
-### Basic
-
-A simple combobox with a list of frameworks.
-
-<ComponentPreview styleName="base-nova" name="combobox-basic" />
-
-### Multiple
-
-A combobox with multiple selection using `multiple` and `ComboboxChips`.
-
-<ComponentPreview styleName="base-nova" name="combobox-multiple" />
-
-### Clear Button
-
-Use the `showClear` prop to show a clear button.
-
-<ComponentPreview styleName="base-nova" name="combobox-clear" />
-
-### Groups
-
-Use `ComboboxGroup` and `ComboboxSeparator` to group items.
-
-<ComponentPreview styleName="base-nova" name="combobox-groups" />
-
-### Custom Items
-
-You can render custom component inside `ComboboxItem`.
-
-<ComponentPreview styleName="base-nova" name="combobox-custom" />
-
-### Invalid
-
-Use the `aria-invalid` prop to make the combobox invalid.
-
-<ComponentPreview styleName="base-nova" name="combobox-invalid" />
-
-### Disabled
-
-Use the `disabled` prop to disable the combobox.
-
-<ComponentPreview styleName="base-nova" name="combobox-disabled" />
-
-### Auto Highlight
-
-Use the `autoHighlight` prop automatically highlight the first item on filter.
-
-<ComponentPreview styleName="base-nova" name="combobox-auto-highlight" />
-
-### Popup
-
-You can trigger the combobox from a button or any other component by using the `render` prop. Move the `ComboboxInput` inside the `ComboboxContent`.
-
-<ComponentPreview styleName="base-nova" name="combobox-popup" />
-
-### Input Group
-
-You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`.
-
-<ComponentPreview styleName="base-nova" name="combobox-input-group" />
-
-## API Reference
-
-See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information.