Component Quick Reference

A comprehensive quick reference for all Basekit Laravel UI components.

Form Components

Component	Tag	Purpose
Button	<x-basekit-ui::button>	Clickable button with variants and icons
Input	<x-basekit-ui::input>	Text input field
Textarea	<x-basekit-ui::textarea>	Multi-line text input
Checkbox	<x-basekit-ui::checkbox>	Checkbox with label
Radio	<x-basekit-ui::radio>	Radio button
Select	<x-basekit-ui::select>	Dropdown select (single value)
Multi-Select	<x-basekit-ui::multi-select>	Dropdown select (multiple values)
Toggle	<x-basekit-ui::toggle>	Switch toggle (Alpine.js)

Feedback Components

Component	Tag	Purpose
Alert	<x-basekit-ui::alert>	Alert banner
Toast	<x-basekit-ui::toast>	Notification message
Tooltip	<x-basekit-ui::tooltip>	Hover tooltip
Progress	<x-basekit-ui::progress>	Progress bar
Spinner	<x-basekit-ui::spinner>	Loading spinner
Skeleton	<x-basekit-ui::skeleton>	Loading placeholder
Empty State	<x-basekit-ui::empty-state>	No data display

Navigation Components

Component	Tag	Purpose
Breadcrumb	<x-basekit-ui::breadcrumb>	Navigation breadcrumbs
Pagination	<x-basekit-ui::pagination>	Page navigation
Tabs	<x-basekit-ui::tabs>	Tabbed interface (Alpine.js)
Dropdown Menu	<x-basekit-ui::dropdown-menu>	Dropdown menu (Alpine.js)
Link	<x-basekit-ui::link>	Styled link

Layout Components

Component	Tag	Purpose
Container	<x-basekit-ui::container>	Page container
Divider	<x-basekit-ui::divider>	Horizontal separator
Stack	<x-basekit-ui::stack>	Flexbox layout
Grid	<x-basekit-ui::grid>	Grid layout

Display Components

Component	Tag	Purpose
Card	<x-basekit-ui::card>	Content container
Badge	<x-basekit-ui::badge>	Small label/indicator
Avatar	<x-basekit-ui::avatar>	User profile image
Table	<x-basekit-ui::table>	Data table
List	<x-basekit-ui::list>	Styled list
Description List	<x-basekit-ui::description-list>	Key-value pairs
Stat	<x-basekit-ui::stat>	Statistics display

Dialog & Overlay Components

Component	Tag	Purpose
Modal	<x-basekit-ui::modal>	Modal dialog (Alpine.js)
Accordion	<x-basekit-ui::accordion>	Collapsible panels (Alpine.js)

Common Props

Variants

Most components support variants for different styles:

variant="primary|secondary|success|warning|danger|info|ghost"

Sizes

Many components support size variants:

size="xs|sm|md|lg|xl"

Icons

Components with icon support use Heroicons:

icon="check|users|cog|..."

Alpine.js Components

The following components require Alpine.js:

• Input — Password visibility toggle, Masked and Number Inputs
• Toggle
• Toast
• Tooltip
• Table
• Tabs
• Dropdown Menu
• Modal
• Accordion

Configuration

Enable/disable and configure components in config/basekit-laravel-ui.php:

'components' => [
    'button' => [
        'enabled' => true,
        'variants' => ['primary', 'secondary', 'danger', 'ghost'],
        'sizes' => ['sm', 'md', 'lg'],
        'default_variant' => 'primary',
        'default_size' => 'md',
    ],
    // ...
],

Publishing

# Publish configuration
php artisan vendor:publish --tag=basekit-laravel-ui-config

# Optional: publish prebuilt CSS to public/
php artisan vendor:publish --tag=basekit-laravel-ui-css-v1

# Publish component views (for customization)
php artisan vendor:publish --tag=basekit-views

Build Commands

# Optional: build optimized CSS from config
php artisan basekit:ui:build

# Optional: build with watch mode
php artisan basekit:ui:build --watch

# Migrate theme from v1 to v2 (future)
php artisan basekit:ui:migrate-theme

Complete Example

<x-basekit-ui::container>
    <x-basekit-ui::card>
        <x-slot:header>
            <h2 class="text-xl font-bold">Create Account</h2>
        </x-slot>

        <form method="POST" action="/register">
            @csrf

            <x-basekit-ui::stack spacing="lg">
                <x-basekit-ui::input
                    name="name"
                    label="Name"
                    icon="user"
                    :error="$errors->first('name')"
                />

                <x-basekit-ui::input
                    name="email"
                    type="email"
                    label="Email"
                    icon="envelope"
                    :error="$errors->first('email')"
                />

                <x-basekit-ui::input
                    name="password"
                    type="password"
                    label="Password"
                    hint="Must be at least 8 characters"
                    icon="lock-closed"
                    :error="$errors->first('password')"
                />

                <x-basekit-ui::checkbox
                    name="terms"
                    label="I agree to the terms and conditions"
                />
            </x-basekit-ui::stack>

            <x-slot:footer>
                <div class="flex justify-between items-center">
                    <x-basekit-ui::link href="/login">
                        Already have an account?
                    </x-basekit-ui::link>

                    <x-basekit-ui::button
                        type="submit"
                        variant="primary"
                        icon="arrow-right"
                    >
                        Create Account
                    </x-basekit-ui::button>
                </div>
            </x-slot>
        </form>
    </x-basekit-ui::card>
</x-basekit-ui::container>