Feature Grids

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

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

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

Everything you need to build your interface

Built for Laravel developers who care about quality and speed.

Complete component library

Forms, overlays, data display, navigation — every building block you need.

Dark Mode

Every component works in light and dark mode via CSS variables. Zero config.

WCAG 2.1 AA

Keyboard navigation, ARIA attributes, focus management — accessibility by default.

Customizable

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

Livewire native

Built for Livewire 4 with wire:model, validation, and real-time updates.

MIT licensed

Free and open source. Use in personal and commercial projects without restriction.

<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">Everything you need to build your interface</x-wirekit::heading>
                <x-wirekit::text size="lg" variant="muted">Built for Laravel developers who care about quality and speed.</x-wirekit::text>
            </x-wirekit::stack>
            <x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg">
                <x-wirekit::feature icon="check" title="Complete component library" tone="accent">
                    Forms, overlays, data display, navigation — every building block you need.
                </x-wirekit::feature>
                <x-wirekit::feature icon="eye" title="Dark Mode" tone="accent">
                    Every component works in light and dark mode via CSS variables. Zero config.
                </x-wirekit::feature>
                <x-wirekit::feature icon="info" title="WCAG 2.1 AA" tone="accent">
                    Keyboard navigation, ARIA attributes, focus management — accessibility by default.
                </x-wirekit::feature>
                <x-wirekit::feature icon="edit" title="Customizable" tone="accent">
                    Four levels of customization, from CSS-variable overrides to full view publishing.
                </x-wirekit::feature>
                <x-wirekit::feature icon="upload" title="Livewire native" tone="accent">
                    Built for Livewire 4 with wire:model, validation, and real-time updates.
                </x-wirekit::feature>
                <x-wirekit::feature icon="download" title="MIT licensed" tone="accent">
                    Free and open source. Use in personal and commercial projects without restriction.
                </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

Powerful data tables

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

Accessible form fields

Every input type you need — date pickers, comboboxes, file uploads, OTP, and more, each with validation built in.

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">Powerful data tables</x-wirekit::heading>
                    <x-wirekit::text size="lg" variant="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::feature-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" variant="muted">Every input type you need — date pickers, comboboxes, file uploads, OTP, and more, each with validation built in.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::feature-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" variant="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::feature-grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>

Hero Sections — page headers