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

2026-06-11 09:51:40 +00:00 · 2026-03-18 10:53:27 +04:00
parent a9f997d00a 8db2be8b09
commit 31dbc6fc91
16 changed files with 210 additions and 130 deletions
--- a/apps/v4/app/(create)/components/customizer.tsx
+++ b/apps/v4/app/(create)/components/customizer.tsx
@@ -8,8 +8,6 @@ import {
  CardHeader,
 } from "@/examples/base/ui/card"
 import { FieldGroup } from "@/examples/base/ui/field"
-import { Separator } from "@/examples/base/ui/separator"
-import { CardTitle } from "@/examples/radix/ui/card"
 import { type RegistryItem } from "shadcn/schema"

 import { useIsMobile } from "@/hooks/use-mobile"
@@ -23,7 +21,6 @@ import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
 import { MainMenu } from "@/app/(create)/components/main-menu"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
-import { ProjectForm } from "@/app/(create)/components/project-form"
 import { RadiusPicker } from "@/app/(create)/components/radius-picker"
 import { RandomButton } from "@/app/(create)/components/random-button"
 import { ResetDialog } from "@/app/(create)/components/reset-button"
@@ -58,7 +55,7 @@ export function Customizer({
      </CardHeader>
      <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
        <FieldGroup className="flex-row gap-2.5 py-px md:flex-col md:gap-3.25">
-          <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
          <StylePicker
            styles={STYLES}
            isMobile={isMobile}
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -104,7 +104,7 @@ export function MenuColorPicker({
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
            <div className="text-xs text-muted-foreground">Menu</div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="line-clamp-1 text-sm font-medium text-foreground">
              {currentMenu?.label}
            </div>
          </div>
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -35,6 +35,7 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES, type BaseName } from "@/registry/config"
 import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import {
  useDesignSystemSearchParams,
@@ -129,68 +130,74 @@ export function ProjectForm({
      <DialogTrigger render={<Button className={cn(className)} />}>
        Create Project
      </DialogTrigger>
-      <DialogContent className="min-w-0 sm:max-w-sm">
+      <DialogContent className="no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Create Project</DialogTitle>
          <DialogDescription>
-            Pick a template and configure your project. Available for all major
-            React frameworks.
+            Pick a template and configure your project.
          </DialogDescription>
        </DialogHeader>
-        <FieldGroup>
-          <Field>
-            <FieldLabel className="sr-only">Template</FieldLabel>
-            <TemplateGrid template={params.template} setParams={setParams} />
-          </Field>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend variant="label" className="sr-only">
-              Options
-            </FieldLegend>
-            <Field
-              orientation="horizontal"
-              data-disabled={hasMonorepo ? undefined : "true"}
-            >
-              <FieldLabel htmlFor="monorepo">
-                <span
-                  className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
-                  dangerouslySetInnerHTML={{
-                    __html: TURBOREPO_LOGO,
-                  }}
-                />
-                Create a monorepo
-              </FieldLabel>
-              <Switch
-                id="monorepo"
-                checked={params.template?.endsWith("-monorepo") ?? false}
-                disabled={!hasMonorepo}
-                onCheckedChange={(checked) => {
-                  const framework = getFramework(params.template ?? "next")
-                  setParams({
-                    template: getTemplateValue(
-                      framework,
-                      checked === true
-                    ) as typeof params.template,
-                  })
-                }}
-              />
+        <div>
+          <FieldGroup>
+            <Field>
+              <FieldLabel>Template</FieldLabel>
+              <TemplateGrid template={params.template} setParams={setParams} />
            </Field>
            <FieldSeparator />
-            <Field orientation="horizontal">
-              <FieldLabel htmlFor="rtl">
-                <HugeiconsIcon icon={Globe02Icon} className="size-4" />
-                Enable RTL support
-              </FieldLabel>
-              <Switch
-                id="rtl"
-                checked={params.rtl}
-                onCheckedChange={(checked) =>
-                  setParams({ rtl: checked === true })
-                }
-              />
+            <Field className="-mt-2">
+              <FieldLabel>Base</FieldLabel>
+              <BaseGrid base={params.base} setParams={setParams} />
            </Field>
-          </FieldSet>
-        </FieldGroup>
+            <FieldSeparator />
+            <FieldSet>
+              <FieldLegend variant="label" className="sr-only">
+                Options
+              </FieldLegend>
+              <Field
+                orientation="horizontal"
+                data-disabled={hasMonorepo ? undefined : "true"}
+              >
+                <FieldLabel htmlFor="monorepo">
+                  <span
+                    className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
+                    dangerouslySetInnerHTML={{
+                      __html: TURBOREPO_LOGO,
+                    }}
+                  />
+                  Create a monorepo
+                </FieldLabel>
+                <Switch
+                  id="monorepo"
+                  checked={params.template?.endsWith("-monorepo") ?? false}
+                  disabled={!hasMonorepo}
+                  onCheckedChange={(checked) => {
+                    const framework = getFramework(params.template ?? "next")
+                    setParams({
+                      template: getTemplateValue(
+                        framework,
+                        checked === true
+                      ) as typeof params.template,
+                    })
+                  }}
+                />
+              </Field>
+              <FieldSeparator />
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="rtl">
+                  <HugeiconsIcon icon={Globe02Icon} className="size-4" />
+                  Enable RTL support
+                </FieldLabel>
+                <Switch
+                  id="rtl"
+                  checked={params.rtl}
+                  onCheckedChange={(checked) =>
+                    setParams({ rtl: checked === true })
+                  }
+                />
+              </Field>
+            </FieldSet>
+          </FieldGroup>
+        </div>
        <DialogFooter className="min-w-0">
          <div className="flex w-full min-w-0 flex-col gap-3">
            <Tabs
@@ -310,3 +317,52 @@ const TemplateGrid = React.memo(function TemplateGrid({
    </RadioGroup>
  )
 })
+
+const BaseGrid = React.memo(function BaseGrid({
+  base,
+  setParams,
+}: {
+  base: DesignSystemSearchParams["base"]
+  setParams: ReturnType<typeof useDesignSystemSearchParams>[1]
+}) {
+  const handleBaseChange = React.useCallback(
+    (value: string) => {
+      setParams({ base: value as BaseName })
+    },
+    [setParams]
+  )
+
+  return (
+    <RadioGroup
+      value={base}
+      onValueChange={handleBaseChange}
+      aria-label="Base"
+      className="grid grid-cols-2 gap-2"
+    >
+      {BASES.map((item) => (
+        <FieldLabel
+          key={item.name}
+          htmlFor={`base-${item.name}`}
+          className="py-1"
+        >
+          <Field className="gap-0" orientation="horizontal">
+            <FieldContent className="flex flex-col items-center justify-center gap-2">
+              <div
+                className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
+                dangerouslySetInnerHTML={{
+                  __html: item.meta?.logo ?? "",
+                }}
+              />
+              <FieldTitle className="text-xs">{item.title}</FieldTitle>
+            </FieldContent>
+            <RadioGroupItem
+              value={item.name}
+              id={`base-${item.name}`}
+              className="sr-only absolute"
+            />
+          </Field>
+        </FieldLabel>
+      ))}
+    </RadioGroup>
+  )
+})
--- a/apps/v4/public/r/registries.json
+++ b/apps/v4/public/r/registries.json
@@ -916,5 +916,17 @@
    "homepage": "https://ui.flexnative.com",
    "url": "https://ui.flexnative.com/r/{name}.json",
    "description": "A collection of customizable UI blocks with interactive live previews"
+  },
+  {
+    "name": "@nexus-ui",
+    "homepage": "https://nexus-ui.dev",
+    "url": "https://nexus-ui.dev/r/{name}.json",
+    "description": "Open-source component library of composable, copy-paste primitives for building AI interfaces (chat, streaming, multimodal)"
+  },
+  {
+    "name": "@sabraman",
+    "homepage": "https://sabraman.ru/components",
+    "url": "https://sabraman.ru/r/{name}.json",
+    "description": "Legacy skeuomorphic UI components and blocks for shadcn."
  }
 ]
--- a/apps/v4/registry/directory.json
+++ b/apps/v4/registry/directory.json
--- a/skills/shadcn/SKILL.md
+++ b/skills/shadcn/SKILL.md
@@ -2,6 +2,7 @@
 name: shadcn
 description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
 user-invocable: false
+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---

 # shadcn/ui
@@ -13,7 +14,7 @@ A framework for building ui, components and design systems. Components are added
 ## Current Project Context

 ```json
-!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
+!`npx shadcn@latest info --json`
 ```

 The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
--- a/templates/astro-app/package.json
+++ b/templates/astro-app/package.json
@@ -14,24 +14,24 @@
  },
  "dependencies": {
    "@astrojs/react": "^4.4.2",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.2.1",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "astro": "^5.17.1",
+    "astro": "^5.18.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.2.1"
  },
  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "eslint": "^9.39.1",
+    "@eslint/js": "^9.39.4",
+    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^16.5.0",
    "prettier": "^3.8.1",
    "prettier-plugin-astro": "^0.14.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4"
+    "typescript-eslint": "^8.57.1"
  }
 }
--- a/templates/astro-monorepo/package.json
+++ b/templates/astro-monorepo/package.json
@@ -13,10 +13,10 @@
    "prettier": "^3.8.1",
    "prettier-plugin-astro": "^0.14.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.8.8",
+    "turbo": "^2.8.17",
    "typescript": "5.9.3"
  },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.15.9",
  "engines": {
    "node": ">=20"
  }
