radix-vue / shadcn-vue

Vue port of shadcn-ui

Radix Vue

An unofficial Vue port of Radix UI.
Radix is an unstyled, customisable UI Library with built in accessibility for building top quality design systems.

Get involved!

Documentation | Getting Started | Examples | Why Radix Vue?

design by: icarusgkx, melkam

Installation

pnpm add radix-vue

npm install radix-vue

yarn add radix-vue

Documentation

For full documentation, visit radix-vue.com.

Releases

For changelog, visit releases.

Contributing

We would love to have your contributions! All PRs all welcomed! We need help building the core components, docs, tests, stories! Join our discord and we will get you up and running!

Dev Setup

Docs

1. Clone the repo
2. Run pnpm i
3. Run pnpm build to run build radix-vue locally
4. Run pnpm docs:dev to run vitepress
5. Open http://localhost:5173

Package

1. Clone the repo
2. Run pnpm i
3. Run pnpm story:dev to run histoire (storybook)
4. Open http://localhost:6006

Authors

• Khairul Haaziq
• Mujahid Anuar
• Zernonia

Credits

All credits go to these open-source works and resources

• Radix UI for doing all the hard work to make sure components are accessible
• Floating UI for creating powerful components that as the base of many Radix Vue components
• VueUse for providing many useful utilities.
• Ark UI for the <Primitive> component
• Radix Svelte
• Headless UI

shadcn-vue's Issues

[Bug]: Toggle widget does not have proper background

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

None

Steps to reproduce

When using the background is transparent instead of being bg-background like on the other widgets (like )

I assumed they should be similar, no?

Describe the bug

It should be similar to the appearance of Button or Dropdown etc

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[Feature]: Support Nuxt Layer

Describe the feature

Hi!

Nuxt Layer is an excellent tool to create an instance of nuxt that contains boilerplate/themes that are to be used on multiple sites. It would make sense for Shadcn to support Nuxt Layer, thus not having to install Shadcn on all layers.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Implement `useForwardPropsEmits` from `radix-vue`

[Bug]: Theme page is not functional

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.shadcn-vue.com/themes.html

Steps to reproduce

1. Go to the themes page
2. Open the copy code modal

Describe the bug

The modal opens with the following content and the code is missing:
Copy and paste the following code into your CSS file.

Expected behavior

A code snippet should be visible
Refer to shadcn-ui https://ui.shadcn.com/themes

Conext & Screenshots (if applicable)

[Bug]: Javascript has empty props/emits

Since v0.1.6, we've introduce detype to purge off all types related code in components.
However this leads to components having empty props/emits declarations.

Unfortuantely this would required a huge refactors on all the components.

[Bug]: Class name duplicated

If you inspecting some element, you would notice a duplicated class name mainly due to using 2. approach mentioned below.

For components in registry, you would see 2 different approach for passing the class name into cn function.

1. using class props.

const props = defineProps<... & { class?: string }>()
...
cn(...., props.class)

2. using inherited attributes

cn(..., $attrs.class)

The reason I'm hesitating is because I don't like to declare class props in every component, using $attrs.class seems much more intuitive. wdyt??

[Feature]: Replace iconify icons with `radix-icons/vue` for NewYork style

Describe the feature

Using iconify icons causing some confusion after installing new-york style, and hard to setup because it requires a few deps and configuration on vite.config. Thus changing the icons into newly published https://www.npmjs.com/package/radix-icons would solved that issue

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Improve the `Installation` section for each components

Describe the feature

Currently in https://www.shadcn-vue.com/docs/components/avatar.html#installation only shows the CLI installation, however some components has more steps to that. eg Accordion.

Let's update all the Installation section for components 😁

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: DropdownMenuPortal doesnt include in Dropdown Component

Environment

Developement/Production OS: Windows 11
Node version: 18.12.1
Package manager: [email protected]
Radix Vue version: 0.4.1
Shadcn Vue version: 0.3.0
Nuxt version: 3.7.4
CSS framework: [email protected]
Client OS: Windows 11
Browser: Chrome 117.0.5938.149

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/dropdown-menu.html

Steps to reproduce

installation using 'npx shadcn-vue@latest add dropdown-menu'

Describe the bug

Hello, I'm using Dropdown Menu component.
I was trying to make sub menu content in Dropdown Menu. I was following exactly like the Shadcn-vue Docs. But something is missing. There is no DropdownMenuPortal in installation.

in Documentation Shadcn:

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[Bug]: Fix install components

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/input.html

