docs: updates cli info

apps/www/.vitepress/theme/config/docs.ts

@@ -321,37 +321,37 @@ export const examples: Example[] = [
   {
     name: 'Dashboard',
     href: '/examples/dashboard',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/dashboard',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/dashboard',
   },
   {
     name: 'Cards',
     href: '/examples/cards',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/cards',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/cards',
   },
   // {
   // 	name: "Tasks",
   // 	href: "/examples/tasks",
   // 	label: "New",
-  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/tasks"
+  // 	code: "https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/tasks"
   // },
   {
     name: 'Playground',
     href: '/examples/playground',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/playground',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/playground',
   },
   {
     name: 'Music',
     href: '/examples/music',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/music',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/music',
   },
   {
     name: 'Authentication',
     href: '/examples/authentication',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/authentication',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/examples/authentication',
   },
   {
     name: 'Forms',
     href: '/examples/forms',
-    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/forms',
+    code: 'https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/routes/examples/forms',
   },
 ]

apps/www/.vitepress/theme/style.css

@@ -127,10 +127,13 @@
 	}
 }
 
-pre {
+div[class^="language-"] {
-	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 py-4 dark:!bg-zinc-900
+	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 dark:!bg-zinc-900
-
 }
+pre {
+	@apply  py-4;
+}
+
 pre code {
 	@apply relative rounded font-mono text-sm ;
 }
@@ -139,3 +142,6 @@ pre code .line {
 	@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
 } 
 
+.line-number {
+	@apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
+}

apps/www/.vitepress/theme/styles/vp-doc.css

@@ -421,12 +421,10 @@
   position: absolute;
   top: 0;
   bottom: 0; 
-  /*rtl:ignore*/
   left: 0;
   z-index: 3; 
-  /*rtl:ignore*/
   border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 20px;
+  padding-top: 16px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);

apps/www/src/content/docs/about.md

@@ -5,7 +5,7 @@ description: Powered by amazing open source projects.
 
 ## About
 
