Skip to main content
Exit fullscreen Esc

FAQ Sections

Frequently asked questions displayed as a disclosure list or a 2-column grid.

Composed from: container, faq, faq-item, grid, heading, section, stack, text.

Disclosure FAQ

Expandable questions using <x-wirekit::faq> and <x-wirekit::faq-item>. Best for longer FAQ lists where the answers would dominate the page if always visible.

The pair is not the accordion: faq-item takes its own question and id, and the set emits FAQPage structured data. An accordion is the generic disclosure primitive and knows nothing about questions.

FAQ — Disclosure list

Frequently asked questions 

<x-wirekit::section padding="2xl">
    <x-wirekit::container max="md">
        <x-wirekit::stack gap="lg">
            <x-wirekit::heading level="2" size="3xl" style="text-align: center;">Frequently asked questions</x-wirekit::heading>
            <x-wirekit::faq>
                <x-wirekit::faq-item question="Is WireKit free to use?" id="faq-1">
                    Yes, WireKit is completely free and open source under the MIT license. You can use it in personal and commercial projects without restrictions.
                </x-wirekit::faq-item>
                <x-wirekit::faq-item question="Does WireKit require Tailwind CSS v4?" id="faq-2">
                    Yes, WireKit is built for Tailwind CSS v4 with its CSS-first configuration system. It uses CSS variables and the @theme directive for theming.
                </x-wirekit::faq-item>
                <x-wirekit::faq-item question="Can I customize the components?" id="faq-3">
                    Absolutely. WireKit offers 4 levels of customization: CSS variable overrides, PHP defaults, class personalization, and full view publishing.
                </x-wirekit::faq-item>
                <x-wirekit::faq-item question="Does WireKit work with Laravel Breeze or Jetstream?" id="faq-4">
                    WireKit components work alongside any Laravel starter kit. You can gradually replace Breeze or Jetstream components with WireKit equivalents, or use both together.
                </x-wirekit::faq-item>
            </x-wirekit::faq>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>

2-Column FAQ

Static grid for shorter FAQ lists that don't need expand/collapse. The grid keeps every answer visible at once, which makes sense when the answers are short or the FAQ is the page's primary content.

FAQ — 2-Column Grid

Common questions

How long does setup take?

About five minutes. Run composer require pushery/wirekit, then php artisan wirekit:install — the install command publishes the config, registers the directives, and runs a sanity check.

Do I need to know Alpine.js?

No. WireKit's interactive components ship with Alpine wired up internally; you compose them as Blade tags without writing any Alpine yourself.

Can I theme the components?

Yes. Every visual property — color, radius, shadow, typography, motion — is a CSS variable. Override in your app.css and every component picks up the change.

Does it work with Livewire?

WireKit is built for Livewire — every form-control, overlay, and table component plays nicely with wire:model, wire:click, and Livewire's DOM morphing. 

<x-wirekit::section padding="2xl" background="muted">
    <x-wirekit::container max="lg">
        <x-wirekit::stack gap="lg">
            <x-wirekit::heading level="2" size="3xl" style="text-align: center;">Common questions</x-wirekit::heading>
            <x-wirekit::grid cols="1 md:2" gap="lg">
                <x-wirekit::stack gap="xs">
                    <x-wirekit::heading level="3" size="md">How long does setup take?</x-wirekit::heading>
                    <x-wirekit::text intent="muted">About five minutes. Run <code>composer require pushery/wirekit</code>, then <code>php artisan wirekit:install</code> — the install command publishes the config, registers the directives, and runs a sanity check.</x-wirekit::text>
                </x-wirekit::stack>
                <x-wirekit::stack gap="xs">
                    <x-wirekit::heading level="3" size="md">Do I need to know Alpine.js?</x-wirekit::heading>
                    <x-wirekit::text intent="muted">No. WireKit's interactive components ship with Alpine wired up internally; you compose them as Blade tags without writing any Alpine yourself.</x-wirekit::text>
                </x-wirekit::stack>
                <x-wirekit::stack gap="xs">
                    <x-wirekit::heading level="3" size="md">Can I theme the components?</x-wirekit::heading>
                    <x-wirekit::text intent="muted">Yes. Every visual property — color, radius, shadow, typography, motion — is a CSS variable. Override in your <code>app.css</code> and every component picks up the change.</x-wirekit::text>
                </x-wirekit::stack>
                <x-wirekit::stack gap="xs">
                    <x-wirekit::heading level="3" size="md">Does it work with Livewire?</x-wirekit::heading>
                    <x-wirekit::text intent="muted">WireKit is built for Livewire — every form-control, overlay, and table component plays nicely with <code>wire:model</code>, <code>wire:click</code>, and Livewire's DOM morphing.</x-wirekit::text>
                </x-wirekit::stack>
            </x-wirekit::grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>