Veldora UI provides a library of 41+ production-ready, accessible UI components built specifically for Veldora's template engine. Unlike traditional CSS frameworks that bundle thousands of unused classes, Veldora UI lets you scaffold only the components you need directly into your resources/views/components/ directory.
You own 100% of the component markup, styling, and logic.
Installing Components
Terminal • bash
# List all 41+ available UI components
php veldora list:components
# Install specific components (space-separated)
php veldora add button card modal tabs alert badge
# Scaffold a custom component template
php veldora make:component user-cardComponent Catalogue by Category
Veldora UI organizes its 41 components into 6 logical categories:
1. Forms & Inputs (9 Components)
| Component | Tag | Description |
|---|---|---|
| Input | <x-input> | Text, email, password, and number input fields with labels & error states |
| Textarea | <x-textarea> | Multi-line auto-resizing text input |
| Select | <x-select> | Accessible dropdown selection menu with optgroup support |
| Checkbox | <x-checkbox> | Custom styled boolean and array checkbox toggles |
| Radio | <x-radio> | Accessible single-choice radio button groups |
| Input Group | <x-inputgroup> | Inputs with prepended or appended icons, buttons, or currency tags |
| File Upload | <x-fileupload> | Drag-and-drop file upload zone with file size & format preview |
| Date Picker | <x-datepicker> | Modern calendar date and date-range selection picker |
| Combobox | <x-combobox> | Searchable autocomplete filter input with keyboard navigation |
2. Actions & Controls (4 Components)
| Component | Tag | Description |
|---|---|---|
| Button | <x-button> | Versatile button with variants (primary, secondary, danger, ghost, link), sizes (sm, md, lg), and loading states |
| Dropdown | <x-dropdown> | Contextual menu popover triggered on click or hover with divider & item support |
| Switch | <x-switch> | Smooth toggle switch control for boolean settings |
| DataTable | <x-datatable> | Advanced data grid with client-side sorting, pagination, and search filtering |
3. Feedback & Status (9 Components)
| Component | Tag | Description |
|---|---|---|
| Alert | <x-alert> | Banner feedback message (info, success, warning, danger) with optional close button |
| Badge | <x-badge> | Compact indicator pill for statuses, tags, counts, and categories |
| Toast | <x-toast> | Non-intrusive floating notification toast with timer auto-dismiss |
| Spinner | <x-spinner> | Smooth CSS loading animation in multiple sizes and colors |
| Progress | <x-progress> | Determinate or indeterminate animated progress bar |
| Skeleton | <x-skeleton> | Placeholder loading shimmer lines, circles, and blocks |
| Empty State | <x-empty> | Illustrated placeholder for empty datasets or zero-search results |
| Confirm | <x-confirm> | Action confirmation dialog for destructive actions (e.g. Delete) |
| Rating | <x-rating> | Interactive star/heart rating input and display |
4. Data Display (8 Components)
| Component | Tag | Description |
|---|---|---|
| Card | <x-card> | Structured content container with header, body, footer, and hover effects |
| Table | <x-table> | Styled tabular data display with striped rows and sticky headers |
| Stat | <x-stat> | Metric KPI card with title, value, change percentage (+/-), and trend icon |
| Timeline | <x-timeline> | Vertical sequence of historical events, activities, or status steps |
| Accordion | <x-accordion> | Collapsible disclosure panels for FAQs and multi-section content |
| Avatar | <x-avatar> | User profile image with fallback initials and online indicator dot |
| Tooltip | <x-tooltip> | Hover and focus tooltip popup with positional arrows |
| Tabs | <x-tabs> | Tabbed navigation switcher with smooth active pill animations |
5. Navigation (5 Components)
| Component | Tag | Description |
|---|---|---|
| Navbar | <x-navbar> | Responsive top navigation header with logo, links, search, and mobile menu toggle |
| Breadcrumb | <x-breadcrumb> | Hierarchical path breadcrumbs for deep page navigation |
| Pagination | <x-pagination> | Page number switcher with Next, Previous, and active state indicators |
| Stepper | <x-stepper> | Multi-step form or onboarding wizard progress indicator |
| Sidebar | <x-sidebar> | Collapsible dashboard sidebar navigation with grouped link sections |
6. Layout & Overlay (6 Components)
| Component | Tag | Description |
|---|---|---|
| Modal | <x-modal> | Accessible dialog overlay with backdrop blur, focus trap, and header/body/footer slots |
| Drawer | <x-drawer> | Off-canvas slide-out sheet from left, right, top, or bottom |
| Popover | <x-popover> | Floating rich-content popover anchored to a trigger element |
| Divider | <x-divider> | Horizontal or vertical separator with optional middle label |
| Container | <x-container> | Responsive max-width wrapper with consistent horizontal padding |
| Footer | <x-footer> | Multi-column site footer with copyright notice and social links |
Component Code Examples
Button Component
template.veldora.php
HTML
<x-button variant="primary" size="md">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Save Changes
</x-button>
<x-button variant="danger" size="sm" onclick="confirmDelete()">Delete Post</x-button>
<x-button variant="ghost" size="md">Cancel</x-button>Modal Dialog
template.veldora.php
HTML
<x-modal id="create-user-modal" title="Add New Team Member">
<form method="POST" action="/users" id="user-form">
@csrf
<x-input name="name" label="Full Name" placeholder="John Doe" required />
<x-input name="email" label="Email Address" type="email" placeholder="john@example.com" required />
</form>
<x-slot name="footer">
<x-button variant="ghost" onclick="VeldoraUI.closeModal('create-user-modal')">Cancel</x-button>
<x-button variant="primary" type="submit" form="user-form">Create Account</x-button>
</x-slot>
</x-modal>Card & Metric Stat
template.veldora.php
HTML
<x-card title="Monthly Performance" subtitle="Updated 5 minutes ago">
<div class="grid-3">
<x-stat title="Total Revenue" value="$48,250" change="+12.5%" trend="up" />
<x-stat title="Active Users" value="1,420" change="+8.1%" trend="up" />
<x-stat title="Bounce Rate" value="24.2%" change="-3.4%" trend="down" />
</div>
</x-card>Tabs Navigation
template.veldora.php
HTML
<x-tabs :tabs="['account' => 'Account Info', 'security' => 'Security & Passwords', 'billing' => 'Billing']" active="account">
<div id="tab-account">
<!-- Account Settings Content -->
</div>
<div id="tab-security">
<!-- Password and 2FA Settings -->
</div>
<div id="tab-billing">
<!-- Invoices and Subscription Plans -->
</div>
</x-tabs>