-[shadcn-svelte](https://shadcn-svelte.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [huntabyte](https://twitter.com/huntabyte).
+[shadcn-vue](https://shadcn-vuee.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
 
 ## Credits
 

apps/www/src/content/docs/cli.md

@@ -5,9 +5,9 @@ description: Use the CLI to add components to your project.
 
 ## init
 
-Use the `init` command to initialize dependencies for a new project.
+Use the `init` command to initialize configuration and dependencies for a new project.
 
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project.
+The `init` command installs dependencies, adds the `cn`, `useEmitsAsProps` utils, configures `tailwind.config.cjs`, and creates CSS variables for the project.
 
 ```bash
 npx shadcn-vue@latest init
@@ -15,13 +15,17 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
+Would you like to use TypeScript (recommended)? no / yes
+Which framework are you using? Vite + Vue / Nuxt
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
-Where is your global CSS file? › src/app.postcss
+Where is your global CSS file? › › src/index.css
-Where is your tailwind.config.[cjs|js|ts] located? › tailwind.config.js
+Do you want to use CSS variables for colors? › no / yes
-Configure the import alias for components: › $lib/components
+Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for utils: › $lib/utils
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no / yes (no)
 ```
 
 ### Options

apps/www/src/content/docs/components-json.md

@@ -8,26 +8,27 @@ The `components.json` file holds configuration for your project.
 We use it to understand how your project is set up and how to generate components customized for your project.
 
 <Callout class="mt-6">
-  Note: The <code>components.json</code> file is optional and **only required if you're
+
-  using the CLI** to add components to your project. If you're using the copy
+  Note: The `components.json` file is optional and **only required if you're using the CLI** to add components to your project. If you're using the copy
   and paste method, you don't need this file.
+
 </Callout>
 
 You can create a `components.json` file in your project by running the following command:
 
 ```bash
-npx shadcn-svelte@latest init
+npx shadcn-vue@latest init
 ```
 
 See the [CLI section](/docs/cli) for more information.
 
 ## $schema
 
-You can see the JSON Schema for `components.json` [here](https://shadcn-svelte.com/schema.json).
+You can see the JSON Schema for `components.json` [here](https://shadcn-vue.com/schema.json).
 
 ```json title="components.json"
 {
-  "$schema": "https://shadcn-svelte.com/schema.json"
+  "$schema": "https://shadcn-vue.com/schema.json"
 }
 ```
 
@@ -44,7 +45,7 @@ The style for your components. **This cannot be changed after initialization.**
 
 <ComponentPreview name="CardWithForm" />
 
-## tailwind
+## Tailwind
 
 Configuration to help the CLI understand how Tailwind CSS is set up in your project.
 
@@ -70,7 +71,7 @@ Path to the CSS file that imports Tailwind CSS into your project.
 ```json title="components.json"
 {
   "tailwind": {
-    "css": "src/app.postcss"
+    "css": "src/assets/index.css"
   }
 }
 ```
@@ -88,11 +89,43 @@ This is used to generate the default color palette for your components. **This c
 }
 ```
 
+
+### tailwind.cssVariables
+
+You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+
+To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`.
+
+<!-- eslint-skip -->
+```json title="components.json"
+{
+  "tailwind": {
+    "cssVariables": `true` | `false`
+  }
+}
+```
+
+For more information, see the [theming docs](/docs/theming).
+
+**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
+
+
 ## aliases
 
-The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location.
+The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
+
+Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
+
+> A fallback to `tsconfig.app.json` if no `paths` were found in `tsconfig.json`
+ 
+
+<Callout class="mt-6">
+
+ **Important:** If you're using the `src` directory, make sure it is included
+  under `paths` in your `tsconfig.json` or `jsconfig.json` file.
+
+</Callout>
 
-Path aliases have to be set up in your `svelte.config.js` file.
 
 ### aliases.utils
 
@@ -101,7 +134,7 @@ Import alias for your utility functions.
 ```json title="components.json"
 {
   "aliases": {
-    "utils": "$lib/utils"
+    "utils": "@/lib/utils"
   }
 }
 ```
@@ -113,7 +146,7 @@ Import alias for your components.
 ```json title="components.json"
 {
   "aliases": {
-    "components": "$lib/components"
+    "components": "@/lib/components"
   }
 }
 ```

apps/www/src/content/docs/installation.md

@@ -7,21 +7,23 @@ description: How to install dependencies and structure your app.
   import { Alert, AlertDescription } from "@/lib/registry/default/ui/alert";
 </script>
 
-Unlike the original [shadcn/ui](https://ui.shadcn.com) for React, where the full components can exist in a single file, components in this port are split into multiple files. This is because Svelte doesn't support defining multiple components in a single file, so utilizing the CLI to add components will be the optimal approach.
+Unlike the original [shadcn/ui](https://ui.shadcn.com) for React, where the full components can exist in a single file, components in this port are split into multiple files due to majority vote from [Vue community](https://twitter.com/zernonia/status/1694351679540580524) to use `SFC` rather than `h()` render function or `JSX`, so utilizing the CLI to add components will be the optimal approach.
  
-The CLI will create a folder for _each_ component, which will sometimes just contain a single Svelte file, and in other times, multiple files. Within each folder, there will be an `index.ts` file that exports the component(s), so you can import them from a single file.
  
-For example, the Accordion component is split into four `.svelte` files:
 
-- `Accordion.svelte`
+The CLI will create a folder for _each_ component, which will sometimes just contain a single Vue file, and in other times, multiple files. Within each folder, there will be an `index.ts` file that exports the component(s), so you can import them from a single file.
-- `AccordionContent.svelte`
+
-- `AccordionItem.svelte`
+For example, the Accordion component is split into four `.vue` files:
-- `AccordionTrigger.svelte`
+
+- `Accordion.vue`
+- `AccordionContent.vue`
+- `AccordionItem.vue`
+- `AccordionTrigger.vue`
 
 They can then be imported from the `accordion/index.ts` file like so:
 
 ```ts
-import * as Accordion from '$lib/components/ui/accordion'
+import * as Accordion from '@/components/ui/accordion'
 
 // or
 import {
@@ -29,7 +31,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger
-} from '$lib/components/ui/accordion'
+} from '@/components/ui/accordion'
 ```
 
 Regardless of the import approach you take, the components will be tree-shaken by Rollup, so you don't have to worry about unused components being bundled into your app.
@@ -40,18 +42,20 @@ Regardless of the import approach you take, the components will be tree-shaken b
 
 ### Create project
 
-Use the SvelteKit CLI to create a new project.
+Use the Vue CLI to create a new project.
 
 ```bash
-npm create svelte@latest my-app
+npm create vue@latest 
 ```
 
-### Add TailwindCSS
+### Add Tailwind and its configuration
 
-Use the `svelte-add` CLI to add Tailwind CSS to your project.
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
 
 ```bash
-npx svelte-add@latest tailwindcss
+npm install -D tailwindcss postcss autoprefixer
+
+npx tailwindcss init -p
 ```
 
 ### Install dependencies
@@ -63,320 +67,63 @@ npm install
 ### Run the CLI
 
 ```bash
-npx shadcn-svelte@latest init
+npx shadcn-vue@latest init
 ```
 
 ### Configure components.json
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
+Would you like to use TypeScript (recommended)? no / yes
+Which framework are you using? Vite + Vue / Nuxt
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
-Where is your global CSS file? › src/app.postcss
+Where is your global CSS file? › › src/index.css
-Where is your tailwind.config.[cjs|js|ts] located? › tailwind.config.js
+Do you want to use CSS variables for colors? › no / yes
-Configure the import alias for components: › $lib/components
+Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for utils: › $lib/utils
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no / yes (no)
 ```
 
-### Setup path aliases
+### Edit tsconfig.json
 
-If you changed the path aliases from the default, you'll also need to update your `svelte.config.js` file to include those aliases.
+By default your `tsconfig.json` for new project should be configured nicely. However, make sure the code below is added in the compilerOptions of your tsconfig.json so your app can resolve paths without error
 
-```js title="svelte.config.js"
+```json 
-const config = {
+{
-  // ... other config
+  "compilerOptions": {
-  kit: {
+    "baseUrl": ".",
-    // ... other config
+    "paths": {
-    alias: {
+      "@/*": ["./src/*"]
-      '$lib': './src/lib',
-      '$lib/*': './src/lib/*'
     }
   }
 }
 ```
 
-</Steps>
 
-## Manual Installation
+### That's it
 
-<Steps>
+You can now start adding components to your project.
-
-### Create project
-
-Use the SvelteKit CLI to create a new project.
 
 ```bash
-npm create svelte@latest my-app
+npx shadcn-vue@latest add button
 ```
 
-### Add Tailwind
+The command above will add the `Button` component to your project. You can then import it like this:
 
-Use the `svelte-add` CLI to add Tailwind CSS to your project.
+```vue {2,7}
-
+<script setup lang="ts">
-```bash
+import { Button } from '@/components/ui/button'
-npx svelte-add@latest tailwindcss
-```
-
-### Add dependencies
-
-Add the following dependencies to your project:
-
-```bash
-npm install tailwind-variants clsx tailwind-merge
-```
-
-### Configure tailwind.config.js
-
-This is what this project's `tailwind.config.js` file looks like:
-
-```javascript title="tailwind.config.js"
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-  darkMode: ["class"],
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px"
-      }
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        }
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)"
-      },
-      fontFamily: {
-        sans: ["Inter", ...fontFamily.sans]
-      }
-    }
-  },
-  plugins: [tailwindcssAnimate]
-};
-
-export default config;
-```
-
-Feel free to add or modify as needed to suit your project.
-
-### Configure styles
-
-Add the following to your `src/app.postcss` file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).
-
-```css title="src/app.postcss"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 92% 38%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 359 51% 48%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-```
-
-### Configure utils
-
-You'll want to create a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Additionally, you'll want to add the custom transition that is used by various components.
-
-```ts title="src/lib/utils.ts"
-import type { Updater } from '@tanstack/vue-table'
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-import { type Ref, camelize, getCurrentInstance, toHandlerKey } from 'vue'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-// Vue doesn't have emits forwarding, in order to bind the emits we have to convert events into `onXXX` handlers
-// issue: https://github.com/vuejs/core/issues/5917
-export function useEmitAsProps<Name extends string>(
-  emit: (name: Name, ...args: any[]) => void,
-) {
-  const vm = getCurrentInstance()
-
-  const events = vm?.type.emits as Name[]
-  const result: Record<string, any> = {}
-  if (!events?.length) {
-    console.warn(
-      `No emitted event found. Please check component: ${vm?.type.__name}`,
-    )
-  }
-
-  events?.forEach((ev) => {
-    result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
-  })
-  return result
-}
-
-export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value
-    = typeof updaterOrValue === 'function'
-      ? updaterOrValue(ref.value)
-      : updaterOrValue
-}
-```
-
-### Import styles to your app
-
-Create `src/routes/+layout.svelte` and import the styles:
-
-```svelte title="src/routes/+layout.svelte"
-<script lang="ts">
-  import "../app.postcss";
 </script>
 
