diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..64d3d6a0
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e1a2d038..3664529f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,6 +10,7 @@
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
+ "eslint.useFlatConfig": true,
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "format/*", "severity": "off" },
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 65b33573..ccfcc04a 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -1,14 +1,14 @@
@@ -99,6 +99,8 @@ You can compose `` with a `` to create a dropd
```vue showLineNumbers {2-7,16-26}
@@ -169,13 +169,13 @@ To use a custom link component from your routing library, you can use the `asChi
```vue showLineNumbers {15-19}
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 9447d118..073ab4e9 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -24,6 +24,10 @@ If you're looking for a range calendar, check out the [Range Calendar](/docs/com
```bash
npx shadcn-vue@latest add calendar
```
+::: tip
+The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
+Check [Dates & Times in Radix Vue](https://www.radix-vue.com/guides/dates.html) for more information and installation instructions.
+:::
## Datepicker
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index d36f2104..777f1396 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -10,7 +10,7 @@ primitive: https://tanstack.com/table/v8/docs/guide/introduction
Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources.
-It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/guide/introduction#what-is-headless-ui) provides.
+It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/latest/docs/introduction#what-is-headless-ui) provides.
So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own.
@@ -55,6 +55,20 @@ npm install @tanstack/vue-table
+### Reactive Table
+
+A reactive table was added in `v8.20.0` of the TanStack Table. You can see the [docs](https://tanstack.com/table/latest/docs/framework/vue/guide/table-state#using-reactive-data) for more information. We added an example where we are randomizing `status` column. One main point is that you need to mutate **full** data, as it is a `shallowRef` object.
+
+> __*⚠️ `shallowRef` is used under the hood for performance reasons, meaning that the data is not deeply reactive, only the `.value` is. To update the data you have to mutate the data directly.*__
+
+Relative PR: [Tanstack/table #5687](https://github.com/TanStack/table/pull/5687#issuecomment-2281067245)
+
+If you want to mutate `props.data`, you should use [`defineModel`](https://vuejs.org/api/sfc-script-setup.html#definemodel).
+
+There is no difference between using `ref` or `shallowRef` for your data object; it will be automatically mutated by the TanStack Table to `shallowRef`.
+
+
+
## Prerequisites
We are going to build a table to show recent payments. Here's what our data looks like:
@@ -149,12 +163,6 @@ Next, we'll create a `` component to render our table.
```vue
+
+
+
+
+```
+
+### Add the expand action to the `DataTableDropDown.vue` component
+
+```vue:line-numbers {12-14,34-36}
+
+
+
+
+
+
+
+
+ Actions
+
+ Copy payment ID
+
+
+ Expand
+
+
+ View customer
+ View payment details
+
+
+
+```
+
+### Make rows expandable
+
+Now we can update the action cell to add the expand control.
+
+```vue:line-numbers {11}
+
+
```
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index de448dbb..fee3e020 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -62,6 +62,10 @@ import {
+### Form
+
+
+
## Notes
To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
diff --git a/apps/www/src/content/docs/components/number-field.md b/apps/www/src/content/docs/components/number-field.md
index e47d05aa..b4b5ca10 100644
--- a/apps/www/src/content/docs/components/number-field.md
+++ b/apps/www/src/content/docs/components/number-field.md
@@ -22,14 +22,14 @@ npx shadcn-vue@latest add number-field
```vue
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index 898bc9c8..eca5a6c3 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
-
+
```
diff --git a/apps/www/src/content/docs/components/stepper.md b/apps/www/src/content/docs/components/stepper.md
new file mode 100644
index 00000000..f3c7ec01
--- /dev/null
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -0,0 +1,64 @@
+---
+title: Stepper
+description: A set of steps that are used to indicate progress through a multi-step process.
+source: apps/www/src/lib/registry/default/ui/stepper
+primitive: https://www.radix-vue.com/components/stepper.html
+---
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add stepper
+```
+
+## Usage
+
+```vue
+
+
+
+
+
+
+ 1
+ Step 1
+ This is the first step
+
+
+
+
+
+ 2
+ Step 2
+ This is the second step
+
+
+
+
+```
+
+## Examples
+
+### Horizontal
+
+
+
+### Vertical
+
+
+
+### Form
+
+
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 416aee80..c0fcc1d9 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -39,3 +39,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
```
+
+## Examples
+
+### Vertical
+
+
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
index 97071831..f5d7468c 100644
--- a/apps/www/src/content/docs/components/tags-input.md
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -18,3 +18,7 @@ npx shadcn-vue@latest add tags-input
### Tags with Combobox
+
+### Form
+
+
diff --git a/apps/www/src/content/docs/contribution.md b/apps/www/src/content/docs/contribution.md
index 14fcdca3..782ddbb3 100644
--- a/apps/www/src/content/docs/contribution.md
+++ b/apps/www/src/content/docs/contribution.md
@@ -2,6 +2,15 @@
title: Contribution
description: Learn on how to contribute to shadcn/vue.
---
+
+
## Introduction
Thanks for your interest in contributing to shadcn-vue.com. We're happy to have you here.
@@ -212,9 +221,9 @@ Take a look at `DrawerDescription.vue`.
```vue
@@ -100,7 +100,7 @@ Place a mode toggle on your site to toggle between light and dark mode.
```astro title="src/pages/index.astro"
---
import '../styles/globals.css'
-import { ModeToggle } from '@/components/ModeToggle.vue';
+import ModeToggle from '@/components/ModeToggle.vue';
---
diff --git a/apps/www/src/content/docs/dark-mode/nuxt.md b/apps/www/src/content/docs/dark-mode/nuxt.md
index 4bf1150c..576df1e6 100644
--- a/apps/www/src/content/docs/dark-mode/nuxt.md
+++ b/apps/www/src/content/docs/dark-mode/nuxt.md
@@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
-### Install Dependencies
+
+
+### Add a mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+The `@nuxtjs/color-mode` module is automatically installed and configured during the installation of the `shadcn-nuxt` module, so you literally have nothing to do.
+
+We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
Optional, to include icons for theme button.
```bash
npm install -D @iconify/vue @iconify-json/radix-icons
```
-### Add a mode toggle
-
-Place a mode toggle on your site to toggle between light and dark mode.
-
-We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
-
```vue
diff --git a/apps/www/src/content/docs/dark-mode/vite.md b/apps/www/src/content/docs/dark-mode/vite.md
index 921af076..450072b5 100644
--- a/apps/www/src/content/docs/dark-mode/vite.md
+++ b/apps/www/src/content/docs/dark-mode/vite.md
@@ -27,11 +27,12 @@ We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueu
```vue
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md
index b268ed1f..c1852bae 100644
--- a/apps/www/src/content/docs/installation/astro.md
+++ b/apps/www/src/content/docs/installation/astro.md
@@ -115,7 +115,7 @@ Write configuration to components.json. Proceed? > Y/n
### Import the globals.css file
-Import the `globals.css` file in the `src/index.astro` file:
+Import the `globals.css` file in the `src/pages/index.astro` file:
```ts:line-numbers {2}
---
diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md
index fc8fd8ae..4f2aa947 100644
--- a/apps/www/src/content/docs/installation/laravel.md
+++ b/apps/www/src/content/docs/installation/laravel.md
@@ -10,7 +10,7 @@ description: Install and configure Laravel with Inertia
Start by creating a new Laravel project with Inertia and Vue using the Laravel installer `laravel new my-app`:
```bash
-laravel new my-app --typescript --breeze --stack=vue --git --no-interaction
+laravel new my-app --breeze --stack=vue --git
```
### Run the CLI
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index b698435e..89dce2d6 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -9,6 +9,12 @@ description: Install and configure Nuxt.
Start by creating a new Nuxt project using `create-nuxt-app`:
+
+
+ If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors.
+
+
+
```bash
npx nuxi@latest init my-app
```
@@ -82,7 +88,8 @@ export default defineNuxtModule({
},
},
async setup({ componentDir, prefix }) {
- const isVeeValidateExist = await tryResolveModule('vee-validate');
+ const veeValidate = await tryResolveModule('vee-validate');
+ const vaulVue = await tryResolveModule('vaul-vue');
addComponentsDir(
{
@@ -96,7 +103,7 @@ export default defineNuxtModule({
}
);
- if (isVeeValidateExist !== undefined) {
+ if (veeValidate !== undefined) {
addComponent({
filePath: 'vee-validate',
export: 'Form',
@@ -112,6 +119,17 @@ export default defineNuxtModule({
});
}
+ if(vaulVue !== undefined) {
+ ['DrawerPortal', 'DrawerTrigger', 'DrawerClose'].forEach((item) => {
+ addComponent({
+ filePath: 'vaul-vue',
+ export: item,
+ name: prefix + item,
+ priority: 999,
+ });
+ })
+ }
+
addComponent({
filePath: 'radix-vue',
export: 'PaginationRoot',
diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 9505faf2..9b50cecb 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -45,12 +45,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config`
```typescript {5,6,9-13}
- import path from "path"
- import { defineConfig } from "vite"
- import vue from "@vitejs/plugin-vue"
+ import path from 'node:path'
+ import vue from '@vitejs/plugin-vue'
+ import autoprefixer from 'autoprefixer'
- import tailwind from "tailwindcss"
- import autoprefixer from "autoprefixer"
+ import tailwind from 'tailwindcss'
+ import { defineConfig } from 'vite'
export default defineConfig({
css: {
@@ -61,7 +61,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
plugins: [vue()],
resolve: {
alias: {
- "@": path.resolve(__dirname, "./src"),
+ '@': path.resolve(__dirname, './src'),
},
},
})
@@ -91,6 +91,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
### Edit tsconfig/jsconfig.json
+
+
+If you're using TypeScript, the current version of Vite splits configuration into three files, requiring the same change for `tsconfig.app.json`.
+
+
+
Add the code below to the compilerOptions of your `tsconfig.json` or `jsconfig.json` so your app can resolve paths without error
```json {4-7}
@@ -116,12 +122,12 @@ npm i -D @types/node
```
```typescript {15-19}
-import path from "path"
-import vue from "@vitejs/plugin-vue"
-import { defineConfig } from "vite"
+import path from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
-import tailwind from "tailwindcss"
-import autoprefixer from "autoprefixer"
+import tailwind from 'tailwindcss'
+import { defineConfig } from 'vite'
export default defineConfig({
css: {
@@ -132,7 +138,7 @@ export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
- "@": path.resolve(__dirname, "./src"),
+ '@': path.resolve(__dirname, './src'),
},
},
})
@@ -160,7 +166,7 @@ Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
-Where is your global CSS file? › › src/index.css
+Where is your global CSS file? › › src/assets/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
diff --git a/apps/www/src/content/docs/introduction.md b/apps/www/src/content/docs/introduction.md
index e5957005..eabaa5e5 100644
--- a/apps/www/src/content/docs/introduction.md
+++ b/apps/www/src/content/docs/introduction.md
@@ -3,8 +3,8 @@ title: Introduction
description: Re-usable components built with Radix Vue, and Tailwind CSS.
---
-
An unofficial, community-led [Vue](https://vuejs.org/) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a Vue version of his work. This project was born out of the need for a similar project for the Vue ecosystem.
@@ -19,8 +19,13 @@ Pick the components you need. Use the CLI to automatically add the components, o
_Use this as a reference to build your own component libraries._
+
+
## FAQ
+
+
+
@@ -58,3 +63,4 @@ But let us know if you do use it. We'd love to see what you build with it.
+