Styleguide

A live interactive preview of every Basekit component, all in one place.

Open on a tab: Styleguide

Sections

The styleguide is divided into five sections, each with collapsible sub-sections you can open individually:

• Form — Button, Input, Textarea, Checkbox, Radio, Select, Multi-Select, Toggle
• Feedback — Alert, Empty State, Spinner, Progress, Skeleton, Tooltip, Toast
• Layout — Card, Avatar, Badge, Divider, Stack, Grid, List, Stat, Description List, Table
• Navigation — Tabs, Breadcrumb, Dropdown Menu, Link, Pagination
• Overlay — Accordion, Modal

Regenerating the Snapshot

The styleguide is a pre-rendered static HTML file committed to the repository. After making changes to component Blade views or CSS, regenerate it directly from the package root — no separate Laravel app required:

composer styleguide

This runs ./vendor/bin/testbench basekit:ui:styleguide using Orchestra Testbench, which is already a dev dependency.

To save it to a custom path (e.g. your app's public/ directory):

php artisan basekit:ui:styleguide --output=public/styleguide.html

Using the Styleguide in Your App

You can render the Blade view directly in any Laravel application — useful during development to preview components with your own theme applied:

@php
    $sections = [
        'Form'       => 'basekit::styleguide.partials.form',
        'Feedback'   => 'basekit::styleguide.partials.feedback',
        'Layout'     => 'basekit::styleguide.partials.layout',
        'Navigation' => 'basekit::styleguide.partials.navigation',
        'Overlay'    => 'basekit::styleguide.partials.overlay',
    ];
@endphp

<x-styleguide-wrapper :sections="$sections" />

Make sure your app's CSS (including Basekit's theme.css) is loaded on the page — the component does not load any styles itself.