-<slot />
+<template>
+  <div>
+    <Button>Click me</Button>
+  </div>
+</template>
 ```
 
 </Steps>
   
-## Icons
-
-This project uses icons from [Lucide](https://lucide.dev/) for the `default` style, and [Radix](https://radix-ui.com/icons) for the `new-york` style, but feel free to use any icon library.
-
-## App structure
-
-Here's a recommended, but not required app structure:
-
-```txt {4-11,15,19}
-src
-├── lib
-│   ├── components
-│   │   ├── ui
-│   │   │   ├── alert-dialog
-│   │   │   │   ├── index.ts
-│   │   │   │   └── alert.svelte
-│   │   │   ├── button
-│   │   │   │   ├── index.ts
-│   │   │   │   └── button.svelte
-│   │   │   └── ...
-│   │   ├── navigation.svelte
-│   │   ├── page-header.svelte
-│   │   └── ...
-│   └── utils.ts
-├── routes
-│   ├── +page.svelte
-│   └── +layout.svelte
-├── app.postcss
-```
-
-- Place the UI components in the `lib/components/ui` folder.
-- The rest of the components such as `<PageHeader />` and `<Navigation />` are placed in the `lib/components` folder.
-- The `lib/utils.ts` file is where you can define the `cn` helper.
-- The `app.postcss` file contains the global CSS.
-
-That's it. You can now start adding components to your project.

apps/www/src/content/docs/theming.md

@@ -4,23 +4,66 @@ description: Use CSS Variables to customize the look and feel of your applicatio
 ---
 
  
-We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names.
+You can choose between using CSS variables or Tailwind CSS utility classes for theming.
 
-**CSS variables must be defined without the color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information.
+## Utility classes
 
-## Hex -> Color Channel
+```html /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
+<div class="bg-zinc-950 dark:bg-white" />
+```
 
-You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable.
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
 
-<!-- <HexToChannels /> -->
+```json {8} title="components.json"
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
 
