diff --git a/apps/www/content/docs/installation/tanstack.mdx b/apps/www/content/docs/installation/tanstack.mdx index 82145e8ee9..a42fcf5d99 100644 --- a/apps/www/content/docs/installation/tanstack.mdx +++ b/apps/www/content/docs/installation/tanstack.mdx @@ -1,105 +1,73 @@ --- title: TanStack Start -description: Install and configure TanStack Start. +description: Install and configure shadcn/ui for TanStack Start. --- - - **Note:** This guide is for TanStack Start and Tailwind v4. If you are using - Tailwind v3, consider the [Basic Starter](#basic-starter) template. **TanStack - Start** works with the **canary** version of `shadcn`. + + **Update:** We have added full support for React 19 and Tailwind v4 in the + `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more + information. -## TanStack Start + Tailwind v4 - ### Create project -Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website. - -### Add Tailwind - -Install `tailwindcss` and its dependencies. +Start by creating a new TanStack Start project: ```bash -npm install tailwindcss @tailwindcss/postcss postcss -``` - -### Create postcss.config.ts - -Create a `postcss.config.ts` file at the root of your project. - -```ts title="postcss.config.ts" showLineNumbers -export default { - plugins: { - "@tailwindcss/postcss": {}, - }, -} -``` - -### Create `app/styles/app.css` - -Create an `app.css` file in the `app/styles` directory and import `tailwindcss` - -```css title="app/styles/app.css" -@import "tailwindcss" source("../"); -``` - -### Import `app.css` - -```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers -import type { ReactNode } from "react" -import { Outlet, createRootRoute } from "@tanstack/react-router" -import { Meta, Scripts } from "@tanstack/start" - -import appCss from "@/styles/app.css?url" - -export const Route = createRootRoute({ - head: () => ({ - meta: [ - { - charSet: "utf-8", - }, - { - name: "viewport", - content: "width=device-width, initial-scale=1", - }, - { - title: "TanStack Start Starter", - }, - ], - links: [ - { - rel: "stylesheet", - href: appCss, - }, - ], - }), - component: RootComponent, -}) +npx create-tsrouter-app@latest my-app --template typescript --tailwind ``` ### Edit tsconfig.json file -Add the following code to the `tsconfig.json` file to resolve paths. +Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json`: -```ts title="tsconfig.json" showLineNumbers {9-12} +```ts title="tsconfig.json" showLineNumbers {3-6} { "compilerOptions": { - "jsx": "react-jsx", - "moduleResolution": "Bundler", - "module": "ESNext", - "target": "ES2022", - "skipLibCheck": true, - "strictNullChecks": true, "baseUrl": ".", "paths": { - "@/*": ["./app/*"] + "@/*": ["./src/*"] } } } ``` +### Update vite.config.ts + +Add the following code to the `vite.config.ts` file so your app can resolve paths without error: + +```bash +npm install -D @types/node +``` + +```typescript title="vite.config.ts" showLineNumbers {18-22} +import path from "path" +import tailwindcss from "@tailwindcss/vite" +import { TanStackRouterVite } from "@tanstack/router-plugin/vite" +import viteReact from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + TanStackRouterVite({ autoCodeSplitting: true }), + viteReact(), + tailwindcss(), + ], + test: { + globals: true, + environment: "jsdom", + }, + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}) +``` + ### Run the CLI Run the `shadcn` init command to setup your project: @@ -108,7 +76,7 @@ Run the `shadcn` init command to setup your project: npx shadcn@canary init -d ``` -This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`. +This will create a `components.json` file in the root of your project and configure CSS variables inside `src/styles.css`. ### That's it @@ -120,56 +88,16 @@ npx shadcn@canary add button The command above will add the `Button` component to your project. You can then import it like this: -```tsx title="app/routes/index.tsx" showLineNumbers {1,6} +```tsx title="app/routes/index.tsx" showLineNumbers {3,12} +import { createFileRoute } from "@tanstack/react-router" + import { Button } from "@/components/ui/button" -function Home() { - const router = useRouter() - const state = Route.useLoaderData() - - return ( -
- -
- ) -} -``` - - - -## Basic Starter - -The [Basic Starter](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic) template has Tailwind v3 already configured. - - - -### Run the CLI - -Run the `shadcn` init command to setup your project: - -```bash -npx shadcn@canary init -d -``` - -This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`. - -### That's it - -You can now start adding components to your project. - -```bash -npx shadcn@canary add button -``` - -The command above will add the `Button` component to your project. You can then import it like this: - -```tsx title="app/routes/index.tsx" showLineNumbers {1,6} -import { Button } from "@/components/ui/button" - -function Home() { - const router = useRouter() - const state = Route.useLoaderData() +export const Route = createFileRoute("/")({ + component: App, +}) +function App() { return (
diff --git a/apps/www/public/r/colors/gray.json b/apps/www/public/r/colors/gray.json index 316f5ee099..bf94716771 100644 --- a/apps/www/public/r/colors/gray.json +++ b/apps/www/public/r/colors/gray.json @@ -123,7 +123,7 @@ "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", - "radius": "0.625rem;", + "radius": "0.625rem", "sidebar": "oklch(0.985 0.002 247.839)", "sidebar-foreground": "oklch(0.13 0.028 261.692)", "sidebar-primary": "oklch(0.21 0.034 264.665)", @@ -170,4 +170,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file +} diff --git a/apps/www/public/r/colors/neutral.json b/apps/www/public/r/colors/neutral.json index 10de157600..81fe3d1aac 100644 --- a/apps/www/public/r/colors/neutral.json +++ b/apps/www/public/r/colors/neutral.json @@ -123,7 +123,7 @@ "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", - "radius": "0.625rem;", + "radius": "0.625rem", "sidebar": "oklch(0.985 0 0)", "sidebar-foreground": "oklch(0.145 0 0)", "sidebar-primary": "oklch(0.205 0 0)", @@ -170,4 +170,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file +} diff --git a/apps/www/public/r/colors/slate.json b/apps/www/public/r/colors/slate.json index c6f5252752..d255183216 100644 --- a/apps/www/public/r/colors/slate.json +++ b/apps/www/public/r/colors/slate.json @@ -123,7 +123,7 @@ "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", - "radius": "0.625rem;", + "radius": "0.625rem", "sidebar": "oklch(0.984 0.003 247.858)", "sidebar-foreground": "oklch(0.129 0.042 264.695)", "sidebar-primary": "oklch(0.208 0.042 265.755)", @@ -170,4 +170,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file +} diff --git a/apps/www/public/r/colors/stone.json b/apps/www/public/r/colors/stone.json index bfd9fd47b0..e0b9f64d85 100644 --- a/apps/www/public/r/colors/stone.json +++ b/apps/www/public/r/colors/stone.json @@ -123,7 +123,7 @@ "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", - "radius": "0.625rem;", + "radius": "0.625rem", "sidebar": "oklch(0.985 0.001 106.423)", "sidebar-foreground": "oklch(0.147 0.004 49.25)", "sidebar-primary": "oklch(0.216 0.006 56.043)", @@ -170,4 +170,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file +} diff --git a/apps/www/public/r/colors/zinc.json b/apps/www/public/r/colors/zinc.json index fb0a460217..11902f94fc 100644 --- a/apps/www/public/r/colors/zinc.json +++ b/apps/www/public/r/colors/zinc.json @@ -123,7 +123,7 @@ "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", - "radius": "0.625rem;", + "radius": "0.625rem", "sidebar": "oklch(0.985 0 0)", "sidebar-foreground": "oklch(0.141 0.005 285.823)", "sidebar-primary": "oklch(0.21 0.006 285.885)", @@ -170,4 +170,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file +} diff --git a/apps/www/registry/registry-base-colors.ts b/apps/www/registry/registry-base-colors.ts index 40dcc009bd..f0ac17d75c 100644 --- a/apps/www/registry/registry-base-colors.ts +++ b/apps/www/registry/registry-base-colors.ts @@ -782,7 +782,7 @@ export const baseColorsV4 = { "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 - radius: "0.625rem;", // Not a color + radius: "0.625rem", // Not a color sidebar: "oklch(0.985 0.001 106.423)", // --color-stone-50 "sidebar-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950 "sidebar-primary": "oklch(0.216 0.006 56.043)", // --color-stone-900 @@ -853,7 +853,7 @@ export const baseColorsV4 = { "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 - radius: "0.625rem;", // Not a color + radius: "0.625rem", // Not a color sidebar: "oklch(0.985 0 0)", // --color-zinc-50 "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 "sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900 @@ -924,7 +924,7 @@ export const baseColorsV4 = { "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 - radius: "0.625rem;", // Not a color + radius: "0.625rem", // Not a color sidebar: "oklch(0.985 0 0)", // --color-neutral-50 "sidebar-foreground": "oklch(0.145 0 0)", // --color-neutral-950 "sidebar-primary": "oklch(0.205 0 0)", // --color-neutral-900 @@ -995,7 +995,7 @@ export const baseColorsV4 = { "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 - radius: "0.625rem;", // Not a color + radius: "0.625rem", // Not a color sidebar: "oklch(0.985 0.002 247.839)", // --color-gray-50 "sidebar-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950 "sidebar-primary": "oklch(0.21 0.034 264.665)", // --color-gray-900 @@ -1066,7 +1066,7 @@ export const baseColorsV4 = { "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 - radius: "0.625rem;", // Not a color + radius: "0.625rem", // Not a color sidebar: "oklch(0.984 0.003 247.858)", // --color-slate-50 "sidebar-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950 "sidebar-primary": "oklch(0.208 0.042 265.755)", // --color-slate-900