A component kit with many souls.

Every component below is plain Blade + Alpine, styled by design tokens and ready for Livewire. Switch realms and flip between light and dark in the top bar: shapes, type and ornaments change, not just colours.

Forms Tables Elements

Token driven

One set of semantic tokens powers every realm, in light and dark.

Livewire ready

wire:model works on every field, including custom pickers.

Accessible

Keyboard navigation, focus traps, ARIA roles and reduced motion.

Zero build deps

Blade, Alpine and Tailwind v4. Nothing else to install.

Realms

9 realms, each with a light and a dark mode: 18 themes in total. Pick a side of a card to switch instantly, or use the realm switcher and light/dark toggle in the top bar.

Runic Forge

Builder

Forged, not generated. Every detail hammered into place.

Neon Circuit

Systems Thinker

Every component wired into a circuit that makes sense.

Ink & Quill

Creative

Code and story share the same craft: structure that reads beautifully.

Crimson Codex

Relentless

Sharp edges, sharper focus: cut through until it is solved.

Faerûn Grimoire

Baldur's Gate 3

Systems Thinker

Every choice has consequences, so I plan the whole campaign.

Lands Between

Elden Ring

Curious

The best discoveries hide off the beaten path.

Night City

Cyberpunk 2077

Creative

Chrome, neon and a little rebellion: technology with imagination.

Web-Slinger

Marvel's Spider-Man

Quiet Strength

No spotlight needed. Show up, adapt, protect what matters.

Lordran

Dark Souls

Relentless

You died. Try again. Learn. Master it.

Forms

Inputs, selects, pickers, editors, uploads, repeaters and builders with validation states baked in.

Open demos
<x-duro::input> <x-duro::textarea> <x-duro::select> <x-duro::multi-select> <x-duro::checkbox> <x-duro::checkbox-list> <x-duro::radio> <x-duro::switch> <x-duro::toggle-buttons> <x-duro::slider> <x-duro::date-picker> <x-duro::time-picker> <x-duro::date-time-picker> <x-duro::color-picker> <x-duro::tags-input> <x-duro::key-value> <x-duro::file-upload> <x-duro::markdown-editor> <x-duro::rich-editor> <x-duro::code-editor> <x-duro::repeater> <x-duro::builder> <x-duro::otp-input> <x-duro::rating>

Tables

Composable data tables: sortable headers, bulk selection, filters, grouped rows and empty states.

Open demos
<x-duro::table> <x-duro::head> <x-duro::header-cell> <x-duro::row> <x-duro::cell> <x-duro::text-column> <x-duro::image-column> <x-duro::icon-column> <x-duro::badge-column> <x-duro::color-column> <x-duro::input-column> <x-duro::select-column> <x-duro::toggle-column> <x-duro::checkbox-column> <x-duro::actions-column> <x-duro::group-row> <x-duro::summary-row> <x-duro::empty-state> <x-duro::filters>

Elements & Overlays

Buttons, badges, alerts, modals, slide-overs, dropdowns, tabs, accordions, toasts, stats and more.

Open demos
<x-duro::button> <x-duro::badge> <x-duro::alert> <x-duro::card> <x-duro::modal> <x-duro::slide-over> <x-duro::dropdown> <x-duro::tabs> <x-duro::accordion> <x-duro::toasts> <x-duro::tooltip> <x-duro::avatar> <x-duro::avatar-group> <x-duro::stat> <x-duro::progress> <x-duro::skeleton> <x-duro::stepper> <x-duro::timeline> <x-duro::breadcrumbs> <x-duro::kbd> <x-duro::divider> <x-duro::empty-state> <x-duro::page-header> <x-duro::theme-switcher>

Quick start #

Compose a full form section in a handful of lines.

  • No results found.
<x-duro::input name="name" label="Project name" icon="briefcase" wire:model="name" />
            <x-duro::select label="Status" wire:model.live="status" :options="$statuses" />
            <x-duro::textarea name="notes" label="Notes" rows="3" wire:model.blur="notes" />

            <x-duro::button wire:click="save" icon="check" loading="save">Save project</x-duro::button>