-## Convention
+## CSS Variables
+
+```html /bg-background/ /text-foreground/
+<div class="bg-background text-foreground" />
+```
+
+To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+ 
+
+```json {8} title="components.json"
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+### Convention
 
 We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
 
-<Callout>
+<Callout class="mt-4">
 
-The `background` suffix can be omitted if the variable is used for the background color of the component.
+The `background` suffix is omitted when the variable is used for the background color of the component.
 
 </Callout>
 
@@ -33,152 +76,138 @@ Given the following CSS variables:
 
 The `background` color of the following component will be `hsl(var(--primary))` and the `foreground` color will be `hsl(var(--primary-foreground))`.
 
-```svelte
+```html
 <div class="bg-primary text-primary-foreground">Hello</div>
 ```
 
-## CSS Variables
+<Callout>
+
+**CSS variables must be defined without color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information.
+
+</Callout>
+
+### List of variables
 
 Here's the list of variables available for customization:
 
-```css title="Default background color of <body />...etc"
+<Steps>
+
+```css
+/* Default background color of <body />...etc */
 --background: 0 0% 100%;
 --foreground: 222.2 47.4% 11.2%;
 ```
 
-```css title="Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+```css 
+/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
 --muted: 210 40% 96.1%;
 --muted-foreground: 215.4 16.3% 46.9%;
 ```
 
-```css title="Background color for <Card />"
+```css 
+/* Background color for <Card /> */
 --card: 0 0% 100%;
 --card-foreground: 222.2 47.4% 11.2%;
 ```
 
