chore(release): version packages (#7941)

* chore(release): version packages

* chore: deps

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: shadcn <m@shadcn.com>

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["www", "v4"]
+  "ignore": ["www", "v4", "tests"]
 }

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm test:*)",
+      "Bash(npm run typecheck:*)"
+    ],
+    "deny": []
+  }
+}

.github/workflows/issue-stale.yml

@@ -18,15 +18,15 @@ jobs:
           repo-token: ${{ secrets.STALE_TOKEN }}
           ascending: true
           days-before-issue-close: 7
-          days-before-issue-stale: 365 # ~2 years
+          days-before-issue-stale: 365
           days-before-pr-stale: -1
           days-before-pr-close: -1
           remove-issue-stale-when-updated: true
           stale-issue-label: "stale?"
-          exempt-issue-labels: "roadmap,next,bug"
-          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you."
-          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!"
-          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          exempt-issue-labels: "roadmap,next"
+          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300
       - uses: actions/stale@v9
         id: pr-state
         name: "Mark stale PRs, close stale PRs"
@@ -36,10 +36,10 @@ jobs:
           days-before-issue-close: -1
           days-before-issue-stale: -1
           days-before-pr-close: 7
-          days-before-pr-stale: 365 # PRs with no activity in over 90 days will be marked as stale
+          days-before-pr-stale: 365
           remove-pr-stale-when-updated: true
-          exempt-pr-labels: "roadmap,nex,awaiting-approval,work-in-progress"
+          exempt-pr-labels: "roadmap,next,bug"
           stale-pr-label: "stale?"
-          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you."
-          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding!"
-          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300

.github/workflows/release.yml

@@ -41,7 +41,7 @@ jobs:
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1.4.1
+        uses: changesets/action@v1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"

.github/workflows/test.yml

@@ -8,6 +8,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: pnpm test
+    env:
+      NEXT_PUBLIC_APP_URL: http://localhost:4000
+      NEXT_PUBLIC_V0_URL: https://v0.dev
     steps:
       - uses: actions/checkout@v3
         with:
@@ -39,4 +42,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm build --filter=shadcn
+
       - run: pnpm test

CONTRIBUTING.md

@@ -98,7 +98,7 @@ To run the CLI locally, you can follow the workflow:
 1. Start by running the registry (main site) to make sure the components are up to date:
 
    ```bash
-   pnpm www:dev
+   pnpm v4:dev
    ```
 
 2. Run the development script for the CLI:

apps/v4/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_V0_URL=https://v0.dev
+NEXT_PUBLIC_APP_URL=http://localhost:4000

apps/v4/.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

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

@@ -15,9 +15,9 @@ import { PageNav } from "@/components/page-nav"
 import { ThemeSelector } from "@/components/theme-selector"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
-const title = "Build your Component Library"
+const title = "The Foundation for your Design System"
 const description =
-  "A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code."
+  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
 
 export const dynamic = "force-static"
 export const revalidate = false