--- a/templates/next-app/package.json
+++ b/templates/next-app/package.json
@@ -12,23 +12,23 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "next": "16.1.6",
+    "next": "16.1.7",
    "next-themes": "^0.4.6",
    "react": "^19.2.4",
    "react-dom": "^19.2.4"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.2",
-    "eslint-config-next": "16.1.6",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.1.7",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "postcss": "^8",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
    "typescript": "^5.9.3"
  }
 }
--- a/templates/next-monorepo/package.json
+++ b/templates/next-monorepo/package.json
@@ -14,10 +14,10 @@
    "@workspace/typescript-config": "workspace:*",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.8.8",
+    "turbo": "^2.8.17",
    "typescript": "5.9.3"
  },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.15.9",
  "engines": {
    "node": ">=20"
  }
--- a/templates/react-router-app/package.json
+++ b/templates/react-router-app/package.json
@@ -10,24 +10,24 @@
    "format": "prettier --write \"**/*.{ts,tsx}\""
  },
  "dependencies": {
-    "@react-router/node": "7.12.0",
-    "@react-router/serve": "7.12.0",
-    "isbot": "^5.1.31",
+    "@react-router/node": "7.13.1",
+    "@react-router/serve": "7.13.1",
+    "isbot": "^5.1.36",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
-    "react-router": "7.12.0"
+    "react-router": "7.13.1"
  },
  "devDependencies": {
-    "@react-router/dev": "7.12.0",
-    "@tailwindcss/vite": "^4.1.13",
+    "@react-router/dev": "7.13.1",
+    "@tailwindcss/vite": "^4.2.1",
    "@types/node": "^22",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
    "vite-tsconfig-paths": "^5.1.4"
  }
 }
