diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 97ffb2bc..ceddcfa6 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/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', }, ] diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css index 1578b065..f77a43b6 100644 --- a/apps/www/.vitepress/theme/style.css +++ b/apps/www/.vitepress/theme/style.css @@ -127,10 +127,13 @@ } } -pre { - @apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 py-4 dark:!bg-zinc-900 - +div[class^="language-"] { + @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; +} diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css index 874867ff..949b0628 100644 --- a/apps/www/.vitepress/theme/styles/vp-doc.css +++ b/apps/www/.vitepress/theme/styles/vp-doc.css @@ -420,13 +420,11 @@ .vp-doc .line-numbers-wrapper { position: absolute; top: 0; - bottom: 0; - /*rtl:ignore*/ + bottom: 0; left: 0; - z-index: 3; - /*rtl:ignore*/ + z-index: 3; 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); diff --git a/apps/www/src/content/docs/about.md b/apps/www/src/content/docs/about.md index 1dbecbe4..21e9e6be 100644 --- a/apps/www/src/content/docs/about.md +++ b/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 diff --git a/apps/www/src/content/docs/cli.md b/apps/www/src/content/docs/cli.md index 40792ab6..5441bc3e 100644 --- a/apps/www/src/content/docs/cli.md +++ b/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 tailwind.config.[cjs|js|ts] located? › tailwind.config.js -Configure the import alias for components: › $lib/components -Configure the import alias for utils: › $lib/utils +Where is your global CSS file? › › src/index.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.js +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 diff --git a/apps/www/src/content/docs/components-json.md b/apps/www/src/content/docs/components-json.md index 1fedb5d6..df417053 100644 --- a/apps/www/src/content/docs/components-json.md +++ b/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. - 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 + + 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. + 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.** -## 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`. + + +```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` + + + + + **Important:** If you're using the `src` directory, make sure it is included + under `paths` in your `tsconfig.json` or `jsconfig.json` file. + + -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" } } ``` \ No newline at end of file diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 44a20cd9..336e2bf1 100644 --- a/apps/www/src/content/docs/installation.md +++ b/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"; -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. +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. -For example, the Accordion component is split into four `.svelte` files: +For example, the Accordion component is split into four `.vue` files: -- `Accordion.svelte` -- `AccordionContent.svelte` -- `AccordionItem.svelte` -- `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 tailwind.config.[cjs|js|ts] located? › tailwind.config.js -Configure the import alias for components: › $lib/components -Configure the import alias for utils: › $lib/utils +Where is your global CSS file? › › src/index.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.js +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" -const config = { - // ... other config - kit: { - // ... other config - alias: { - '$lib': './src/lib', - '$lib/*': './src/lib/*' +```json +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] } } } ``` - -## Manual Installation +### That's it - - -### Create project - -Use the SvelteKit CLI to create a new project. +You can now start adding components to your 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. - -```bash -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( - emit: (name: Name, ...args: any[]) => void, -) { - const vm = getCurrentInstance() - - const events = vm?.type.emits as Name[] - const result: Record = {} - 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>(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" - - + ``` - -## 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 `` and `` 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. \ No newline at end of file + \ No newline at end of file diff --git a/apps/www/src/content/docs/theming.md b/apps/www/src/content/docs/theming.md index 41076bdd..744c06f0 100644 --- a/apps/www/src/content/docs/theming.md +++ b/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/ +
+``` -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. - +```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/ +
+``` + +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. - + -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. @@ -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
Hello
``` -## CSS Variables + + +**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. + + + +### List of variables Here's the list of variables available for customization: -```css title="Default background color of ...etc" + + +```css +/* Default background color of ...etc */ --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; ``` -```css title="Muted backgrounds such as , and " +```css +/* Muted backgrounds such as , and */ --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; ``` -```css title="Background color for " +```css +/* Background color for */ --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; ``` -```css title="Background color for popovers such as , , " +```css +/* Background color for popovers such as , , */ --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 ,