Steps to reproduce

when i try to install https://www.shadcn-vue.com/docs/components/input.html

Describe the bug

when i am try to install button, input any other any other components it got this error

"npx shadcn-vue@latest add input
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
node:internal/modules/cjs/loader:1048
const err = new Error(message);
^

Error: Cannot find module 'detype'
Require stack:

• C:\Users\91983\AppData\Local\npm-cache_npx\360157ef5dc9b5fb\node_modules\shadcn-vue\dist\index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
  at Module._load (node:internal/modules/cjs/loader:901:27)
  at Module.require (node:internal/modules/cjs/loader:1115:19)
  at require (node:internal/modules/helpers:130:18)
  at file:///C:/Users/91983/AppData/Local/npm-cache/_npx/360157ef5dc9b5fb/node_modules/shadcn-vue/dist/index.js:121:21
  at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:308:24)
  at async loadESM (node:internal/process/esm_loader:42:7)
  at async handleMainPromise (node:internal/modules/run_main:66:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\Users\91983\AppData\Local\npm-cache\_npx\360157ef5dc9b5fb\node_modules\shadcn-vue\dist\index.js'
  ]
  }

Node.js v20.6.1"

Expected behavior

how to solve this issue ?

Conext & Screenshots (if applicable)

[Bug]: Incorrect Installs, mismatch in component content

Environment

"radix-vue": "^0.2.3",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
"@nuxtjs/tailwindcss": "^6.8.0",

linux.

Link to minimal reproduction

https://github.com/radix-vue/

Steps to reproduce

follow docs's install for a button and add it via the cli.

Describe the bug

followed the docs.

1. when installing a button there is a difference between the copy code from site and the button via the add cli.
2. when you add the code via cli its adds on my linux extra quotes which makes the component unusable until manually corrected.

"'Button'" instead of "Button"

Expected behavior

1. valid code. that compiles.
2. to match the content that is manually. (looking at the classes i saw different sets)

Conext & Screenshots (if applicable)

No response

[Feature]: CLI commands

Describe the feature

In order for user to easily import the components, we should set up the CLI similar to https://ui.shadcn.com/docs/cli

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: Typo in tailwind classes

https://github.com/radix-vue/shadcn-vue/blob/223583b2171a898d9b875a53167f295d7f59062b/apps/www/src/lib/registry/default/ui/avatar/index.ts#L8C1-L8C1

text-foregorund should be text-foreground

[Feature]: Theming

Describe the feature

Add https://ui.shadcn.com/themes .

Since we are using vitepress, you need to

1. Create Theming.vue component
2. Add themes.md to src/content
3. Import the Theming component into the markdown to render it on /themes

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Improve Installation section to accommodate other frameworks

Describe the feature

Add installation section for frameworks

https://ui.shadcn.com/docs/installation

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: update Dialog to make it scrollable vertically if the content is larger

Describe the feature

Make the content scrollable, using https://www.radix-vue.com/components/dialog.html

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogOverlay,
  DialogPortal,
} from "radix-vue";
import { X } from "lucide-vue-next";
import { cn, useEmitAsProps } from "../frameworkUtils";

const props = defineProps<DialogContentProps & { class?: string }>();
const emits = defineEmits<DialogContentEmits>();

const emitsAsProps = useEmitAsProps(emits);
</script>

<template>
  <DialogPortal>
    <DialogOverlay
      class="fixed inset-0 grid place-items-center z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 overflow-y-auto"
    >
      <DialogContent
        :class="
          cn(
            'z-50 grid place-items-center w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
            props.class
          )
        "
        v-bind="{ ...props, ...emitsAsProps }"
      >
        <slot />

        <DialogClose
          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
        >
          <X class="w-4 h-4" />
          <span class="sr-only">Close</span>
        </DialogClose>
      </DialogContent>
    </DialogOverlay>
  </DialogPortal>
</template>

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: Dropdown and Select goes out of screen if too many options

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

Add too many options, the view goes off screen

Instead we can add those classes to DropdownContent or SelectContent