--- a/templates/react-router-monorepo/package.json
+++ b/templates/react-router-monorepo/package.json
@@ -11,10 +11,10 @@
  "devDependencies": {
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.8.8",
+    "turbo": "^2.8.17",
    "typescript": "5.9.3"
  },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.15.9",
  "engines": {
    "node": ">=20"
  }
--- a/templates/start-app/package.json
+++ b/templates/start-app/package.json
@@ -12,34 +12,34 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-devtools": "^0.7.0",
-    "@tanstack/react-router": "^1.132.0",
-    "@tanstack/react-router-devtools": "^1.132.0",
-    "@tanstack/react-router-ssr-query": "^1.131.7",
-    "@tanstack/react-start": "^1.132.0",
-    "@tanstack/router-plugin": "^1.132.0",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-devtools": "^0.10.0",
+    "@tanstack/react-router": "^1.167.4",
+    "@tanstack/react-router-devtools": "^1.166.9",
+    "@tanstack/react-router-ssr-query": "^1.166.9",
+    "@tanstack/react-start": "^1.166.15",
+    "@tanstack/router-plugin": "^1.166.13",
    "nitro": "latest",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tailwindcss": "^4.0.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.1",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "devDependencies": {
-    "@tanstack/devtools-vite": "^0.3.11",
-    "@tanstack/eslint-config": "^0.3.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "jsdom": "^27.0.0",
-    "prettier": "^3.5.3",
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/eslint-config": "^0.4.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22.19.15",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "jsdom": "^27.4.0",
+    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "typescript": "^5.7.2",
-    "vite": "^7.1.7",
-    "vitest": "^3.0.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^3.2.4",
    "web-vitals": "^5.1.0"
  }
 }
--- a/templates/start-monorepo/package.json
+++ b/templates/start-monorepo/package.json
@@ -12,10 +12,10 @@
  "devDependencies": {
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.8.8",
+    "turbo": "^2.8.17",
    "typescript": "5.9.3"
  },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.15.9",
  "engines": {
    "node": ">=20"
  }
--- a/templates/vite-app/package.json
+++ b/templates/vite-app/package.json
@@ -12,25 +12,25 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@tailwindcss/vite": "^4.1.17",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tailwindcss": "^4.1.17"
+    "@tailwindcss/vite": "^4.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.1"
  },
  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
+    "@vitejs/plugin-react": "^5.2.0",
+    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^16.5.0",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "typescript-eslint": "^8.57.1",
+    "vite": "^7.3.1"
  }
 }
--- a/templates/vite-monorepo/package.json
+++ b/templates/vite-monorepo/package.json
@@ -12,10 +12,10 @@
  "devDependencies": {
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.8.8",
+    "turbo": "^2.8.17",
    "typescript": "5.9.3"
  },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.15.9",
  "engines": {
    "node": ">=20"
  }