mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 22:45:47 +00:00
Merge branch 'main' of github.com:shadcn-ui/ui
This commit is contained in:
shadcn
@@ -1,105 +1,73 @@
|
||||
---
|
||||
title: TanStack Start
|
||||
description: Install and configure TanStack Start.
|
||||
description: Install and configure shadcn/ui for TanStack Start.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
**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`.
|
||||
<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
|
||||
**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.
|
||||
</Callout>
|
||||
|
||||
## TanStack Start + Tailwind v4
|
||||
|
||||
<Steps>
|
||||
|
||||
### 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 (
|
||||
<div>
|
||||
<Button>Click me</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Basic Starter
|
||||
|
||||
The [Basic Starter](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic) template has Tailwind v3 already configured.
|
||||
|
||||
<Steps>
|
||||
|
||||
### 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 (
|
||||
<div>
|
||||
<Button>Click me</Button>
|
||||
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user