[Feature]: Shadcn/vue extended

[zernonia]

Describe the feature

Shadcn/UI has a great community extension, listed on Awesome Shadcn UI. Inspired by this, we want to provide the same opportunities for the Vue community by introducing the shadcn-vue-extended repository.

With this initiative, you can:

• Suggest custom components and contribute via PRs
• Easily deploy the component registry and documentation
• Gain more visibility for your components
• Give back to the community

We will be moving the following components to the extended repository (and their relevant tickets):

1. AutoForm
2. Chart

We’d love to hear your thoughts! 😁

Additional information

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

[productdevbook]

I like this idea

[adiramardiani]

Double sidebar

Hi @zernonia

Sorry before, because skill issue I can't contribute on PR, but just the idea, currently I am focusing on ease of navigation for the user, where he can move to pages he has previously opened or in the same context quickly. Let me convey my problem, currently I am making a system with a lot of menus, and this is not enough with one menu, but requires me to create a double sidebar / nested sidebar.

The good news latest version of vben is already using shadcn-vue and monorepo, I hope someone can create simple version from scratch or porting the sidebar component to more modular copy paste component (maybe with author permission)

https://github.com/user-attachments/assets/2a745769-eafd-4673-bb69-2c66202eb3f3

In this video functionally it meets my needs, the component based is using shadcn-vue (with new version of vben, but on this video is old version), but it's nice if shadcn-vue have new sidebar component like this functionality, and added to block.

My Feature Request :

• Collapsable Menu : I don't know whether it can be done from shadcn or not, or maybe it exists but it's not documented. but it would be nice to be given the option to be able to close other menus, if we click on one menu group on another, so that if we have a lot of sub groups, it won't open all of them when there is a user who only intends to explore the menu because he doesn't know which menu he wants. where to go. maybe like accordion, I hope you understand what I mean hahaha
• Multilevel Submenu : on complex system my add more than one level, minimum 4 level sub menu, and I hope this integrated with collapsable menu with smooth animation

[adiramardiani]

Tabbed Navigation

Hi @zernonia

Sorry before, because skill issue I can't contribute on PR, but just the idea, currently I am focusing on ease of navigation for the user, where he can move to pages he has previously opened or in the same context quickly.

The good news latest version of vben is already using shadcn-vue and monorepo, I hope someone can create simple version from scratch or porting the sidebar component to more modular copy paste component (maybe with author permission)

https://github.com/user-attachments/assets/8d501e58-78d1-40cf-ba8f-2bcf2e950f03

https://github.com/user-attachments/assets/2a745769-eafd-4673-bb69-2c66202eb3f3

In this video functionally it meets my needs, the component based is using shadcn-vue (with new version of vben, but on this video is old version), but it's nice if shadcn-vue have new sidebar component like this functionality, and added to block.

My Feature Request :

• Tabbed navigation : out of context, but I hope this will added on block (you can ignored)
  • The tab mechanism for previously opened pages allows users to move very quickly, so so good idea
  • I try make MANY tab, and still organized using scroll and next/prev button
  • a right-click feature to bring up options from a tab would also be very helpful

[adiramardiani]

Timeline

Hi @zernonia

Sorry before, because skill issue I can't contribute on PR, but just the idea, I think origin-ui have some good extended version of shadcn-ui (react)

https://originui.com/timeline

[zernonia]

Thanks @adiramardiani for the component suggestions. However in order to not flood this PR with requests, I've hidden them as off-topic (we can create the tickets in the new repo). Let's have this ticket focusing on thoughts and idea 💡

[ThimoDEV]

It would be really good to have it all in one repo, so the users can quickly grab what they see. Also I think it would be a good idea to have a link on the shadcn-vue site with a see more button or directly show the components on shadcn vue somehow

Slichtly off topic: To make it easier as an UI ecosystem it could be a good idea to have a reference on each site to alll the other options, so Reka UI, Inspira UI, Shadcn Vue having links to each other and to the shadcn extended

[zernonia]

@ThimoDEV we wanted to keep the shadcn/vue as close to main shadcn as possible. This allow for quick follow up to latest changes.

The idea of extended repo is to allow community to be creative, and take credit and ownership for the components they created. This would also improve the time to review PR.

[maelp]

will there be also a notion of registry like shadcn to make it easy to distribute / package / update components?

[mathieumagalhaes]

@maelp: will there be also a notion of registry like shadcn to make it easy to distribute / package / update components?

I think there is already a way through a repository schema, see Inspira Component Schema Example. Not sure where this is documented on the shadcn-vue website.

I think the original shadcn/ui docs around a repository should still be ported into shadcn-vue website. See: https://ui.shadcn.com/docs/registry

A list of missing features for feature parity compared to shadcn/ui would also benefit this project in my opinion, but that might be off topic. I've requested this in https://github.com/unovue/shadcn-vue/issues/1105

[mathieumagalhaes]

@adiramardiani I think origin-ui have some good extended version of shadcn-ui (react) https://originui.com/timeline

These are other libraries to keep an eye on, for inspiration of future Shadcn/Vue blocks:

• https://nsui.irung.me (open source)
• https://ui.stackzero.co (open source)
• https://shadcn-ui-blocks.vercel.app (open source)
• https://www.simple-ai.dev/blocks (open source)
• https://www.stunningui.design/blocks (open source)

Note that we already have a popular project extending shadcn-vue :

• https://inspira-ui.com

---

@ThimoDEV: It would be really good to have it all in one repo @zernonia: The idea of extended repo is to allow community to be creative, and take credit and ownership for the components they created

