chriskelemba/laravel-atomic-ui

Blade-based atomic UI components for Laravel

Maintainers

Package info

github.com/chriskelemba/laravel-atomic-ui

Language:Blade

pkg:composer/chriskelemba/laravel-atomic-ui

Statistics

Installs: 3

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

v1.0.0 2026-02-05 12:05 UTC

This package is auto-updated.

Last update: 2026-03-05 12:20:27 UTC


README

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)