overflow-y-auto max-h-screen```

to limit to max of the screen and make it scrollable

### Describe the bug

Goes out of the screen, cannot select

### Expected behavior

Scroll view, limit to max-h-screen

### Conext & Screenshots (if applicable)

_No response_

[Bug]: [vite-node] [plugin:vite:vue] [VITE_ERROR] /components/ui/avatar/AvatarImage.vue

Environment

Developement/Production OS: MacOs
Node version: v18.16.1
Package manager: [email protected]
Radix Vue version: 0.1.32
Vue version: 3.0.0
Nuxt version: 3.7.1
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-wbuhpq?file=app.vue

Steps to reproduce

1. Installing a new component using the shadcn-vue CLI: npx shadcn-vue@latest add button

2. After the button has been successfully installed, it maps to the wrong path: @/lib/registry/default/ui/avatar and then I correct it to: @/components/ui/avatar

3. I go ahead and use it in my app.vue file as shown below :

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>

4. When I start my dev server by running pnpm dev it throws this error:

[08:07:23] WARN [nuxt] Two component files resolving to the same name UiAvatar:

• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/index.ts
• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/Avatar.vue

7. When I navigate to localhost:3000, I get the following error:

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/ui/avatar/AvatarImage.vue

<script setup lang="ts"> import { AvatarImage, type AvatarImageProps } from 'radix-vue' const props = defineProps() </script>

at /components/ui/avatar/AvatarImage.vue

Describe the bug

Whenever I add a new component using the shadcn-vue CLI and start up my server, I get the following errors:

[08:07:23] WARN [nuxt] Two component files resolving to the same name UiAvatar:

• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/index.ts
• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/Avatar.vue

When I navigate to localhost:3000, the whole application has crashed and I get this error:

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/ui/avatar/AvatarImage.vue

<script setup lang="ts"> import { AvatarImage, type AvatarImageProps } from 'radix-vue' const props = defineProps() </script>

at /components/ui/avatar/AvatarImage.vue

Expected behavior

I should see the output of whichever component I copied. For example, if I copied the Avatar component, I should see the avatar UI component rendered in the browser.

Conext & Screenshots (if applicable)

[08:07:23] WARN [nuxt] Two component files resolving to the same name UiAvatar:

• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/index.ts
• /home/projects/nuxt-starter-4b4eme/components/ui/avatar/Avatar.vue

[Bug]: CLI adds a double set of quotes when you add components without using css vars.

Environment

Developement/Production OS: Mac OS 13.6
Node version: 18.18.0
Package manager: [email protected]
Radix Vue version: 0.4.1
Shadcn Vue version: 0.3.2
Nuxt version: 3.7.4
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]

Link to minimal reproduction

The CLI wont install on code sandbox

Steps to reproduce

Add shadcn-vue to Nuxt 3 via CLI without using css variables for styling.

Describe the bug

When I add shadcn-vue to a Nuxt 3 project without using the css variables for styling it double quotes all of the imports.
it does a double quote " followed by a single quote ' the imports are not recoginized by the editor or nuxt. It also ignores whatever is in the components json file for the import alias

import { SelectItemText, type SelectItemTextProps } from "'radix-vue'"
import { ChevronDownIcon } from "'@radix-icons/vue'"

Here is what it does with component creation

<script setup lang="ts"> import { cn } from "'@/lib/utils'" const props = defineProps({ class: { type: String, default: "''", }, }) </script>

Expected behavior

To follow the components.json config and to not double quote where it should have a single quote.

Conext & Screenshots (if applicable)

Here is the config setup

[Bug]: Laravel + Inertia + JetStream install into existing project.

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: /
Package manager: [email protected]
Radix Vue version: 0.2.3
Shadcn Vue version: latest?
Vue version: 3.2.41
Nuxt version: /
Nuxt mode: /
Nuxt target: /
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212
Laravel version: 9.52
Inertia Version: ^1.0.0

Link to minimal reproduction

/

Steps to reproduce

Install Shadcn Vue into laravel project without typescript/breeze install, and therefore without tsconfig.json or jsconfig.json

Describe the bug

/Users/devinfritz/Documents/Dev/PHP/studio/resources/js/components/ui/switch/Switch.vue
8 | import { cn } from '@/lib/utils'
9 |
10 | const props = defineProps<SwitchRootProps & { class?: string }>()
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 |
12 | const emits = defineEmits()
at error (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3601:15)
at processDefineProps (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3658:17)
at Object.compileScript (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:4218:43)
at resolveScript (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/@vitejs/plugin-vue/dist/index.cjs:272:31)
at genScriptCode (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/@vitejs/plugin-vue/dist/index.cjs:2403:18)
at transformMain (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/@vitejs/plugin-vue/dist/index.cjs:2219:54)
at Object.transform (/Users/devinfritz/Documents/Dev/PHP/studio/node_modules/@vitejs/plugin-vue/dist/index.cjs:2702:16)
at file:///Users/devinfritz/Documents/Dev/PHP/studio/node_modules/rollup/dist/es/shared/node-entry.js:25419:40

Expected behavior

Working

Conext & Screenshots (if applicable)

No response

[Feature]: providing changelog

Describe the feature

I think providing a changelog gives a better idea of the differences between versions

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

I know it's crazy, maybe `UnoCSS` support?

🙈🤪

[Feature]: Toast component

Describe the feature

Migrating the toast component from the shadcn/ui library would be super nice.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Data Table

Describe the feature

https://ui.shadcn.com/docs/components/data-table

This feature requires the Vue adapter of TanStack Table.
https://tanstack.com/table/v8/docs/adapters/vue-table

Here is a quick demo using both Radix Vue and TanStackTable.
https://stackblitz.com/github/santuan/stnui-vue-radix-and-table/tree/main?file=README.md

Last but not least, DataTable.vue is <script setup lang="tsx">
That's the way that I find to pass a component inside the Header and Cell (for the Checkbox and Popover).

(I couldn't make the Radix Select component work for "rows per page" but that's it's because I'm not really good at connecting those parts.)

Hope that this is useful in some way.
Love the work you're doing :)

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: DropDown / Select goes outside the view

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

When the list is too long, the list goes outside the view, and it's not possible to scroll

Describe the bug

Expected behavior

The view should stop at the border of the screen (either top, if the items are shown above the Dropdown / Select, or bottom if shown below) and it should be scrollable

Conext & Screenshots (if applicable)

No response

[Feature]: Select

Describe the feature

Will try out TSX approach

https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/select.tsx

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: Many Components error "Cannot read properties of undefined (reading 'sys')" in Nuxt 3 application

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 20.3.0
Package manager: [email protected]
Radix Vue version: 0.2.3
Shadcn Vue version: npx shadcn-vue@latest
Vue version: 3.3.4
Nuxt version: 3.7.3
Nuxt mode: universal
Nuxt target: server
CSS framework: "@nuxtjs/tailwindcss": "^6.8.0" (tailwind 3.3.3)
Client OS: Windows 11 22621.2283

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-u1vgd1?file=app.vue

Steps to reproduce

Install fresh Nuxt application
npx nuxi@latest init my-app

Install tailwind
npm install -D @nuxtjs/tailwindcss

Run the CLI with default Nuxt settings
npx shadcn-vue@latest init

✔ Would you like to use TypeScript (recommended)? … yes
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Zinc
✔ Where is your Tailwind CSS file? … assets/css/tailwind.css
✔ Would you like to use CSS variables for colors? … 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
✔ Write configuration to components.json. Proceed? … yes

Install a component
npx shadcn-vue@latest add dialog

use sample code from page (inside app.vue)

<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
</script>
<template>
  <Dialog>
    <DialogTrigger>
      Edit Profile
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when youre done.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        Save changes
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Error appears
Cannot read properties of undefined (reading 'sys')

Describe the bug

Bug occurs on fresh install of Nuxt 3 in a Windows environment.
It effects multiple other components. including at least Dialog, Calendar, Hover Card, Progress, Sheet and Navigation Menu.
Some do work, such as button and alert

During some attempts at debugging, it may be related to defineProps found in most components which uses Typescript interface.

I discovered this project via this video:
https://www.youtube.com/watch?v=vs-vfc9nt0k
Which user @onelvisdelarosa4116 commented regarding the same issue. The video creator commented and confirmed they also are experiencing this bug

Expected behavior

Expect the component to load on page with no errors on page or terminals

Conext & Screenshots (if applicable)

On page error

IDE terminal / server

Browser terminal

Then how do I use `shacn-vue` in Nuxt3?

Then how do I use shacn-vue in Nuxt3?

Originally posted by @evanlong0926 in #10 (comment)

[Feature]: Form example

Describe the feature

Let's populate this page https://www.shadcn-vue.com/examples/forms.html with example 😁

reference:
https://github.com/shadcn-ui/ui/tree/main/apps/www/app/examples/forms

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Need Chart

Describe the feature

Need chart like shadcn react in theme page

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Dialog, AlertDialog

Describe the feature

https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/dialog.tsx

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: Dark mode not working

Environment

Development OS: Windows 10 
Node version: v16.19.0
Package manager: [email protected]
Shadcn Vue version:[email protected]
Vue version: ^3.3.4

Link to minimal reproduction

none

Steps to reproduce

<template>
  dark
  <DashBoard/>
</template>

Describe the bug

Hi, I noticed a strange behavior.

In my index.html, I manually added the class dark. Then, I ran npm run dev, expecting it to enable dark mode. However, the background remained white, indicating that dark mode was not working.

<!DOCTYPE html>
<html lang="en" class="dark">

To resolve this, I added the text 'dark' after an HMR (Hot Module Replacement) update. After this change, dark mode started working, and the background turned dark. I'm not sure what went wrong, but it seems I had to add the 'dark' text to my template.

App.vue

<template>
  dark
  <DashBoard/>
</template>

Expected behavior

The dark mode should work if I add a dark class to the HTML tag

Conext & Screenshots (if applicable)

No response

[Feature]: Add contribution guide

Describe the feature

A contribution guide similar to the one in shadcn-ui would be helpful.
https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Popover

Describe the feature

POC for components with emits

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Combobox as a component

Describe the feature

I tried to use your Combobox code on the site to create it as a generic component, if you think it's interesting we could add it

<!-- 

Example usage

onst myValue = ref("a");
const myOptions = [
{ id: "a", title: "My a element" },
{ id: "b", title: "An element b" },
];
watch(
() => [myValue.value],
() => {
console.log(myValue.value);
}
);

 -->
<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { Check, ChevronsUpDown } from "lucide-vue-next";

import { ref, watchEffect } from "vue";
import {
  cn,
  Button,
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "../index";

interface Option {
  id: string;
  title: string;
}

const props = defineProps<{
  options: Option[];
  modelValue?: string;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", payload: string | number): void;
}>();

// We use an internalModelValue because the Command widget returns the whole `{id: string, title: string}` as value, and we wanted the outer component v-model to only contain the id, for practicality
const internalModelValue = ref<Option | null>(null);

const open = ref(false);

const findItem = (id: string) => props.options.find((t) => t.id === id);

const filterFunction = (list: string[], query: string) => {
  return list.filter((i) =>
    i.title.toLowerCase().includes(query.toLowerCase())
  );
};

watchEffect(() => {
  internalModelValue.value = findItem(props.modelValue);
});
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        variant="outline"
        role="combobox"
        :aria-expanded="open"
        class="w-[200px] justify-between"
      >
        {{ modelValue ? findItem(modelValue)?.title : "Select..." }}
        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-[200px] p-0">
      <Command v-model="internalModelValue" :filter-function="filterFunction">
        <CommandInput placeholder="Search..." />
        <CommandEmpty>No item found.</CommandEmpty>
        <CommandGroup>
          <CommandItem
            v-for="option in options"
            :key="option.id"
            :value="option"
            @select="
              ($event) => {
                open = false;
                emits('update:modelValue', option.id);
              }
            "
          >
            <Check
              :class="
                cn(
                  'mr-2 h-4 w-4',
                  modelValue === option.id ? 'opacity-100' : 'opacity-0'
                )
              "
            />
            {{ option.title }}
          </CommandItem>
        </CommandGroup>
      </Command>
    </PopoverContent>
  </Popover>
</template>

(I kept the API such that the "outer v-model" contains only the id, and not the whole element {id: ..., title: ...} so it acts a bit like select / dropdown etc

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Stepper Component

Describe the feature

This is an amazing project and tackles precisely a part that seems to be missing with Vue.

I'd like to put a request for a Stepper component inspired by this one: https://mui.com/material-ui/react-stepper/#alternative-label

Hope some day someone can pick this up!

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Does it now support Nuxt3?

Describe the feature

Nuxt3 module is provided.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: New York demo

Describe the feature

User should have the ability to switch style when previewing component, and we would need to have examples for new-york.

Let's populate the registry/new-york/example folder with demo please 😁

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Form Component

Describe the feature

Add the Form component like shadcn/ui

Link : https://ui.shadcn.com/docs/components/form

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: Component and utils alias does not update imports in file - CLI

Describe the feature

Nuxt has a handy utils folder in which things will be auto imported.
When running npx shadcn-vue@latest init and giving the alias ~/utils/index the location in which the file will be generated is correct but the imports in the files still include lib in the location.
And such the import can not be found.

Edit: same goes for other imported things like buttonVariants which will be imported from '@/lib/registry/default/ui instead of the given alias

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Inertia Support

Describe the feature

Is there any plans on the roadmap to support Laravel/Inertia + VueJS? I've seen lots of people waiting for this, and I'm sure support would massively push adoption 👍🏻

Currently there's lots of TS errors unfortunately 👎🏻

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: New York style components

Describe the feature

Currently we have only the default style for components. Shadcn UI also provides "New York" style.
Let's add them into apps/www/src/lib/registry/new-york/ui/...

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Feature]: Add CodeSandbox for easy reproduction

Describe the feature

Let's implement the same Codesandbox feature like Radix Vue in ComponentPreview.vue.

Reference for the code:
https://github.com/radix-vue/radix-vue/blob/a066730bf659d3a871fb50eb213e71d43ffb9c0b/docs/codeeditor/index.ts

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: project created via `pnpm` installs components on project root folder

Environment

Development/Production OS: WSL on Windows 11 Pro Version `10.0.22621 Build 22621`
Node version: `20.5.1`
Package manager: `[email protected]`
Shadcn Vue version: `@latest`
Vue version: `3.3.4`
CSS framework: `[email protected]`
Client OS: Windows 11 Pro Version `10.0.22621 Build 22621`
Browser: Firefox `117.0.1`

Link to minimal reproduction

n/a

Steps to reproduce

Attempting to create a new project via pnpm to create my-vue-app project as a Typescript/Vue project:

me@pc:~$ pnpm create vite
✔ Project name: … my-vue-app
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /home/b0nyb0y/dev/projects/my-vue-app...

Done. Now run:

  cd my-vue-app
  pnpm install
  pnpm run dev

Then, after editing tsconfig.json, and vite.config.ts (as shown in attached screenshot):

me@pc:~$ cd my-vue-app
me@pc:~$ pnpm add -D -E tailwindcss postcss autoprefixer @types/node
me@pc:~$ pnpm dlx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Then I initialized shadcn-vue and add a <Button>...

me@pc:~$ pnpm dlx shadcn-vue@latest init
✔ Would you like to use TypeScript (recommended)? … yes
✔ Which framework are you using? › Vite
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your Tailwind CSS file? … src/assets/index.css
✔ Would you like 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
✔ Write configuration to components.json. Proceed? … yes

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed.

me@pc:~$ pnpm dlx shadcn-vue@latest add button
✔ Ready to install components and dependencies. Proceed? … yes
✔ Done.

Describe the bug

The last two steps where I initialized shadcn-vue and add <Button> component, a folder @ is added to the root of the project. When the last command is executed, all the code for <Button> is also put in this @ folder.

From the way tsconfig.json and vite.config.ts are configured, I expect all the code in this @ folder to be in ./src/components (or ./src/lib) so that Typescript can find and transpile the code.

While running pnpm run dev, when <Button> is used in App.vue, the page failed to load. Only when I copied all files from ./@ folder to ./src folder that the page loads correctly again.

Expected behavior

Expecting the commands provided in documentation to work without having to manually copying folders around.

Conext & Screenshots (if applicable)

[Question] Is all this compatible with Astro + Vue?

Hey i'm using astro.build right now and i was wondering if this is compatible, do i just have to install like it's nuxt? ty :)

[Feature]: datepicker

Describe the feature

Im really curious to see which date picker component will be used for this library.
Shadcn for react is using this one: https://react-day-picker.js.org/

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Bug]: textarea widget doesn't support :v-model binding like classical vue

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

This is how to fix it

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { cn } from "../frameworkUtils";

const props = defineProps(["modelValue"]);
const emits = defineEmits(["update:modelValue"]);

const onInput = (event: Event) => {
  const value = (event.target as HTMLTextAreaElement).value;
  emits("update:modelValue", value);
};
</script>

<template>
  <textarea
    :value="props.modelValue"
    @input="onInput"
    :class="
      cn(
        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        $attrs.class ?? ''
      )
    "
  ></textarea>
</template>

Describe the bug

Otherwise doing a <Textarea v-model="someRef" /> will not work

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[Bug]: animations not working

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

I installed the library as suggested in the documentation, but when using the component, there is no animation.

Is there something missing in the doc to setup animations with tailwindcss?

Describe the bug

No animations

Expected behavior

Animations

Conext & Screenshots (if applicable)

No response

[Chore]: Update charts using `@unovis/vue`

Describe the feature

I've submitted the PR for Unovis + Vue 3 integration!
So we can update the charts and use the component approach to construct the chart!!!!

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

f5/unovis#152
f5/unovis#272

[Feature]: Command

Describe the feature

https://ui.shadcn.com/docs/components/command

Realized it requires cmdk component.
We could use https://github.com/xiaoluoboding/vue-command-palette

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.