---
title: FAQ Sections
description: Frequently asked questions displayed as a disclosure list or a 2-column grid.
visibility: guest
draft: false
---

# 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.

:::preview{title="FAQ — Disclosure list" wide}
<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.

:::preview{title="FAQ — 2-Column Grid" wide}
<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>
:::

## Related

- [FAQ component](/components/faq) — the question-and-answer pair this partial is built from
- [Accordion component](/components/accordion) — the generic expand/collapse primitive underneath it