Feature Grids

Showcase your product's capabilities with icon-driven feature cards. Available in 3-column grid and alternating screenshot layouts.

Composed from: aspect-ratio, button, container, feature, feature-grid, grid, heading, section, stack, text.

3-Column with Icons

The classic feature grid — icon, heading, description per feature. Three columns work for 3-9 features; below 3 the grid feels sparse, above 9 the page goes on too long.

Feature Grid — 3-Column

What WireKit covers

Each of these comes in the one Composer package.

Forms, overlays, tables

Fields, dialogs, menus, data tables and navigation, each one a Blade component.

Dark Mode

Every component reads its colors from CSS variables, and one class on the page switches them to dark.

Keyboard and screen reader

Arrow keys, Escape and Tab work as the ARIA patterns describe, and the focus returns to where it came from.

Customizable

Four levels of customization, from CSS-variable overrides to full view publishing.

Livewire native

Fields bind with wire:model and show the errors your validation returns.

MIT licensed

Free and open source, for personal and commercial projects.

<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="xl">
            <x-wirekit::stack gap="sm" align="center" style="text-align: center; max-width: 32rem; margin: 0 auto;">
                <x-wirekit::heading level="2" size="3xl">What WireKit covers</x-wirekit::heading>
                <x-wirekit::text size="lg" intent="muted">Each of these comes in the one Composer package.</x-wirekit::text>
            </x-wirekit::stack>
            <x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg">
                <x-wirekit::feature icon="check" title="Forms, overlays, tables" intent="primary">
                    Fields, dialogs, menus, data tables and navigation, each one a Blade component.
                </x-wirekit::feature>
                <x-wirekit::feature icon="eye" title="Dark Mode" intent="primary">
                    Every component reads its colors from CSS variables, and one class on the page switches them to dark.
                </x-wirekit::feature>
                <x-wirekit::feature icon="info" title="Keyboard and screen reader" intent="primary">
                    Arrow keys, Escape and Tab work as the ARIA patterns describe, and the focus returns to where it came from.
                </x-wirekit::feature>
                <x-wirekit::feature icon="edit" title="Customizable" intent="primary">
                    Four levels of customization, from CSS-variable overrides to full view publishing.
                </x-wirekit::feature>
                <x-wirekit::feature icon="upload" title="Livewire native" intent="primary">
                    Fields bind with wire:model and show the errors your validation returns.
                </x-wirekit::feature>
                <x-wirekit::feature icon="download" title="MIT licensed" intent="primary">
                    Free and open source, for personal and commercial projects.
                </x-wirekit::feature>
            </x-wirekit::feature-grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>

Alternating Screenshots

Features shown as alternating text + screenshot rows — best for detailed product walkthroughs where each feature deserves its own visual.

Features — Alternating Screenshots

Data tables

Sort, filter, and paginate with built-in WireKit components. Add sticky headers, captions, and row selection.

Accessible form fields

Date pickers, comboboxes, file uploads and one-time codes, each showing its own validation error.

Overlay system

Modals, drawers, dropdowns, command palettes — with focus trapping, scroll lock, and keyboard navigation handled for you.

<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="2xl">
            {{-- Each feature row uses a 1/2-col grid so it stacks on mobile.
                 DOM order is image-then-text on every row, so mobile gives a
                 consistent image→text rhythm (the canonical marketing pattern:
                 the visual draws attention, the explanation reads below). On
                 desktop the alternating image-left/right rhythm is preserved
                 by flipping the SECOND row's image to grid column 2 via
                 `md:order-2` on the image cell. --}}
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9">
                    <img src="/placeholder/640x360?bg=e0f2fe&fg=0369a1&label=Screenshot+%C2%B7+tables" alt="Screenshot · tables" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Data tables</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Sort, filter, and paginate with built-in WireKit components. Add sticky headers, captions, and row selection.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9" class="md:order-2">
                    <img src="/placeholder/640x360?bg=fce7f3&fg=be185d&label=Screenshot+%C2%B7+forms" alt="Screenshot · forms" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Accessible form fields</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Date pickers, comboboxes, file uploads and one-time codes, each showing its own validation error.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9">
                    <img src="/placeholder/640x360?bg=ede9fe&fg=6d28d9&label=Screenshot+%C2%B7+overlays" alt="Screenshot · overlays" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Overlay system</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Modals, drawers, dropdowns, command palettes — with focus trapping, scroll lock, and keyboard navigation handled for you.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>

Hero Sections — page headers