feat(shadcn-ui): migrate from new-york to radix-vega style

apps/docs/app/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "shadcn/tailwind.css";
 @import "./styles/geistdocs.css";
 
 @source "../**/*.{ts,tsx,mdx}";

apps/docs/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-vega",
   "rsc": true,
   "tsx": true,
   "tailwind": {

apps/docs/components/custom/elements-installer.tsx

@@ -3,7 +3,6 @@
 import { readFile } from "node:fs/promises";
 // oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
 import { join } from "node:path";
-
 import { codeToHtml } from "shiki";
 
 import { CodeBlock } from "@/components/geistdocs/code-block";
@@ -30,7 +29,7 @@ const loadSourceCode = async (componentPath: string): Promise<string> => {
         "src",
         `${componentPath}.tsx`
       ),
-      "utf8"
+      "utf-8"
     );
     return code
       .replaceAll("@ai-studio/shadcn-ui/", "@/")

apps/docs/components/custom/preview.tsx

@@ -1,16 +1,15 @@
-// Server component - Node.js modules are valid here
-// oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
-import { readFile } from "node:fs/promises";
-// oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
-import { join } from "node:path";
-
 import { CodeBlock } from "@repo/elements/src/code-block";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@repo/shadcn-ui/components/ui/resizable";
 import { cn } from "@repo/shadcn-ui/lib/utils";
