الصفحات · Laravilt
UI Components
The shadcn-vue and shadcn/ui primitives published into your app, with import paths for both stacks.
Laravilt doesn't ship a separate UI component library. The installer copies the shadcn primitives into your app at resources/js/components/ui/: shadcn-vue (Reka UI) for Vue, shadcn/ui (Radix UI) for React. Import them with the @/ alias:
The import paths are the same on both stacks. Only the file format differs: Vue components live in ui/<name>/ folders with an index.ts, and React components are single ui/<name>.tsx files.
React support requires Laravilt v1.1 or later.
Because the files are yours, you can edit variants directly or add more components with the shadcn CLI (npx shadcn-vue@latest add ... / npx shadcn@latest add ...). To restore the originals, run php artisan vendor:publish --tag=laravilt-panel-ui --force.
Available Primitives
Shipped with both stacks: alert, avatar, badge, breadcrumb, button, card, checkbox, collapsible, dialog, dropdown-menu, input, label, navigation-menu, popover, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, spinner, switch, tabs, textarea, tooltip.
Vue only: pin-input.
React only: accordion, alert-dialog, calendar, command, context-menu, hover-card, input-otp, pagination, progress, slider, sonner (toasts), table, toggle, toggle-group.
Documented Here
| Component | Page |
|---|---|
| Button | Button |
| Card | Card |
| Badge | Badge |
| Alert | Alert |
| Avatar | Avatar |
| Dialog | Dialog |
| Sheet | Sheet |
| Dropdown Menu | Dropdown Menu |
| Tabs | Tabs |
| Tooltip | Tooltip |
Form primitives (input, select, checkbox, switch) are covered in Form Inputs. For everything else, the upstream docs apply unchanged: shadcn-vue and shadcn/ui.
Syntax Differences at a Glance
| Vue | React | |
|---|---|---|
| Class prop | class="..." | className="..." |
| Two-way binding | v-model="value" | value + onValueChange / onChange |
| Composition | as-child | asChild |
| Icons | lucide-vue-next | lucide-react |