Skip to main content
WireKit

FAQ Sections

Frequently asked questions displayed as an accordion or 2-column grid.

Composed from: section, container, stack, heading, accordion, grid, text.

Accordion FAQ

Expandable questions using WireKit's accordion component. Best for longer FAQ lists where the answers would dominate the page if always visible.

FAQ — Accordion

Frequently asked questions

Yes, WireKit is completely free and open source under the MIT license. You can use it in personal and commercial projects without restrictions.

Yes, WireKit is built for Tailwind CSS v4 with its CSS-first configuration system. It uses CSS variables and the @theme directive for theming.

Absolutely. WireKit offers 4 levels of customization: CSS variable overrides, PHP defaults, class personalization, and full view publishing.

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::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 variant="muted">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.</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 variant="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 variant="muted">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.</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 variant="muted">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::text>
                </x-wirekit::stack>
            </x-wirekit::grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>