If I understand correctly, a shadcn-vue-extended would be maintained by the same maintainers of shadcn-vue, which is great.

I do believe that having an Awesome list, Awesome Shadcn Vue, is still also needed.

Examples for shadcn/ui:

• See: https://github.com/bytefer/awesome-shadcn-ui
• See: https://github.com/birobirobiro/awesome-shadcn-ui

Other developers' projects are showcased, which is a great way to build a healthy ecosystem of blocks, components, and extensions— while also making others aware of their existence through an official Awesome list.

[Saeid-Za]

this approach would be beneficial, as it would prevent shadcn-vue from being blocked by extra or custom components. It could also accelerate the development of core mainstream components.

However, one potential challenge is how maintainers would manage the extra-shadcn-vue repository.

I propose adopting a maintenance strategy similar to that of UnJS repositories. Each repository would be maintained by its original creator, but all would be guided by upstream maintainers.

This approach seems ideal, but I'm unsure if it's practical for maintaining smaller components compared to fully isolated JavaScript packages.

How UnJS packages are maintained.

[ijpatricio]

Hey hello,

Is this on the direction for a central point where we can get/publish components?

I think that is missing, and I am willing on collaborating on a solution.

I've read Registries have to be started by a user, and that's fantastic to be there.

BUT - without a low friction way, I don't believe it will be as spread.

Any thoughts?

[haayhappen]

Let's get some momentum back here. What's still needed to discuss or start with this project? @zernonia

[StefanVDWeide]

@zernonia happy to help with setting this up or testing if needed. Having the charts up to date and available again would be great!

[zaralX]

Hi all, I was writing a site with shadcn-vue and ended up not being able to use any chart component, and now here I am. Can you tell me what your progress is, how I can help you and when will the update be ready approximately?

P.S. I have not read all the posts in this issue

[hendrasan]

I recently ran into this issue too, and I think the docs isn't explaining it well because I thought that it would be moved to the extended repo later when the extended repo actually exists, but now it just fails.

After searching for a solution, I come up with this temporary one for now:

1. Install npm i @unovis/ts @unovis/vue
2. Don't forget to copy paste the CSS variables from here https://shadcn-vue.com/docs/charts.html
3. Go to old (v3) source code https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/registry/default/ui/chart-bar and manually copy-paste to your app
4. Don't forget other dependencies as well, I think it requires files from chart, card and button (if you haven't installed them)
5. Fix the import location because it was searching for @/registry/default/ui/chart while it should be importing from your local file
6. (optional) Restart TypeScript server in VS Code (Cmd+Shift+P then search for "TypeScript: Restart TS Server"), I get this type error issue in the BarChart component when i do the previous steps

From what I read, it should work just fine, and when the extended repo is ready, we should be able to replace it easily

[ColinMalecha]

@hendrasan Can confirm this works without trouble, thank you!

[2-fly-4-ai]

Hey guys try out https://blocks.serp.co/ I just added support for shadcn-vue. It's still highly experimental, but it would be great to get some testers.

[unrevised6419]

@hendrasan also I would suggest to run once the tailwind upgrade tool. This will make sure you are using the right v4 classes

npx @tailwindcss/upgrade

https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

[larsbeckdev]

yes it works - but cant see the axis components. Is there anything else I need to consider for the axis x/y?

I recently ran into this issue too, and I think the docs isn't explaining it well because I thought that it would be moved to the extended repo later when the extended repo actually exists, but now it just fails.

After searching for a solution, I come up with this temporary one for now:

1. Install `npm i @unovis/ts @unovis/vue`

2. Don't forget to copy paste the CSS variables from here https://shadcn-vue.com/docs/charts.html

3. Go to old (v3) source code https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/registry/default/ui/chart-bar and manually copy-paste to your app

4. Don't forget other dependencies as well, I think it requires files from chart, card and button (if you haven't installed them)

5. Fix the import location because it was searching for `@/registry/default/ui/chart` while it should be importing from your local file

6. (optional) Restart TypeScript server in VS Code (Cmd+Shift+P then search for "TypeScript: Restart TS Server"), I get this type error issue in the BarChart component when i do the previous steps

From what I read, it should work just fine, and when the extended repo is ready, we should be able to replace it easily

[orenmizr]

you should put the chart issues in a separate issue - to help the next developer who tries to use shadcn-vue charts.

[methbkts]

you should put the chart issues in a separate issue - to help the next developer who tries to use shadcn-vue charts.

This or in discussions

[orenmizr]

these are new shadcn react components. kibo ui. it can be great reference for a vue project that relies on shadcn. you'll need to convert them yourselves but at least you'll know how they suppose to behave and look.

[mathieumagalhaes]

Back on topic:

If we’re adding components not included in the original shadcn project, then placing them in a shadcn-vue-extended repository makes sense.

However, chart components (https://github.com/unovue/shadcn-vue/issues/1076#issuecomment-2768513089) shouldn’t be treated as separate, since they’re now part of the registry in the original shadcn project.

I’m advocating for keeping this repository as close to feature parity with the original shadcn as possible.

[otabekoff]

Where is that shadcn-vue-extended repository? Where we can find AutoForm and Chart components now?

[sneakylenny]

Re: @otabekoff

Where is that shadcn-vue-extended repository?

Over here:

https://github.com/unovue/shadcn-vue-extended

But it's still a wip.

---

Where we can find AutoForm and Chart components now?

The AutoForm component is here:

https://github.com/unovue/shadcn-vue-extended/blob/db64bb8ec683c3844e13c5b320a0cc5bfcba61de/registry/ui/auto-form/AutoForm.vue

The Chart component is not present yet due to it being a wip