-```css title="Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+```css 
+/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
 --popover: 0 0% 100%;
 --popover-foreground: 222.2 47.4% 11.2%;
 ```
 
-```css title="Default border color"
+```css 
+/* Default border color */
 --border: 214.3 31.8% 91.4%;
 ```
 
-```css title="Border color for inputs such as <Input />, <Select />, <Textarea />"
+```css 
+/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
 --input: 214.3 31.8% 91.4%;
 ```
 
-```css title="Primary colors for <Button />"
+```css 
+/* Primary colors for <Button /> */
 --primary: 222.2 47.4% 11.2%;
 --primary-foreground: 210 40% 98%;
 ```
 
-```css title="Secondary colors for <Button />"
+```css 
+/* Secondary colors for <Button /> */
 --secondary: 210 40% 96.1%;
 --secondary-foreground: 222.2 47.4% 11.2%;
 ```
 
-```css title="Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+```css 
+/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
 --accent: 210 40% 96.1%;
 --accent-foreground: 222.2 47.4% 11.2%;
 ```
 
-```css title="Used for destructive actions such as <Button variant='destructive'>"
+```css 
+/* Used for destructive actions such as <Button variant="destructive"> */
 --destructive: 0 100% 50%;
 --destructive-foreground: 210 40% 98%;
 ```
 
-```css title="Used for focus ring"
+```css 
+/* Used for focus ring */
 --ring: 215 20.2% 65.1%;
 ```
 
-```css title="Border radius for card, input and buttons"
+```css 
+/* Border radius for card, input and buttons */
 --radius: 0.5rem;
 ```
 
-## Default
+</Steps>
 
-The following is the default color palette used by the components.
+### Adding new colors
 
-```css title="src/app.postcss"
+To add new colors, you need to add them to your CSS file and to your `tailwind.config.js` file.
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-@layer base {
+```css title="app/globals.css"
-  :root {
+:root {
-    --background: 0 0% 100%;
+  --warning: 38 92% 50%;
-    --foreground: 240 10% 3.9%;
+  --warning-foreground: 48 96% 89%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 5% 64.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 240 3.7% 15.9%;
-  }
 }
 
-@layer base {
+.dark {
-  * {
+  --warning: 48 96% 89%;
-    @apply border-border;
+  --warning-foreground: 38 92% 50%;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
 }
 ```
+
+```js {5-6} title="tailwind.config.js"
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'warning': 'hsl(var(--warning))',
+        'warning-foreground': 'hsl(var(--warning-foreground))',
+      },
+    },
+  },
+}
+```
+
+You can now use the `warning` utility class in your components.
+
+```html /bg-warning/ /text-warning-foreground/
+<div class="bg-warning text-warning-foreground" />
+```
+
+### Other color formats
+
+I recommend using [HSL colors](https://www.smashingmagazine.com/2021/07/hsl-colors-css/) for theming but you can also use other color formats if you prefer.
+
+See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information on using `rgb`, `rgba` or `hsl` colors.
+
+
+
+
+## Hex -> Color Channel
+
+You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable.
+
+<!-- <HexToChannels /> -->

apps/www/src/lib/registry/default/example/TypographyDemo.vue

@@ -15,7 +15,6 @@
     </h2>
     <p class="leading-7 [&:not(:first-child)]:mt-6">
       The king thought long and hard, and finally came up with{" "}
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <a
         href="#"
         class="font-medium text-primary underline underline-offset-4"