Level 58
Certainly! Here’s a clear explanation addressing your question:
Laravel 12’s Vue starter kit documentation mentions shadcn-vue as the UI component inspiration. However, when you install the Vue starter kit, you see reka-ui in your package.json and in your component imports.
What’s going on?
- shadcn-vue is a popular open-source UI component library for Vue, inspired by shadcn/ui (originally for React).
- reka-ui is a fork or alternative implementation of shadcn-vue, created by the Laravel team (or contributors) to better fit Laravel’s needs. It is based on shadcn-vue, but may include tweaks, improvements, or customizations for Laravel projects.
Why does Laravel use reka-ui instead of shadcn-vue directly?
- Stability & Control: By using reka-ui, Laravel can ensure the starter kit’s UI components remain stable and consistent, even if shadcn-vue changes.
- Customization: Laravel can make changes or improvements specific to the Laravel ecosystem without waiting for upstream changes in shadcn-vue.
- Better Integration: reka-ui may include features or fixes that make it work better out-of-the-box with Laravel’s starter kits.
In summary
- reka-ui is essentially a Laravel-customized version of shadcn-vue.
- The documentation references shadcn-vue because reka-ui is based on it, and the component APIs are very similar.
- When you see
reka-uiin your imports, you’re using Laravel’s tailored version of these UI components.
Example
You might see imports like:
import { Button } from 'reka-ui'
Instead of:
import { Button } from 'shadcn-vue'
But the usage is almost identical.
Bottom line:
Laravel uses reka-ui to provide a stable, Laravel-friendly set of UI components based on shadcn-vue, ensuring a smooth developer experience with the Vue starter kit.