+// Server component - Node.js modules are valid here
+// oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
+import { readFile } from "node:fs/promises";
+// oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
+import { join } from "node:path";
 
 import {
   CodeBlockTab,
@@ -35,7 +34,7 @@ export const Preview = async ({ path, className }: ComponentPreviewProps) => {
       "src",
       `${path}.tsx`
     ),
-    "utf8"
+    "utf-8"
   );
 
   const Component = await import(`@repo/examples/src/${path}.tsx`).then(
@@ -59,7 +58,7 @@ export const Preview = async ({ path, className }: ComponentPreviewProps) => {
         <CodeBlockTabsTrigger value="code">Code</CodeBlockTabsTrigger>
       </CodeBlockTabsList>
       <CodeBlockTab className="not-prose p-0" value="preview">
-        <ResizablePanelGroup direction="horizontal" id={`preview-${path}`}>
+        <ResizablePanelGroup orientation="horizontal" id={`preview-${path}`}>
           <ResizablePanel defaultSize={100}>
             <div className={cn("h-[600px] overflow-auto p-4", className)}>
               <Component />

apps/docs/components/custom/source-code.tsx

@@ -1,10 +1,9 @@
+import { cn } from "@repo/shadcn-ui/lib/utils";
 // Server component - Node.js modules are valid here
 // oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
 import { readFile } from "node:fs/promises";
 // oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules)
 import { join } from "node:path";
-
-import { cn } from "@repo/shadcn-ui/lib/utils";
 import { codeToHtml } from "shiki";
 
 import { CodeBlock } from "../geistdocs/code-block";
@@ -25,7 +24,7 @@ export const SourceCode = async ({ path, className }: SourceCodeProps) => {
       "src",
       `${path}.tsx`
     ),
-    "utf8"
+    "utf-8"
   );
 
   const parsedCode = code

apps/docs/content/components/(chatbot)/confirmation.mdx

@@ -245,7 +245,8 @@ A styled description element for displaying a title or label within the confirma
 <TypeTable
   type={{
     "...props": {
-      description: "Any other props are spread to the underlying AlertDescription component.",
+      description:
+        "Any other props are spread to the underlying AlertDescription component.",
       type: "React.ComponentProps<typeof AlertDescription>",
     },
   }}

apps/docs/content/components/(chatbot)/message.mdx

@@ -314,7 +314,8 @@ export default ActionsDemo;
 <TypeTable
   type={{
     "...props": {
-      description: "Any other props are spread to the underlying ButtonGroup component.",
+      description:
+        "Any other props are spread to the underlying ButtonGroup component.",
       type: "React.ComponentProps<typeof ButtonGroup>",
     },
   }}

apps/docs/content/components/(chatbot)/model-selector.mdx

@@ -130,6 +130,12 @@ The `ModelSelector` component provides a searchable command palette interface fo
 
 <TypeTable
   type={{
+    checked: {
+      description:
+        "Whether this item is the currently selected model. Shows the built-in check indicator.",
+      type: "boolean",
+      optional: true,
+    },
     "...props": {
       description:
         "Any other props are spread to the underlying CommandItem component.",

apps/docs/package.json

@@ -45,7 +45,6 @@
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "remark-mdx": "^3.1.1",
-    "shadcn": "^3.8.2",
     "shiki": "3.22.0",
     "sonner": "^2.0.7",
     "streamdown": "^2.1.0",
@@ -60,8 +59,9 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
+    "shadcn": "^3.8.2",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
-}
+}

package.json

@@ -8,8 +8,8 @@
     "test:coverage": "turbo run test:coverage",
     "check": "ultracite check",
     "fix": "ultracite fix",
-    "bump-deps": "npx npm-check-updates --deep -u -x recharts,react-resizable-panels && pnpm install",
-    "bump-ui": "npx shadcn@latest add --all --overwrite -c packages/shadcn-ui && npx shadcn@latest migrate radix -c packages/shadcn-ui",
+    "bump-deps": "npx npm-check-updates --deep -u && pnpm install",
+    "bump-ui": "npx shadcn@latest add --all --overwrite -c packages/shadcn-ui",
     "changeset": "changeset",
     "generate-skills": "pnpm --filter @repo/scripts generate-skills"
   },
@@ -21,7 +21,7 @@
     "oxlint": "^1.43.0",
     "turbo": "2.8.14",
     "typescript": "5.9.3",
-    "ultracite": "7.1.4",
+    "ultracite": "7.4.4",
     "vitest": "^4.0.17"
   },
   "engines": {

packages/elements/__tests__/jsx-preview.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 
 import type { JSXPreviewProps } from "../src/jsx-preview";
+
 import {
   JSXPreview,
   JSXPreviewContent,

packages/elements/__tests__/model-selector.test.tsx

@@ -332,6 +332,29 @@ describe("modelSelectorItem", () => {
       "true"
     );
   });
+
+  it("marks the selected model as checked", () => {
+    render(
+      <ModelSelector open={true}>
+        <ModelSelectorContent aria-describedby="test-description">
+          <ModelSelectorList>
+            <ModelSelectorItem checked value="gpt-4">
+              GPT-4
+            </ModelSelectorItem>
+            <ModelSelectorItem value="gpt-3.5">GPT-3.5</ModelSelectorItem>
+          </ModelSelectorList>
+        </ModelSelectorContent>
+      </ModelSelector>
+    );
+    const checkedItem = screen.getByText("GPT-4").closest('[role="option"]');
+    expect(checkedItem).toHaveAttribute("aria-checked", "true");
+    expect(checkedItem).toHaveAttribute("data-checked", "true");
+    const uncheckedItem = screen
+      .getByText("GPT-3.5")
+      .closest('[role="option"]');
+    expect(uncheckedItem).not.toHaveAttribute("aria-checked");
+    expect(uncheckedItem).not.toHaveAttribute("data-checked");
+  });
 });
 
 describe("modelSelectorShortcut", () => {

packages/elements/__tests__/prompt-input.test.tsx

@@ -4,6 +4,7 @@ import { userEvent } from "@testing-library/user-event";
 import React from "react";
 
 import type { AttachmentData } from "../src/attachments";
+
 import {
   Attachment,
   AttachmentInfo,

packages/elements/__tests__/transcription.test.tsx

@@ -1,6 +1,7 @@
+import type { Experimental_TranscriptionResult as TranscriptionResult } from "ai";
+
 import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import type { Experimental_TranscriptionResult as TranscriptionResult } from "ai";
 
 import { Transcription, TranscriptionSegment } from "../src/transcription";
 

packages/elements/src/agent.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import type { Tool } from "ai";
+import type { ComponentProps } from "react";
+
 import {
   Accordion,
   AccordionContent,
@@ -8,9 +11,7 @@ import {
 } from "@repo/shadcn-ui/components/ui/accordion";
 import { Badge } from "@repo/shadcn-ui/components/ui/badge";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { Tool } from "ai";
 import { BotIcon } from "lucide-react";
-import type { ComponentProps } from "react";
 import { memo } from "react";
 
 import { CodeBlock } from "./code-block";

packages/elements/src/artifact.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import type { LucideIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import {
   Tooltip,
@@ -8,9 +11,7 @@ import {
   TooltipTrigger,
 } from "@repo/shadcn-ui/components/ui/tooltip";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { LucideIcon } from "lucide-react";
 import { XIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
 
 export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 

packages/elements/src/attachments.tsx

@@ -1,13 +1,15 @@
 "use client";
 
+import type { FileUIPart, SourceDocumentUIPart } from "ai";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@repo/shadcn-ui/components/ui/hover-card";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { FileUIPart, SourceDocumentUIPart } from "ai";
 import {
   FileTextIcon,
   GlobeIcon,
@@ -17,7 +19,6 @@ import {
   VideoIcon,
   XIcon,
 } from "lucide-react";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { createContext, useCallback, useContext, useMemo } from "react";
 
 // ============================================================================

packages/elements/src/audio-player.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import type { Experimental_SpeechResult as SpeechResult } from "ai";
+import type { ComponentProps, CSSProperties } from "react";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import {
   ButtonGroup,
   ButtonGroupText,
 } from "@repo/shadcn-ui/components/ui/button-group";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { Experimental_SpeechResult as SpeechResult } from "ai";
 import {
   MediaControlBar,
   MediaController,
@@ -19,7 +21,6 @@ import {
   MediaTimeRange,
   MediaVolumeRange,
 } from "media-chrome/react";
-import type { ComponentProps, CSSProperties } from "react";
 
 export type AudioPlayerProps = Omit<
   ComponentProps<typeof MediaController>,

packages/elements/src/canvas.tsx

@@ -1,7 +1,7 @@
 import type { ReactFlowProps } from "@xyflow/react";
-import { Background, ReactFlow } from "@xyflow/react";
 import type { ReactNode } from "react";
 
+import { Background, ReactFlow } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 type CanvasProps = ReactFlowProps & {

packages/elements/src/chain-of-thought.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import type { LucideIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Badge } from "@repo/shadcn-ui/components/ui/badge";
 import {
@@ -8,9 +11,7 @@ import {
   CollapsibleTrigger,
 } from "@repo/shadcn-ui/components/ui/collapsible";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { LucideIcon } from "lucide-react";
 import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
 import { createContext, memo, useContext, useMemo } from "react";
 
 interface ChainOfThoughtContextValue {

packages/elements/src/checkpoint.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import type { LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import { Separator } from "@repo/shadcn-ui/components/ui/separator";
 import {
@@ -8,9 +11,7 @@ import {
   TooltipTrigger,
 } from "@repo/shadcn-ui/components/ui/tooltip";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { LucideProps } from "lucide-react";
 import { BookmarkIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
 
 export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
 

packages/elements/src/code-block.tsx

@@ -1,5 +1,13 @@
 "use client";
 
+import type { ComponentProps, CSSProperties, HTMLAttributes } from "react";
+import type {
+  BundledLanguage,
+  BundledTheme,
+  HighlighterGeneric,
+  ThemedToken,
+} from "shiki";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import {
   Select,
@@ -10,7 +18,6 @@ import {
 } from "@repo/shadcn-ui/components/ui/select";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ComponentProps, CSSProperties, HTMLAttributes } from "react";
 import {
   createContext,
   memo,
@@ -21,12 +28,6 @@ import {
   useRef,
   useState,
 } from "react";
-import type {
-  BundledLanguage,
-  BundledTheme,
-  HighlighterGeneric,
-  ThemedToken,
-} from "shiki";
 import { createHighlighter } from "shiki";
 
 // Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline