Components Overview

LaraDashboard provides a comprehensive library of reusable Blade components built with Tailwind CSS and Alpine.js. These components ensure consistency, accessibility, and dark mode support across your entire application.

Component Categories#

Category	Description	Components
Alerts	Feedback messages and notifications	Success, Error, Warning, Info, Default
Buttons	Interactive button elements	Button, Action Buttons, Submit Buttons
Inputs	Form input controls	Input, Select, Textarea, Checkbox, Radio, Password, etc.
Cards	Content container components	Card, Card Skeleton
Modals	Dialog and overlay components	Modal, Confirm Delete, Error Message
Datatable	Data display and management	Datatable, Searchbar, Filters, Skeleton
Navigation	Navigation and layout components	Breadcrumbs, Tabs, Dropdown
Feedback	User feedback components	Toast Notifications, Tooltip, Popover
Layout	Structural components	Drawer, Collapsible Section, Card

Usage Principles#

Basic Component Usage#

All components use Laravel's anonymous Blade component syntax:

{{-- Simple component --}}
<x-alerts.success message="Operation completed successfully!" />

{{-- Component with slots --}}
<x-card.card>
    <x-slot name="header">Card Title</x-slot>
    Your content here
</x-card.card>

{{-- Component with attributes --}}
<x-buttons.button variant="primary" icon="lucide:save">
    Save Changes
</x-buttons.button>

Dark Mode Support#

All components automatically support dark mode through Tailwind's dark: variant classes. No additional configuration is needed - components adapt based on the user's system preference or manual toggle.

Accessibility#

Components are built with accessibility in mind:

• Proper ARIA attributes and roles
• Keyboard navigation support
• Focus management
• Screen reader friendly labels

Alpine.js Integration#

Many interactive components use Alpine.js for client-side behavior:

{{-- Component with Alpine.js state --}}
<x-drawer btn="Open Drawer" title="Settings">
    <p>Drawer content with Alpine.js transitions</p>
</x-drawer>

Livewire Integration#

Components seamlessly integrate with Livewire:

{{-- Using wire:model with input components --}}
<x-inputs.input
    label="Email"
    name="email"
    wire:model.live="email"
/>

{{-- Button with Livewire loading state --}}
<x-buttons.button
    variant="primary"
    loadingTarget="save"
    wire:click="save"
>
    Save
</x-buttons.button>

Component File Locations#

Components are organized in the resources/views/components/ directory:

resources/views/components/
├── alerts/
│   ├── default.blade.php
│   ├── error.blade.php
│   ├── errors.blade.php
│   ├── info.blade.php
│   ├── success.blade.php
│   └── warning.blade.php
├── buttons/
│   ├── action-buttons.blade.php
│   ├── action-item.blade.php
│   ├── button.blade.php
│   ├── drawer-close.blade.php
│   └── submit-buttons.blade.php
├── card/
│   ├── card.blade.php
│   └── card-skeleton.blade.php
├── datatable/
│   ├── datatable.blade.php
│   ├── responsive-filters.blade.php
│   ├── searchbar.blade.php
│   └── skeleton.blade.php
├── inputs/
│   ├── checkbox.blade.php
│   ├── combobox.blade.php
│   ├── date-picker.blade.php
│   ├── datetime-picker.blade.php
│   ├── file-input.blade.php
│   ├── form-label.blade.php
│   ├── icon-combobox.blade.php
│   ├── input.blade.php
│   ├── input-group.blade.php
│   ├── password.blade.php
│   ├── radio.blade.php
│   ├── range-input.blade.php
│   ├── search.blade.php
│   ├── searchable-item-picker.blade.php
│   ├── select.blade.php
│   ├── selection-card.blade.php
│   ├── selection-card-group.blade.php
│   ├── tags-input.blade.php
│   ├── tags-select.blade.php
│   └── textarea.blade.php
├── modal/
│   └── modal.blade.php
├── modals/
│   ├── ai-command.blade.php
│   ├── confirm-delete.blade.php
│   ├── create-backup.blade.php
│   ├── duplicate-email-template.blade.php
│   ├── error-message.blade.php
│   ├── license-activation.blade.php
│   ├── module-conflict.blade.php
│   ├── module-update.blade.php
│   └── test-email.blade.php
├── table/
│   └── empty-state.blade.php
└── [standalone components]
    ├── breadcrumbs.blade.php
    ├── collapsible-section.blade.php
    ├── dashboard-collapsible-card.blade.php
    ├── drawer.blade.php
    ├── dropdown.blade.php
    ├── messages.blade.php
    ├── popover.blade.php
    ├── profile-card.blade.php
    ├── searchable-select.blade.php
    ├── tabs.blade.php
    ├── text-editor.blade.php
    ├── toast-notifications.blade.php
    ├── tooltip.blade.php
    └── variable-selector.blade.php

Quick Reference#

Most Common Components#

Component	Usage
<x-buttons.button>	Primary action buttons
<x-inputs.input>	Text input fields
<x-inputs.select>	Dropdown selection
<x-card.card>	Content containers
<x-alerts.success>	Success messages
<x-datatable.datatable>	Data tables with pagination
<x-modal.modal>	Dialog overlays
<x-breadcrumbs>	Page navigation

Form Building Example#

<form wire:submit="save">
    <x-card.card>
        <x-slot name="header">User Information</x-slot>

        <div class="space-y-4">
            <x-inputs.input
                label="Full Name"
                name="name"
                wire:model="name"
                required
            />

            <x-inputs.input
                label="Email"
                name="email"
                type="email"
                wire:model="email"
                required
            />

            <x-inputs.select
                label="Role"
                name="role"
                :options="$roles"
                wire:model="role"
            />

            <x-inputs.textarea
                label="Bio"
                name="bio"
                wire:model="bio"
                rows="4"
            />
        </div>

        <x-slot name="footer">
            <x-buttons.button variant="primary" type="submit">
                Save User
            </x-buttons.button>
        </x-slot>
    </x-card.card>
</form>

Next Steps#

• Alerts - Learn about alert and notification components
• Buttons - Explore button variants and options
• Inputs - Master form input components
• Cards - Build content layouts with cards
• Datatable - Create powerful data tables