Migrate to reka-ui

[laserhybiz]

The latest version of shadcn-vue now uses reka-ui instead of radix-vue (see changelog).

Most of this PR is only updates to the imports. Additionally, I included some of the recent style updates.

[tnylea]

Thanks @laserhybiz,

Can you share with me where it states that the new ShadCNVue is using RekaUI as opposed to radix-vue. Give me a link where I can read up more about it.

Do you know if this is going to be Tailwind V4 compatible as well?

[laserhybiz]

@tnylea

https://www.shadcn-vue.com/docs/changelog.html

I also tested out a new shadcn-vue project and I got reka-ui by default

[laserhybiz]

I think reka is just version 2 of radix

as for tailwind, I don't think it supports v4 yet

[balu-lt]

I was about to create this PR.

The Radix Vue v2.x release has been rebranded as Reka UI.
Additionally, Shadcn Vue v1.x now uses Reka UI.

Migration Guide: Radix Vue to Reka UI

[tnylea]

Thanks guys!

@laserhybiz would you mind resolving the conflicts. We are going to test this out and discuss this a little more. Do you happen to know if Reka-ui and the new version of ShadCN vue have been updated to support Tailwind V4?

Let us know. Appreciate it 😊

[ace-of-aces]

@tnylea ShadCN-Vue has not been updated to Tailwind V4 yet, but they seem to be working on it. Progress can be tracked on unovue/shadcn-vue#1076

[laserhybiz]

@tnylea conflicts resolved

[tnylea]

Great! Thanks @laserhybiz. Will be discussing with Taylor this week. Because this is such a big PR we'll have to do some thorough testing. I'm wondering if it would be worth it to hold off until we have a Tailwind V4 compatible version. This way we can update ShadCN Vue to use Reka vs Radix and have TW4 at the same time. What are your thoughts on that?

We'll be discussing the PR this week 👍

[laserhybiz]

@tnylea I don't think this as such a big PR since most of it is only changes to the imports.
Regarding TW4, I don't see how these are related.

[tnylea]

@laserhybiz I'll be doing some thorough testing in the UI to make sure this doesn't cause any elements to be mis-aligned or positioned incorrectly.

Have you made sure to go through all the screens and verified that everything looks as expected. The tests are passing which is good, but the tests will not pickup any UI inconsistencies. Let me know.

I'll also be going through this starter kit and verify everything looks as expected, then the team and I will discuss before merging in.

Thanks.

[larson-carter]

I've tested this a few times to ensure everything stays consistent.

One thing worth adding, (not for this pr but as a project kit), would be a view showing all the components to easily debug and test.

As for me this PR seems good to go and I don't think v4 should be a worry as of now.

[francoism90]

If I start using this starter to built my frontend, does this mean I'll have to change everything again later after this PR?

[Plytas]

@francoism90 I think you misunderstand the idea of a starter kit. The idea is that you use it to start your app, you do not keep your app updated with the starter kit. Once you use the starter kit, you're free to do whatever you want with the code it provided.

[francoism90]

@Plytas I understand, but unfortunately this starter is already out-of-dated. That's my point.

[larson-carter]

@francoism90 Well once this is merged you could just update? If that is what you are asking?

[francoism90]

@larson-carter Yes, because the starter-kits are basically a git clone. I do understand you'll have to sync this manually, but it feels like a breaking change.

I'm just worried about that, so maybe it's not the case.

Like when I create a Button.vue, is that completely different after this PR?
I'm worried I need to make a lot of changes. Perfectly understable, not complaining, just asking.

Edit: it seems to be a lot of import changes, which isn't a big issue. Also a lot of other improvements, but so far everything seems to be easy to sync afterwards? :)

[Plytas]

@francoism90 starter kit is the same as just cloning this repo. Your application will look exactly as it looks when you visit https://github.com/laravel/vue-starter-kit. It has a Button.vue component and once you use this starter kit it means that this is now your Button.vue component, it lives inside your application (not somewhere in vendor) and you're free to modify it as you will.

Once this PR is merged, the Button.vue component might look differently in this repo, but it will not affect your application in any way. This is not some tool that you use to create components, it simply gives you a starting point with pre-made components.

Now if for some reason you want your application to be "synced" with this repo (not recommended), you would have to apply the changes manually, by going through PRs, looking at changes and implementing them in your own application.

There's also an option of waiting until this PR is merged and only then starting a new project.

[francoism90]

@Plytas I do understand the starter-kits, and I do know it doesn't affect the current application. I'm also building a new Laravel-app, that's why I'm looking at the starter-kit.

I was just asking if it would be a lot of changes, because it seems you'll have to upgrade when you want to use the latest version, which I would like since I'm starting from zero:

With the released of Reka UI v2, shadcn-vue@latest command will now install Reka UI. If you want to keep using Radix Vue, please visit here and run shadcn-vue@radix command instead.

I do take a look at the starter-kit commits once in a while (did the same with Jetstream), as it offers changes and improvements you might have missed in your own application.

[Plytas]

I was just asking if it would be a lot of changes

I guess this depends on the PR. In this case you can see all the changes so it's up to you to evaluate and determine if this is "a lot" or not.

Personally I have ideas for new projects, but I'm not in a rush to start them. Also, I would like to use the "new and shiny" things and don't want to go through a process of updating everything myself, so I'm simply waiting until those changes are merged to start a new project.

[tnylea]

Ok, this looks good to me. I've tested the UI thoroughly, and everything works as it did before.

@joetannenbaum and @taylorotwell, this PR looks enormous; however, all the files except for two are inside the resources/js/components folder. Which are files that we are technically not touching. These files have been updated because the VueShadCN UI is no longer using the VueRadix library and instead using the RekaUI lib. You can learn more about this from their changelog here: https://www.shadcn-vue.com/docs/changelog

If either of you were not aware, the ShadCN UI library originally utilized RadixUI under the hood. When VueShadCN UI was ported, it was built on top of a Vue RadixUI fork since the original RadixUI is React-based. Moving forward, the maintainers have decided to base VueShadCN on RekaUI instead.

Adopting this update makes sense to ensure this Starter Kit remains up to date and aligned with the UI library’s ongoing development. Let me know your thoughts. Everything looks good to me.

Thanks again, @laserhybiz, for the contribution.

[tombanksme]

Just to add to this it's extremely important that this pull request gets merged quickly. I've been using the starter kit and as I've added more shadcn-vue components some were using radix-vue, others were using reka-ui.

These libraries are not inter-compatible and have some very annoying foot-guns when used together (specifically with selects & other popovers inside dialogs/sheets).

The more projects that get created with this starter kit, the more developers will run into these hard to debug issues.

Migration for existing projects

For those who have already created an application using a starter kit, the migration is pretty simple just update each shadcn-vue component using the following command for each folder in resources/js/components/ui and allow it to override the existing files.

npx shadcn-vue@latest add avatar
npx shadcn-vue@latest add breadcrumb
npx shadcn-vue@latest add button
// etc....

I also had to copy over the app.css file from the starter kit back into my project as it made my logo icon blue. If you're using Git you can run this command after you've updated the components:

git checkout origin/main resources/css/app.css