@@ -51,14 +51,14 @@ export default function IndexPage() {
     <div className="flex flex-1 flex-col">
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <Link href="/docs/installation">Get Started</Link>
           </Button>
           <Button asChild size="sm" variant="ghost">
-            <Link href="/blocks">Browse Blocks</Link>
+            <Link href="/docs/components">View Components</Link>
           </Button>
         </PageActions>
       </PageHeader>

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

@@ -10,6 +10,7 @@ import { findNeighbour } from "fumadocs-core/server"
 
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
+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"
@@ -102,12 +103,17 @@ export default async function Page(props: {
                 <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
                   {doc.title}
                 </h1>
-                <div className="flex items-center gap-2 pt-1.5">
+                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
+                  <DocsCopyPage
+                    // @ts-expect-error - revisit fumadocs types.
+                    page={doc.content}
+                    url={absoluteUrl(page.url)}
+                  />
                   {neighbours.previous && (
                     <Button
                       variant="secondary"
                       size="icon"
-                      className="extend-touch-target size-8 shadow-none md:size-7"
+                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
                       asChild
                     >
                       <Link href={neighbours.previous.url}>
@@ -160,7 +166,7 @@ export default async function Page(props: {
             <MDX components={mdxComponents} />
           </div>
         </div>
-        <div className="mx-auto flex h-16 w-full max-w-2xl items-center gap-2 px-4 md:px-0">
+        <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"

apps/v4/app/(app)/examples/tasks/components/data-table.tsx

@@ -75,7 +75,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="flex flex-col gap-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

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

@@ -0,0 +1,29 @@
+import { notFound } from "next/navigation"
+import { NextResponse, type NextRequest } from "next/server"
+
+import { source } from "@/lib/source"
+
+export const revalidate = false
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug: string[] }> }
+) {
+  const slug = (await params).slug
+  const page = source.getPage(slug)
+
+  if (!page) {
+    notFound()
+  }
+
+  // @ts-expect-error - revisit fumadocs types.
+  return new NextResponse(page.data.content, {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+    },
+  })
+}
+
+export function generateStaticParams() {
+  return source.generateParams()
+}

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { siteConfig } from "@/lib/config"

apps/v4/components/block-display.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { registryItemFileSchema } from "shadcn/registry"
+import { registryItemFileSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"

apps/v4/components/block-viewer.tsx

@@ -17,7 +17,7 @@ import {
   Terminal,
 } from "lucide-react"
 import { ImperativePanelHandle } from "react-resizable-panels"
-import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { trackEvent } from "@/lib/events"

apps/v4/components/callout.tsx

@@ -15,7 +15,7 @@ export function Callout({
   return (
     <Alert
       className={cn(
-        "bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-4",
+        "bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-1",
         className
       )}
       {...props}

apps/v4/components/cards/payments.tsx

@@ -209,7 +209,7 @@ export function CardsPayments() {
         </CardAction>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (

apps/v4/components/chart-display.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"

apps/v4/components/code-collapsible-wrapper.tsx

@@ -22,7 +22,7 @@ export function CodeCollapsibleWrapper({
     <Collapsible
       open={isOpened}
       onOpenChange={setIsOpened}
-      className={cn("group/collapsible relative md:-mx-4", className)}
+      className={cn("group/collapsible relative md:-mx-1", className)}
       {...props}
     >
       <CollapsibleTrigger asChild>

apps/v4/components/command-menu.tsx

@@ -36,11 +36,13 @@ export function CommandMenu({
   tree,
   colors,
   blocks,
+  navItems,
   ...props
 }: DialogProps & {
   tree: typeof source.pageTree
   colors: ColorPalette[]
   blocks?: { name: string; description: string; categories: string[] }[]
+  navItems?: { href: string; label: string }[]
 }) {
   const router = useRouter()
   const isMac = useIsMac()
@@ -162,12 +164,45 @@ export function CommandMenu({
           <DialogTitle>Search documentation...</DialogTitle>
           <DialogDescription>Search for a command to run...</DialogDescription>
         </DialogHeader>
-        <Command className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border">
+        <Command
+          className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border"
+          filter={(value, search, keywords) => {
+            const extendValue = value + " " + (keywords?.join(" ") || "")
+            if (extendValue.toLowerCase().includes(search.toLowerCase())) {
+              return 1
+            }
+            return 0
+          }}
+        >
           <CommandInput placeholder="Search documentation..." />
           <CommandList className="no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5">
             <CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
               No results found.
             </CommandEmpty>
+            {navItems && navItems.length > 0 && (
+              <CommandGroup
+                heading="Pages"
+                className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+              >
+                {navItems.map((item) => (
+                  <CommandMenuItem
+                    key={item.href}
+                    value={`Navigation ${item.label}`}
+                    keywords={["nav", "navigation", item.label.toLowerCase()]}
+                    onHighlight={() => {
+                      setSelectedType("page")
+                      setCopyPayload("")
+                    }}
+                    onSelect={() => {
+                      runCommand(() => router.push(item.href))
+                    }}
+                  >
+                    <IconArrowRight />
+                    {item.label}
+                  </CommandMenuItem>
+                ))}
+              </CommandGroup>
+            )}
             {tree.children.map((group) => (
               <CommandGroup
                 key={group.$id}

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

@@ -51,7 +51,7 @@ export function ComponentPreviewTabs({
       </Tabs>
       <div
         data-tab={tab}
-        className="data-[tab=code]:border-code relative rounded-lg border md:-mx-4"
+        className="data-[tab=code]:border-code relative rounded-lg border md:-mx-1"
       >
         <div
           data-slot="preview"

apps/v4/components/component-preview.tsx

@@ -34,7 +34,7 @@ export function ComponentPreview({
 
   if (type === "block") {
     return (
-      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-4">
+      <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}

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

@@ -1,33 +1,156 @@
 "use client"
 
-import { IconCheck, IconCopy } from "@tabler/icons-react"
+import { IconCheck, IconChevronDown, IconCopy } from "@tabler/icons-react"
 
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
 
-export function DocsCopyPage({ page }: { page: string }) {
+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.
+  `
+  )}`
+}
+
+const menuItems = {
+  markdown: (url: string) => (
+    <a href={`${url}.md`} target="_blank" rel="noopener noreferrer">
+      <svg strokeLinejoin="round" viewBox="0 0 22 16">
+        <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>
+  ),
+  v0: (url: string) => (
+    <a
+      href={getPromptUrl("https://v0.dev", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        className="size-4.5 -translate-x-px"
+      >
+        <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>
+      <span className="-translate-x-[2px]">Open in v0</span>
+    </a>
+  ),
+  chatgpt: (url: string) => (
+    <a
+      href={getPromptUrl("https://chatgpt.com", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <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>
+  ),
+  claude: (url: string) => (
+    <a
+      href={getPromptUrl("https://claude.ai/new", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <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>
+  ),
+}
+
+export function DocsCopyPage({ page, url }: { page: string; url: string }) {
   const { copyToClipboard, isCopied } = useCopyToClipboard()
 
+  const trigger = (
+    <Button
+      variant="secondary"
+      size="sm"
+      className="peer -ml-0.5 size-8 shadow-none md:size-7 md:text-[0.8rem]"
+    >
+      <IconChevronDown className="rotate-180 sm:rotate-0" />
+    </Button>
+  )
+
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
+    <Popover>
+      <div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+        <PopoverAnchor />
         <Button
-          variant="outline"
+          variant="secondary"
           size="sm"
-          className="h-8 pl-1.5 md:h-7 [&>svg]:size-3.5"
+          className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
           onClick={() => copyToClipboard(page)}
         >
-          {isCopied ? <IconCheck /> : <IconCopy />} Copy Page
+          {isCopied ? <IconCheck /> : <IconCopy />}
+          Copy Page
         </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy as Markdown</p>
-      </TooltipContent>
-    </Tooltip>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="hidden sm:flex">
+            {trigger}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="shadow-none">
+            {Object.entries(menuItems).map(([key, value]) => (
+              <DropdownMenuItem key={key} asChild>
+                {value(url)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Separator
+          orientation="vertical"
+          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-sm backdrop-blur-sm"
+          align="start"
+        >
+          {Object.entries(menuItems).map(([key, value]) => (
+            <Button
+              variant="ghost"
+              size="lg"
+              asChild
+              key={key}
+              className="*:[svg]:text-muted-foreground w-full justify-start text-base font-normal"
+            >
+              {value(url)}
+            </Button>
+          ))}
+        </PopoverContent>
+      </div>
+    </Popover>
   )
 }

apps/v4/components/open-in-v0-button.tsx

@@ -3,7 +3,7 @@ import { Icons } from "@/components/icons"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
 // v0 uses the default style.
-const V0_STYLE = "default"
+const V0_STYLE = "new-york-v4"
 
 export function OpenInV0Button({
   name,

apps/v4/components/open-in-v0-cta.tsx

@@ -13,7 +13,7 @@ export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
         Deploy your shadcn/ui app on Vercel
       </div>
       <div className="text-muted-foreground">
-        Trusted by OpenAI, Sonos, Chick-fil-A, and more.
+        Trusted by OpenAI, Sonos, Adobe, and more.
       </div>
       <div className="text-muted-foreground">
         Vercel provides tools and infrastructure to deploy apps and features at

apps/v4/components/site-footer.tsx

@@ -2,10 +2,10 @@ import { siteConfig } from "@/lib/config"
 
 export function SiteFooter() {
   return (
-    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent dark:bg-transparent">
+    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 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 text-center text-xs leading-loose sm:text-sm">
+          <div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">
             Built by{" "}
             <a
               href={siteConfig.links.twitter}

apps/v4/components/site-header.tsx

@@ -41,7 +41,11 @@ export function SiteHeader() {
           <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
           <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
             <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
-              <CommandMenu tree={pageTree} colors={colors} />
+              <CommandMenu
+                tree={pageTree}
+                colors={colors}
+                navItems={siteConfig.navItems}
+              />
             </div>
             <Separator
               orientation="vertical"

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

@@ -4,6 +4,52 @@ description: Latest updates and announcements.
 toc: false
 ---
 
+## July 2025 - Universal Registry Items
+
+We've added support for universal registry items. This allows you to create registry items that can be distributed to any project i.e. no framework, no components.json, no tailwind, no react required.
+
+This new registry item type unlocks a lot of new workflows. You can now distribute code, config, rules, docs, anything to any code project.
+
+See the [docs](/docs/registry/examples) for more details and examples.
+
+## July 2025 - Local File Support
+
+The shadcn CLI now supports local files. Initialize projects and add components, themes, hooks, utils and more from local JSON files.
+
+```bash
+# Initialize a project from a local file
+npx shadcn init ./template.json
+
+# Add a component from a local file
+npx shadcn add ./block.json
+```
+
+This feature enables powerful new workflows:
+
+- **Zero setup** - No remote registries required
+- **Faster development** - Test registry items locally before publishing
+- **Enhanced workflow for agents and MCP** - Generate and run registry items locally
+- **Private components** - Keep proprietary components local and private.
+
+## June 2025 - `radix-ui`
+
+We've added a new command to migrate to the new `radix-ui` package. This command will replace all `@radix-ui/react-*` imports with `radix-ui`.
+
+```bash
+npx shadcn@latest migrate radix
+```
+
+It will automatically update all imports in your `ui` components and install `radix-ui` as a dependency.
+
+```diff showLineNumbers title="components/ui/alert-dialog.tsx"
+- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
++ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+```
+
+Make sure to test your components and project after running the command.
+
+**Note:** To update imports for newly added components, run the migration command again.
+
 ## June 2025 - Calendar Component
 
 We've upgraded the `Calendar` component to the latest version of [React DayPicker](https://daypicker.dev).
@@ -42,9 +88,9 @@ Learn more in the thread here: https://x.com/shadcn/status/1917597228513853603
 
 We tagged shadcn 2.5.0 earlier this week. It comes with a pretty cool feature: **resolve anywhere**.
 
-Registries can now place files anywhere in an app and we’ll properly resolve imports. No need to stick to a fixed file structure. It can even add files outside the registry itself.
+Registries can now place files anywhere in an app and we'll properly resolve imports. No need to stick to a fixed file structure. It can even add files outside the registry itself.
 
-On install, we track all files and perform a multi-pass resolution to correctly handle imports and aliases. It’s fast.
+On install, we track all files and perform a multi-pass resolution to correctly handle imports and aliases. It's fast.
 
 ## March 2025 - Cross-framework Route Support
 
@@ -61,7 +107,7 @@ What's New:
 - The CLI can now initialize projects with Tailwind v4.
 - Full support for the new @theme directive and @theme inline option.
 - All components are updated for Tailwind v4 and React 19.
-- We’ve removed the forwardRefs and adjusted the types.
+- We've removed the forwardRefs and adjusted the types.
 - Every primitive now has a data-slot attribute for styling.
 - We've fixed and cleaned up the style of the components.
 - We're deprecating the toast component in favor of sonner.
@@ -139,7 +185,7 @@ The new CLI is now available. It's a complete rewrite with a lot of new features
 This is a major step towards distributing code that you and your LLMs can access and use.
 
 1. First up, the cli now has support for all major React framework out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding.
-2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we’ll update your tailwind.config.ts file accordingly.
+2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we'll update your tailwind.config.ts file accordingly.
 3. You can also install remote components using url. `npx shadcn add https://acme.com/registry/navbar.json`.
 4. We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`.
 5. We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.

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

@@ -21,15 +21,14 @@ Usage: shadcn init [options] [components...]
 initialize your project and install dependencies
 
 Arguments:
-  components         the components to add or a url to the component.
+  components         name, url or local path to component
 
 Options:
   -t, --template <template>      the template to use. (next, next-monorepo)
   -b, --base-color <base-color>  the base color to use. (neutral, gray, zinc, stone, slate)
   -y, --yes                      skip confirmation prompt. (default: true)
   -f, --force                    force overwrite of existing configuration. (default: false)
-  -c, --cwd <cwd>                the working directory. defaults to the current directory. (default:
-                                 "/Users/shadcn/Code/shadcn/ui/packages/shadcn")
+  -c, --cwd <cwd>                the working directory. defaults to the current directory.
   -s, --silent                   mute output. (default: false)
   --src-dir                      use the src directory when creating a new project. (default: false)
   --no-src-dir                   do not use the src directory when creating a new project.
@@ -54,12 +53,12 @@ Usage: shadcn add [options] [components...]
 add a component to your project
 
 Arguments:
-  components         the components to add or a url to the component.
+  components         name, url or local path to component
 
 Options:
   -y, --yes           skip confirmation prompt. (default: false)
   -o, --overwrite     overwrite existing files. (default: false)
-  -c, --cwd <cwd>     the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
+  -c, --cwd <cwd>     the working directory. defaults to the current directory.
   -a, --all           add all available components (default: false)
   -p, --path <path>   the path to add the component to.
   -s, --silent        mute output. (default: false)
@@ -92,8 +91,7 @@ Arguments:
 
 Options:
   -o, --output <path>  destination directory for json files (default: "./public/r")
-  -c, --cwd <cwd>      the working directory. defaults to the current directory. (default:
-                       "/Users/shadcn/Code/shadcn/ui/packages/shadcn")
+  -c, --cwd <cwd>      the working directory. defaults to the current directory.
   -h, --help           display help for command
 ```
 

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

@@ -15,3 +15,4 @@ description: Every component recreated in Figma. With customizable props, typogr
 ## Free
 
 - [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed

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

@@ -41,7 +41,7 @@ npx shadcn@latest add calendar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker@8.10.1 date-fns
+npm install react-day-picker date-fns
 ```
 
 <Step>Add the `Button` component to your project.</Step>

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

@@ -4,9 +4,15 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 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
   name="chart-bar-interactive"
-  className="theme-blue -mt-4 [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
+  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
 />
 

apps/v4/content/docs/components/data-table.mdx

@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>

apps/v4/content/docs/registry/examples.mdx

@@ -328,6 +328,20 @@ Add custom theme variables to the `theme` object.
 }
 ```
 
+## Add custom plugins
+
+```json title="example-plugin.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-plugin",
+  "type": "registry:component",
+  "css": {
+    "@plugin @tailwindcss/typography": {},
+    "@plugin foo": {}
+  }
+}
+```
+
 ## Add custom animations
 
 Note: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.
@@ -354,3 +368,95 @@ Note: you need to define both `@keyframes` in css and `theme` in cssVars to use
   }
 }
 ```
+
+## Add environment variables
+
+You can add environment variables using the `envVars` field.
+
+```json title="example-item.json" showLineNumbers {5-9}
+{»
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-item",
+  "type": "registry:item",
+  "envVars": {
+    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
+    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
+    "OPENAI_API_KEY": ""
+  }
+}
+```
+
+Environment variables are added to the `.env.local` or `.env` file. Existing variables are not overwritten.
+
+<Callout>
+
+**IMPORTANT:** Use `envVars` to add development or example variables. Do NOT use it to add production variables.
+
+</Callout>
+
+## Universal Items
+
+As of `2.9.0`, you can create universal items that can be installed without framework detection or components.json.
+
+To make an item universal i.e framework agnostic, all the files in the item must have an explicit target.
+
+Here's an example of a registry item that installs custom Cursor rules for _python_:
+
+```json title=".cursor/rules/custom-python.mdc" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "python-rules",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "/path/to/your/registry/default/custom-python.mdc",
+      "type": "registry:file",
+      "target": "~/.cursor/rules/custom-python.mdc",
+      "content": "..."
+    }
+  ]
+}
+```
+
+Here's another example for installation custom ESLint config:
+
+```json title=".eslintrc.json" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "my-eslint-config",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "/path/to/your/registry/default/custom-eslint.json",
+      "type": "registry:file",
+      "target": "~/.eslintrc.json",
+      "content": "..."
+    }
+  ]
+}
+```
+
+You can also have a universal item that installs multiple files:
+
+```json title="my-custom-starter-template.json" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "my-custom-start-template",
+  "type": "registry:item",
+  dependencies: ["better-auth"]
+  "files": [
+    {
+      "path": "/path/to/file-01.json",
+      "type": "registry:file",
+      "target": "~/file-01.json",
+      "content": "..."
+    },
+    {
+      "path": "/path/to/file-02.vue",
+      "type": "registry:file",
+      "target": "~/pages/file-02.vue",
+      "content": "..."
+    }
+  ]
+}
+```

apps/v4/content/docs/registry/index.mdx

@@ -1,15 +1,14 @@
 ---
 title: Registry
-description: Run your own component registry.
+description: Run your own code registry.
 ---
 
-<Callout>
-  **Note:** This feature is currently experimental. Help us improve it by
-  testing it out and sending feedback. If you have any questions, please [reach
-  out to us](https://github.com/shadcn-ui/ui/discussions).
-</Callout>
+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.
 
-You can use the `shadcn` CLI to run your own component registry. Running your own registry allows you to distribute your custom components, hooks, pages, and other files to any React project.
+<Callout>
+  **Note:** The registry works with any project type and any framework, and is
+  not limited to React.
+</Callout>
 
 <figure className="flex flex-col gap-4">
   <Image
@@ -27,12 +26,10 @@ You can use the `shadcn` CLI to run your own component registry. Running your ow
     className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
   />
   <figcaption className="text-center text-sm text-gray-500">
-    Distribute code to any React project.
+    A distribution system for code
   </figcaption>
 </figure>
 
-Registry items are automatically compatible with the `shadcn` CLI and `Open in v0`.
-
 ## Requirements
 
 You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).

apps/v4/content/docs/registry/registry-item-json.mdx

@@ -107,6 +107,7 @@ The following types are supported:
 | `registry:file`      | Use for miscellaneous files.                     |
 | `registry:style`     | Use for registry styles. eg. `new-york`          |
 | `registry:theme`     | Use for themes.                                  |
+| `registry:item`      | Use for universal registry items.                |
 
 ### author
 
@@ -260,11 +261,13 @@ Use to define CSS variables for your registry item.
 
 ### css
 
-Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, etc.
+Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, `@plugin`, etc.
 
 ```json title="registry-item.json" showLineNumbers
 {
   "css": {
+    "@plugin @tailwindcss/typography": {},
+    "@plugin foo": {},
     "@layer base": {
       "body": {
         "font-size": "var(--text-base)",
@@ -293,13 +296,35 @@ Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer
 }
 ```
 
+### envVars
+
+Use `envVars` to add environment variables to your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "envVars": {
+    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
+    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
+    "OPENAI_API_KEY": ""
+  }
+}
+```
+
+Environment variables are added to the `.env.local` or `.env` file. Existing variables are not overwritten.
+
+<Callout>
+
+**IMPORTANT:** Use `envVars` to add development or example variables. Do NOT use it to add production variables.
+
+</Callout>
+
 ### docs
 
 Use `docs` to show custom documentation or message when installing your registry item via the CLI.
 
 ```json title="registry-item.json" showLineNumbers
 {
-  "docs": "Remember to add the FOO_BAR environment variable to your .env file."
+  "docs": "To get an OPENAI_API_KEY, sign up for an account at https://platform.openai.com."
 }
 ```
 

apps/v4/lib/blocks.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 export async function getAllBlockIds(

apps/v4/lib/config.ts

@@ -3,7 +3,7 @@ export const siteConfig = {
   url: "https://ui.shadcn.com",
   ogImage: "https://ui.shadcn.com/og.jpg",
   description:
-    "A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.",
+    "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.",
   links: {
     twitter: "https://twitter.com/shadcn",
     github: "https://github.com/shadcn-ui/ui",

apps/v4/lib/registry.ts

@@ -1,7 +1,7 @@
 import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
-import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
 import { Project, ScriptKind } from "ts-morph"
 import { z } from "zod"
 

apps/v4/mdx-components.tsx

@@ -52,7 +52,7 @@ export const mdxComponents = {
           .replace(/\?/g, "")
           .toLowerCase()}
         className={cn(
-          "font-heading mt-12 scroll-m-28 text-2xl font-medium tracking-tight first:mt-0 lg:mt-20 [&+p]:!mt-4",
+          "font-heading mt-12 scroll-m-28 text-2xl font-medium tracking-tight first:mt-0 lg:mt-20 [&+p]:!mt-4 *:[code]:text-2xl",
           className
         )}
         {...props}
@@ -62,7 +62,7 @@ export const mdxComponents = {
   h3: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3
       className={cn(
-        "font-heading mt-8 scroll-m-28 text-xl font-semibold tracking-tight",
+        "font-heading mt-8 scroll-m-28 text-xl font-semibold tracking-tight *:[code]:text-xl",
         className
       )}
       {...props}

apps/v4/next.config.mjs

@@ -68,6 +68,19 @@ const nextConfig = {
         destination: "/view/:name",
         permanent: true,
       },
+      {
+        source: "/docs/:path*.mdx",
+        destination: "/docs/:path*.md",
+        permanent: true,
+      },
+    ]
+  },
+  rewrites() {
+    return [
+      {
+        source: "/docs/:path*.md",
+        destination: "/llm/:path*",
+      },
     ]
   },
 }

apps/v4/package.json

@@ -54,7 +54,7 @@
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.7",
     "@tabler/icons-react": "^3.31.0",
-    "@tailwindcss/postcss": "^4.0.1",
+    "@tailwindcss/postcss": "^4.1.11",
     "@tanstack/react-table": "^8.9.1",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",
@@ -65,10 +65,10 @@
     "date-fns": "^4.1.0",
     "embla-carousel-autoplay": "8.5.2",
     "embla-carousel-react": "8.5.2",
-    "fumadocs-core": "^15.3.1",
-    "fumadocs-docgen": "^2.0.0",
-    "fumadocs-mdx": "^11.6.3",
-    "fumadocs-ui": "^15.3.1",
+    "fumadocs-core": "15.3.1",
+    "fumadocs-docgen": "2.0.0",
+    "fumadocs-mdx": "11.6.3",
+    "fumadocs-ui": "15.3.1",
     "input-otp": "^1.4.2",
     "jotai": "^2.1.0",
     "little-date": "^1.0.0",
@@ -86,7 +86,7 @@
     "recharts": "2.15.1",
     "rehype-pretty-code": "^0.14.1",
     "rimraf": "^6.0.1",
-    "shadcn": "2.6.1",
+    "shadcn": "3.0.0",
     "shiki": "^1.10.1",
     "sonner": "^2.0.0",
     "tailwind-merge": "^3.0.1",
@@ -108,7 +108,7 @@
     "eslint-config-next": "15.3.1",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.2.4",
     "typescript": "^5",
     "unist-builder": "3.0.0",

apps/v4/public/r/index.json

@@ -180,7 +180,7 @@
     "name": "chart",
     "type": "registry:ui",
     "dependencies": [
-      "recharts",
+      "recharts@2.15.4",
       "lucide-react"
     ],
     "registryDependencies": [

apps/v4/public/r/styles/default/chart.json

@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [

apps/v4/public/r/styles/default/index.json

@@ -1,6 +1,8 @@
 {
-  "name": "default",
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
   "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
@@ -9,6 +11,7 @@
   "registryDependencies": [
     "utils"
   ],
+  "files": [],
   "tailwind": {
     "config": {
       "plugins": [
@@ -16,6 +19,5 @@
       ]
     }
   },
-  "cssVars": {},
-  "files": []
+  "cssVars": {}
 }

apps/v4/public/r/styles/default/style.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}

apps/v4/public/r/styles/new-york-v4/calendar-24.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/calendar-24.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date-picker\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time-picker\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time-picker\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/new-york-v4/chart.json

@@ -3,7 +3,7 @@
   "name": "chart",
   "type": "registry:ui",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [

apps/v4/public/r/styles/new-york-v4/style.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "devDependencies": [
+    "tw-animate-css"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {}
+}

apps/v4/public/r/styles/new-york/chart.json

@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [

apps/v4/public/r/styles/new-york/index.json

@@ -1,6 +1,8 @@
 {
-  "name": "new-york",
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
   "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
@@ -9,6 +11,7 @@
   "registryDependencies": [
     "utils"
   ],
+  "files": [],
   "tailwind": {
     "config": {
       "plugins": [
@@ -16,6 +19,5 @@
       ]
     }
   },
-  "cssVars": {},
-  "files": []
+  "cssVars": {}
 }

apps/v4/public/r/styles/new-york/style.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}

apps/v4/public/schema.json

@@ -56,6 +56,42 @@
         }
       },
       "required": ["utils", "components"]
+    },
+    "registries": {
+      "type": "object",
+      "patternProperties": {
+        "^@": {
+          "oneOf": [
+            {
+              "type": "string",
+              "pattern": "\\{name\\}"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "url": {
+                  "type": "string",
+                  "pattern": "\\{name\\}"
+                },
+                "params": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                },
+                "headers": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                }
+              },
+              "required": ["url"]
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
     }
   },
   "required": ["style", "tailwind", "rsc", "aliases"]

apps/v4/public/schema/registry-item.json

@@ -17,7 +17,8 @@
         "registry:theme",
         "registry:page",
         "registry:file",
-        "registry:style"
+        "registry:style",
+        "registry:item"
       ],
       "description": "The type of the item. This is used to determine the type and target path of the item when resolved for a project."
     },
@@ -79,7 +80,8 @@
               "registry:theme",
               "registry:page",
               "registry:file",
-              "registry:style"
+              "registry:style",
+              "registry:item"
             ],
             "description": "The type of the file. This is used to determine the type of the file when resolved for a project."
           },
@@ -189,6 +191,13 @@
         ]
       }
     },
+    "envVars": {
+      "type": "object",
+      "description": "Environment variables required by the registry item. Key-value pairs that will be added to the project's .env file.",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "meta": {
       "type": "object",
       "description": "Additional metadata for the registry item. This is an object with any key value pairs.",

apps/v4/registry.json

@@ -18,6 +18,22 @@
       "files": [],
       "cssVars": {}
     },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
     {
       "name": "accordion",
       "type": "registry:ui",
@@ -169,7 +185,7 @@
       "name": "chart",
       "type": "registry:ui",
       "dependencies": [
-        "recharts",
+        "recharts@2.15.4",
         "lucide-react"
       ],
       "registryDependencies": [

apps/v4/registry/__index__.tsx

@@ -16,6 +16,16 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "style": {
+    name: "style",
+    description: "",
+    type: "registry:style",
+    registryDependencies: ["utils"],
+    files: [],
+    component: null,
+    categories: undefined,
+    meta: undefined,
+  },
   "accordion": {
     name: "accordion",
     description: "",

apps/v4/registry/index.ts

@@ -1,4 +1,4 @@
-import { registryItemSchema, type Registry } from "shadcn/registry"
+import { registryItemSchema, type Registry } from "shadcn/schema"
 import { z } from "zod"
 
 import { blocks } from "@/registry/registry-blocks"
@@ -19,6 +19,16 @@ const DEPRECATED_ITEMS = [
   "toast-with-title",
 ]
 
+// Shared between index and style for backward compatibility.
+const NEW_YORK_V4_STYLE = {
+  type: "registry:style",
+  dependencies: ["class-variance-authority", "lucide-react"],
+  devDependencies: ["tw-animate-css"],
+  registryDependencies: ["utils"],
+  cssVars: {},
+  files: [],
+}
+
 export const registry = {
   name: "shadcn/ui",
   homepage: "https://ui.shadcn.com",
@@ -26,12 +36,11 @@ export const registry = {
     [
       {
         name: "index",
-        type: "registry:style",
-        dependencies: ["class-variance-authority", "lucide-react"],
-        devDependencies: ["tw-animate-css"],
-        registryDependencies: ["utils"],
-        cssVars: {},
-        files: [],
+        ...NEW_YORK_V4_STYLE,
+      },
+      {
+        name: "style",
+        ...NEW_YORK_V4_STYLE,
       },
       ...ui,
       ...blocks,

apps/v4/registry/new-york-v4/blocks/calendar-24.tsx

@@ -20,14 +20,14 @@ export default function Calendar24() {
   return (
     <div className="flex gap-4">
       <div className="flex flex-col gap-3">
-        <Label htmlFor="date" className="px-1">
+        <Label htmlFor="date-picker" className="px-1">
           Date
         </Label>
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button
               variant="outline"
-              id="date"
+              id="date-picker"
               className="w-32 justify-between font-normal"
             >
               {date ? date.toLocaleDateString() : "Select date"}
@@ -48,12 +48,12 @@ export default function Calendar24() {
         </Popover>
       </div>
       <div className="flex flex-col gap-3">
-        <Label htmlFor="time" className="px-1">
+        <Label htmlFor="time-picker" className="px-1">
           Time
         </Label>
         <Input
           type="time"
-          id="time"
+          id="time-picker"
           step="1"
           defaultValue="10:30:00"
           className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"

apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx

@@ -257,7 +257,6 @@ export function ChartAreaInteractive() {
             />
             <ChartTooltip
               cursor={false}
-              defaultIndex={isMobile ? -1 : 10}
               content={
                 <ChartTooltipContent
                   labelFormatter={(value) => {

apps/v4/registry/new-york-v4/examples/data-table-demo.tsx

@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

apps/v4/registry/new-york-v4/ui/calendar.tsx

@@ -73,7 +73,10 @@ function Calendar({
           "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
           defaultClassNames.dropdown_root
         ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"

apps/v4/registry/registry-blocks.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const blocks: Registry["items"] = [
   {

apps/v4/registry/registry-charts.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const charts: Registry["items"] = [
   // Area Charts

apps/v4/registry/registry-examples.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const examples: Registry["items"] = [
   {

apps/v4/registry/registry-hooks.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const hooks: Registry["items"] = [
   {

apps/v4/registry/registry-internal.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const internal: Registry["items"] = [
   // Do not move this. They are intentionally here for registry capture.

apps/v4/registry/registry-lib.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const lib: Registry["items"] = [
   {

apps/v4/registry/registry-themes.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const themes: Registry["items"] = [
   {

apps/v4/registry/registry-ui.ts

@@ -1,4 +1,4 @@
-import { type Registry } from "shadcn/registry"
+import { type Registry } from "shadcn/schema"
 
 export const ui: Registry["items"] = [
   {
@@ -155,7 +155,7 @@ export const ui: Registry["items"] = [
       },
     ],
     registryDependencies: ["card"],
-    dependencies: ["recharts", "lucide-react"],
+    dependencies: ["recharts@2.15.4", "lucide-react"],
   },
   {
     name: "checkbox",

apps/v4/scripts/build-registry.mts

@@ -61,7 +61,7 @@ export const Index: Record<string, any> = {`
   index += `
   }`
 
-  console.log(`#️⃣  ${Object.keys(registry.items).length} components found`)
+  console.log(`#️⃣  ${Object.keys(registry.items).length} items found`)
 
   // Write style index.
   rimraf.sync(path.join(process.cwd(), "registry/__index__.tsx"))
@@ -93,6 +93,16 @@ async function buildRegistryJsonFile() {
     path.join(process.cwd(), `registry.json`),
     JSON.stringify(fixedRegistry, null, 2)
   )
+
+  // 3. Copy the registry.json to the www/public/r/styles/new-york-v4 directory.
+  await fs.cp(
+    path.join(process.cwd(), "registry.json"),
+    path.join(
+      process.cwd(),
+      "../www/public/r/styles/new-york-v4/registry.json"
+    ),
+    { recursive: true }
+  )
 }
 
 async function buildRegistry() {

apps/v4/source.config.ts

@@ -33,7 +33,6 @@ export default defineConfig({
 export const docs = defineDocs({
   dir: "content/docs",
   docs: {
-    // @ts-expect-error - TODO: fix the type.
     schema: frontmatterSchema.extend({
       links: z
         .object({

apps/v4/styles/globals.css

@@ -248,7 +248,7 @@
     font-size: var(--text-sm);
     outline: none;
     position: relative;
-    @apply md:-mx-4;
+    @apply md:-mx-1;
 
     &:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
       top: calc(var(--spacing) * 1.5) !important;

apps/www/README.md

@@ -0,0 +1,6 @@
+# ui.shadcn.com
+
+> [!WARNING]
+> The site at ui.shadcn.com now points to `apps/v4`. All changes should be made in the `apps/v4` directory.
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

apps/www/__registry__/index.tsx

@@ -5,6 +5,28 @@ import * as React from "react"
 
 export const Index: Record<string, any> = {
   "new-york": {
+    "index": {
+      name: "index",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/style/index")),
+      source: "",
+      meta: undefined,
+    },
+    "style": {
+      name: "style",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/style/style")),
+      source: "",
+      meta: undefined,
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -5838,6 +5860,28 @@ export const Index: Record<string, any> = {
       meta: undefined,
     },
   },  "default": {
+    "index": {
+      name: "index",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/style/index")),
+      source: "",
+      meta: undefined,
+    },
+    "style": {
+      name: "style",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/style/style")),
+      source: "",
+      meta: undefined,
+    },
     "accordion": {
       name: "accordion",
       description: "",

apps/www/app/(app)/examples/tasks/components/data-table.tsx

@@ -70,7 +70,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

apps/www/components/block-display.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { registryItemFileSchema } from "shadcn/registry"
+import { registryItemFileSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"

apps/www/components/block-viewer.tsx

@@ -16,7 +16,7 @@ import {
   Terminal,
 } from "lucide-react"
 import { ImperativePanelHandle } from "react-resizable-panels"
-import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { trackEvent } from "@/lib/events"

apps/www/components/cards/data-table.tsx

@@ -239,7 +239,7 @@ export function CardsDataTable() {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (

apps/www/components/chart-display.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"

apps/www/content/docs/components/calendar.mdx

@@ -39,7 +39,7 @@ npx shadcn@latest add calendar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker@8.10.1 date-fns
+npm install react-day-picker date-fns
 ```
 
 <Step>Add the `Button` component to your project.</Step>

apps/www/content/docs/components/data-table.mdx

@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>

apps/www/content/docs/figma.mdx

@@ -10,3 +10,4 @@ description: Every component recreated in Figma. With customizable props, typogr
 ## Free
 
 - [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed

apps/www/lib/blocks.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
 import { Style } from "@/registry/registry-styles"

apps/www/lib/registry.ts

@@ -2,7 +2,7 @@ import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
 import { Index } from "@/__registry__"
-import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
 import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
 import { z } from "zod"
 

apps/www/package.json

@@ -88,7 +88,7 @@
     "react-resizable-panels": "^2.0.22",
     "react-wrap-balancer": "^0.4.1",
     "recharts": "2.12.7",
-    "shadcn": "2.6.1",
+    "shadcn": "3.0.0",
     "sharp": "^0.32.6",
     "sonner": "^1.2.3",
     "swr": "2.2.6-beta.3",

apps/www/public/r/index.json

@@ -180,7 +180,7 @@
     "name": "chart",
     "type": "registry:ui",
     "dependencies": [
-      "recharts",
+      "recharts@2.15.4",
       "lucide-react"
     ],
     "registryDependencies": [

apps/www/public/r/styles/default/chart.json

@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [

apps/www/public/r/styles/default/index.json

@@ -1,6 +1,8 @@
 {
-  "name": "default",
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
   "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
@@ -9,6 +11,7 @@
   "registryDependencies": [
     "utils"
   ],
+  "files": [],
   "tailwind": {
     "config": {
       "plugins": [
@@ -16,6 +19,5 @@
       ]
     }
   },
-  "cssVars": {},
-  "files": []
+  "cssVars": {}
 }