Laravel Atomic UI

Blade-first atomic UI components for Laravel. Includes a full set of atoms, molecules, organisms, and templates with Tailwind + Alpine.

Install

composer require chriskelemba/laravel-atomic-ui

No publishing required. Components are auto-registered.

Usage

Hyphenated tags (recommended)

<x-atomic-ui-button>Primary</x-atomic-ui-button>
<x-atomic-ui-input name="email" placeholder="you@example.com" />
<x-atomic-ui-modal title="Confirm">
    <x-slot:trigger>
        <x-atomic-ui-button>Open</x-atomic-ui-button>
    </x-slot:trigger>
    Modal content here.
</x-atomic-ui-modal>

Namespaced tags

<x-atomic-ui::atoms.button>Primary</x-atomic-ui::atoms.button>
<x-atomic-ui::atoms.input name="email" />

Component Inventory

Atoms

• atomic-ui-button
• atomic-ui-input
• atomic-ui-action-button
• atomic-ui-badge
• atomic-ui-avatar
• atomic-ui-tag
• atomic-ui-divider

Molecules

• atomic-ui-form-field
• atomic-ui-modal
• atomic-ui-alert
• atomic-ui-toast
• atomic-ui-tooltip
• atomic-ui-popover
• atomic-ui-dropdown
• atomic-ui-tabs
• atomic-ui-breadcrumb
• atomic-ui-pagination
• atomic-ui-steps
• atomic-ui-toggle
• atomic-ui-checkbox
• atomic-ui-radio-group
• atomic-ui-select
• atomic-ui-textarea
• atomic-ui-date-input
• atomic-ui-file-upload
• atomic-ui-search-bar
• atomic-ui-filter-chips
• atomic-ui-sort-control

Organisms

• atomic-ui-form
• atomic-ui-panel
• atomic-ui-table
• atomic-ui-stat-card
• atomic-ui-sidebar
• atomic-ui-line-chart
• atomic-ui-bar-chart
• atomic-ui-pie-chart
• atomic-ui-calendar
• atomic-ui-drawer
• atomic-ui-empty-state
• atomic-ui-progress
• atomic-ui-skeleton
• atomic-ui-section-header
• atomic-ui-timeline
• atomic-ui-activity-list
• atomic-ui-task-list

Templates

• atomic-ui-app-shell
• atomic-ui-dashboard
• atomic-ui-crud-page
• atomic-ui-resource-index

Config (optional)

You can publish config and views if you want to customize:

php artisan vendor:publish --tag=atomic-ui-config
php artisan vendor:publish --tag=atomic-ui-views

Requirements

• Laravel 12+
• Tailwind CSS
• Alpine.js (auto-loaded by package layout)