Docs
v1 Laravel 12/13 · PHP 8.3+

Basekit Laravel UI

A modular Blade component library with Tailwind CSS 4 theming and Alpine.js interactivity. 35 production-ready components for forms, navigation, feedback, layout, display, and overlays.

Form
10 components
Feedback
7 components
Navigation
5 components
Layout
4 components
Display
7 components
Dialog
2 components
|

Buttons

Variants

<x-basekit-ui::button variant="primary">Primary</x-basekit-ui::button>
<x-basekit-ui::button variant="secondary">Secondary</x-basekit-ui::button>
<x-basekit-ui::button variant="success">Success</x-basekit-ui::button>
<x-basekit-ui::button variant="danger">Danger</x-basekit-ui::button>
<x-basekit-ui::button variant="warning">Warning</x-basekit-ui::button>
<x-basekit-ui::button variant="info">Info</x-basekit-ui::button>
<x-basekit-ui::button variant="ghost">Ghost</x-basekit-ui::button>

Custom Colors

<x-basekit-ui::button color="indigo-500">Indigo</x-basekit-ui::button>
<x-basekit-ui::button color="pink-500">Pink</x-basekit-ui::button>
<x-basekit-ui::button color="emerald-500">Emerald</x-basekit-ui::button>

Sizes

<x-basekit-ui::button size="sm">Small</x-basekit-ui::button>
<x-basekit-ui::button size="md">Medium</x-basekit-ui::button>
<x-basekit-ui::button size="lg">Large</x-basekit-ui::button>

States

<x-basekit-ui::button disabled>Disabled</x-basekit-ui::button>
<x-basekit-ui::button is-loading>Loading</x-basekit-ui::button>

With Icons

<x-basekit-ui::button icon="bell" icon-orientation="left">
    With Heroicon
</x-basekit-ui::button>

Rounded

<x-basekit-ui::button rounded="none">None</x-basekit-ui::button>
<x-basekit-ui::button rounded="sm">Sm</x-basekit-ui::button>
<x-basekit-ui::button rounded="md">Md</x-basekit-ui::button>
<x-basekit-ui::button rounded="lg">Lg</x-basekit-ui::button>
<x-basekit-ui::button rounded="xl">Xl</x-basekit-ui::button>
<x-basekit-ui::button rounded="2xl">2xl</x-basekit-ui::button>
<x-basekit-ui::button rounded="full">Full</x-basekit-ui::button>

As Link

Link Button No Href 
<x-basekit-ui::button href="https://github.com/basekit-laravel/basekit-laravel-ui"
    variant="primary" icon="arrow-top-right-on-square">
    Link Button
</x-basekit-ui::button>

<x-basekit-ui::button variant="secondary" as="a" icon="arrow-top-right-on-square">
    No Href
</x-basekit-ui::button>

Copy Buttons

Variants

<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="primary" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="secondary" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="success" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="danger" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="warning" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="info" />
<x-basekit-ui::copy-button value="https://example.com/api/v1" label="Copy link"
    copied-label="Copied!" variant="ghost" />

Sizes

<x-basekit-ui::copy-button value="secret-value" size="sm" label="Small"
    copied-label="Copied!" />
<x-basekit-ui::copy-button value="secret-value" size="md" label="Medium"
    copied-label="Copied!" />
<x-basekit-ui::copy-button value="secret-value" size="lg" label="Large"
    copied-label="Copied!" />

Custom Icons

<x-basekit-ui::copy-button value="abc-123" icon="link" copied-icon="check-circle"
    label="Copy token" copied-label="Copied!" />

Form Inputs

Variants

<x-basekit-ui::input label="Primary" name="variant_primary" placeholder="Primary variant"
    variant="primary" />
<x-basekit-ui::input label="Secondary" name="variant_secondary" placeholder="Secondary variant"
    variant="secondary" />
<x-basekit-ui::input label="Success" name="variant_success" value="Valid input"
    variant="success" />
<x-basekit-ui::input label="Warning" name="variant_warning" value="Check this value"
    variant="warning" />
<x-basekit-ui::input label="Info" name="variant_info" placeholder="Info variant"
    variant="info" />
<x-basekit-ui::input label="Ghost" name="variant_ghost" placeholder="Ghost variant"
    variant="ghost" />

Custom Colors

<x-basekit-ui::input color="indigo-500" label="Custom" name="color_indigo"
    placeholder="Indigo" />
<x-basekit-ui::input color="pink-500" label="Custom" name="color_pink"
    placeholder="Pink" />
<x-basekit-ui::input color="emerald-500" label="Custom" name="color_emerald"
    placeholder="Emerald" />

Sizes

<x-basekit-ui::input label="Small Input" name="size_sm" size="sm"
    placeholder="Small size" />
<x-basekit-ui::input label="Medium Input (Default)" name="size_md" size="md"
    placeholder="Medium size" />
<x-basekit-ui::input label="Large Input" name="size_lg" size="lg"
    placeholder="Large size" />

States

Helper text goes here 

<x-basekit-ui::input label="Default State" name="state_default"
    placeholder="Enter text..." hint="Helper text goes here" />
<x-basekit-ui::input label="Disabled Input" name="state_disabled"
    value="Disabled value" disabled />
<x-basekit-ui::input label="Readonly Input" name="state_readonly"
    value="Readonly value" readonly />
<x-basekit-ui::input label="Error State" name="state_error" value=""
    error="This field is required" />

Input Variations

Corner Hint

USD 
<x-basekit-ui::input label="Amount" name="amount" placeholder="0.00"
    corner-hint="USD" />

Underline Input

<x-basekit-ui::input label="Website" name="underline_input" placeholder="example.com"
    control-style="underline" />

Inset Label

<x-basekit-ui::input label="Company" name="inset_label" placeholder="Acme Inc."
    label-style="inset" />

Overlap Label

<x-basekit-ui::input label="Username" name="overlap_label" placeholder="jane.doe"
    label-style="overlap" />

Pill Input

<x-basekit-ui::input name="pill_input" placeholder="Search..."
    control-style="pill" />

Input Addons

https://
$
@gmail.com
$ USD 
<x-basekit-ui::input label="Website (Prefix)" name="addon_prefix"
    placeholder="example.com">
    <x-slot name="prefix">https://</x-slot>
</x-basekit-ui::input>

<x-basekit-ui::input label="Price (Prefix)" name="addon_currency"
    placeholder="0.00">
    <x-slot name="prefix">$</x-slot>
</x-basekit-ui::input>

<x-basekit-ui::input label="Email (Suffix)" name="addon_suffix"
    placeholder="username">
    <x-slot name="suffix">@gmail.com</x-slot>
</x-basekit-ui::input>

<x-basekit-ui::input label="Double Addon" name="addon_both"
    placeholder="0.00">
    <x-slot name="prefix">$</x-slot>
    <x-slot name="suffix">USD</x-slot>
</x-basekit-ui::input>

Masked Inputs

<x-basekit-ui::input label="Phone" name="mask_phone" mask="(###) ###-####"
    placeholder="(555) 123-4567" />
<x-basekit-ui::input label="Card" name="mask_card"
    mask="#### #### #### ####" placeholder="4242 4242 4242 4242" />

Inputs with Icons

<x-basekit-ui::input label="Search" name="icon_search" icon="magnifying-glass"
    placeholder="Search..." />
<x-basekit-ui::input label="Email" name="icon_email" icon="envelope"
    placeholder="you@example.com" />
<x-basekit-ui::input label="Phone" name="icon_phone" icon="phone"
    placeholder="+1 (555) 000-0000" mask="+1 (###) ###-####" />

Password Input

<x-basekit-ui::input label="Password" name="password" type="password"
    icon="lock-closed" placeholder="Password" :is-toggle-password="true" />

Number Input

<x-basekit-ui::input label="Quantity" name="qty" type="number" value="1"
    min="0" max="100" class="w-32" />

Form Selects

Variants

<x-basekit-ui::select label="Primary" name="select_variant_primary" variant="primary"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::select label="Secondary" name="select_variant_secondary" variant="secondary"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::select label="Success" name="select_variant_success" variant="success"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']"
    value="opt1" />
<x-basekit-ui::select label="Warning" name="select_variant_warning" variant="warning"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']"
    value="opt1" />
<x-basekit-ui::select label="Info" name="select_variant_info" variant="info"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::select label="Ghost" name="select_variant_ghost" variant="ghost"
    placeholder="Choose an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />

Custom Colors

<x-basekit-ui::select color="indigo-500" label="Custom" name="sel_color_indigo"
    placeholder="Indigo" :options="['a' => 'A', 'b' => 'B']" />
<x-basekit-ui::select color="pink-500" label="Custom" name="sel_color_pink"
    placeholder="Pink" :options="['a' => 'A', 'b' => 'B']" />
<x-basekit-ui::select color="emerald-500" label="Custom" name="sel_color_emerald"
    placeholder="Emerald" :options="['a' => 'A', 'b' => 'B']" />

Sizes

<x-basekit-ui::select label="Small Select" name="select_size_sm" size="sm"
    placeholder="Choose an option"
    :options="['us' => 'United States', 'ca' => 'Canada', 'mx' => 'Mexico']" />
<x-basekit-ui::select label="Medium Select (Default)" name="select_size_md" size="md"
    placeholder="Choose an option"
    :options="['us' => 'United States', 'ca' => 'Canada', 'mx' => 'Mexico']" />
<x-basekit-ui::select label="Large Select" name="select_size_lg" size="lg"
    placeholder="Choose an option"
    :options="['us' => 'United States', 'ca' => 'Canada', 'mx' => 'Mexico']" />

States

Helper text goes here 

<x-basekit-ui::select label="Default State" name="select_default"
    placeholder="Select an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']"
    hint="Helper text goes here" />
<x-basekit-ui::select label="Disabled State" name="select_disabled"
    placeholder="Select an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']"
    disabled />
<x-basekit-ui::select label="Error State" name="select_error"
    placeholder="Select an option"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']"
    error="This field is required" />

Select Variations

Corner Hint

Optional 
<x-basekit-ui::select label="Region" name="select_corner" corner-hint="Optional"
    placeholder="Select a region"
    :options="['na' => 'North America', 'eu' => 'Europe', 'apac' => 'APAC']" />

Underline

<x-basekit-ui::select label="Underline Select" name="select_underline"
    control-style="underline" placeholder="Select an option"
    :options="['basic' => 'Basic', 'pro' => 'Pro', 'team' => 'Team']" />

Inset Label

<x-basekit-ui::select label="Department" name="select_inset" label-style="inset"
    placeholder="Select department"
    :options="['product' => 'Product', 'sales' => 'Sales', 'support' => 'Support']" />

Overlap Label

<x-basekit-ui::select label="Role" name="select_overlap" label-style="overlap"
    placeholder="Select role"
    :options="['admin' => 'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer']" />

Pill Select

<x-basekit-ui::select name="select_pill" control-style="pill"
    placeholder="Select status"
    :options="['active' => 'Active', 'paused' => 'Paused', 'archived' => 'Archived']" />

Select with Icon

<x-basekit-ui::select label="Country" name="select_icon" icon="globe-alt"
    placeholder="Select a country"
    :options="['us' => 'United States', 'ca' => 'Canada', 'mx' => 'Mexico']" />

Multi Selects

Variants

<x-basekit-ui::multi-select label="Primary" name="multiselect_variant_primary"
    variant="primary" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::multi-select label="Secondary" name="multiselect_variant_secondary"
    variant="secondary" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::multi-select label="Success" name="multiselect_variant_success"
    variant="success" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::multi-select label="Warning" name="multiselect_variant_warning"
    variant="warning" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::multi-select label="Info" name="multiselect_variant_info"
    variant="info" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />
<x-basekit-ui::multi-select label="Ghost" name="multiselect_variant_ghost"
    variant="ghost" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'marketing' => 'Marketing']" />

Custom Colors

<x-basekit-ui::multi-select color="indigo-500" label="Custom"
    name="msel_color_indigo" placeholder="Indigo"
    :options="['a' => 'A', 'b' => 'B']" />
<x-basekit-ui::multi-select color="pink-500" label="Custom"
    name="msel_color_pink" placeholder="Pink"
    :options="['a' => 'A', 'b' => 'B']" />
<x-basekit-ui::multi-select color="emerald-500" label="Custom"
    name="msel_color_emerald" placeholder="Emerald"
    :options="['a' => 'A', 'b' => 'B']" />

Sizes

<x-basekit-ui::multi-select label="Small Multi Select" name="multiselect_size_sm"
    size="sm" placeholder="Select tags"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']" />
<x-basekit-ui::multi-select label="Medium Multi Select" name="multiselect_size_md"
    size="md" placeholder="Select tags"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']" />
<x-basekit-ui::multi-select label="Large Multi Select" name="multiselect_size_lg"
    size="lg" placeholder="Select tags"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']" />

States

Helper text goes here 

<x-basekit-ui::multi-select label="Default State" name="multiselect_default"
    placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']"
    hint="Helper text goes here" />
<x-basekit-ui::multi-select label="Disabled State" name="multiselect_disabled"
    disabled placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']" />
<x-basekit-ui::multi-select label="Error State" name="multiselect_error"
    error="This field is required" placeholder="Select options"
    :options="['design' => 'Design', 'dev' => 'Development', 'ops' => 'Operations']" />
<x-basekit-ui::multi-select label="Preselected" name="multiselect_tags"
    placeholder="Select tags"
    :options="[
        'design' => 'Design',
        'dev' => 'Development',
        'ops' => 'Operations',
        'sales' => 'Sales',
    ]" :value="['design', 'ops']" />

Multi Select Variations

Corner Hint

Optional 
<x-basekit-ui::multi-select label="Regions" name="multiselect_corner"
    corner-hint="Optional" placeholder="Select regions"
    :options="['na' => 'North America', 'eu' => 'Europe', 'apac' => 'APAC']" />

Underline

<x-basekit-ui::multi-select label="Underline Multi Select"
    name="multiselect_underline" control-style="underline"
    placeholder="Select tiers"
    :options="['basic' => 'Basic', 'pro' => 'Pro', 'team' => 'Team']" />

Inset Label

<x-basekit-ui::multi-select label="Teams" name="multiselect_inset"
    label-style="inset" placeholder="Select teams"
    :options="['core' => 'Core', 'infra' => 'Infrastructure', 'growth' => 'Growth']" />

Overlap Label

<x-basekit-ui::multi-select label="Roles" name="multiselect_overlap"
    label-style="overlap" placeholder="Select roles"
    :options="['admin' => 'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer']" />

Pill

<x-basekit-ui::multi-select label="Status" name="multiselect_pill"
    control-style="pill" placeholder="Select status"
    :options="['active' => 'Active', 'paused' => 'Paused', 'archived' => 'Archived']" />

With Icon

<x-basekit-ui::multi-select label="Locations" name="multiselect_icon"
    icon="map-pin" placeholder="Select locations"
    :options="['ny' => 'New York', 'sf' => 'San Francisco', 'ldn' => 'London']" />

Form Textareas

Variants

<x-basekit-ui::textarea label="Primary" name="ta_variant_primary" variant="primary"
    rows="3" placeholder="Primary variant" />
<x-basekit-ui::textarea label="Secondary" name="ta_variant_secondary" variant="secondary"
    rows="3" placeholder="Secondary variant" />
<x-basekit-ui::textarea label="Success" name="ta_variant_success" value="Valid input"
    variant="success" rows="3" />
<x-basekit-ui::textarea label="Warning" name="ta_variant_warning"
    value="Check this value" variant="warning" rows="3" />
<x-basekit-ui::textarea label="Info" name="ta_variant_info" variant="info" rows="3"
    placeholder="Info variant" />
<x-basekit-ui::textarea label="Ghost" name="ta_variant_ghost" variant="ghost" rows="3"
    placeholder="Ghost variant" />

Custom Colors

<x-basekit-ui::textarea color="indigo-500" label="Custom" name="ta_color_indigo"
    placeholder="Indigo" rows="2" />
<x-basekit-ui::textarea color="pink-500" label="Custom" name="ta_color_pink"
    placeholder="Pink" rows="2" />
<x-basekit-ui::textarea color="emerald-500" label="Custom" name="ta_color_emerald"
    placeholder="Emerald" rows="2" />

Sizes

<x-basekit-ui::textarea label="Small Textarea" name="ta_size_sm" size="sm" rows="3"
    placeholder="Small textarea" />
<x-basekit-ui::textarea label="Medium Textarea (Default)" name="ta_size_md" size="md"
    rows="4" placeholder="Medium textarea" />
<x-basekit-ui::textarea label="Large Textarea" name="ta_size_lg" size="lg" rows="6"
    placeholder="Large textarea" />

States

Helper text goes here 

<x-basekit-ui::textarea label="Default State" name="ta_default" rows="4"
    placeholder="Enter text..." hint="Helper text goes here" />
<x-basekit-ui::textarea label="Disabled Textarea" name="ta_disabled" rows="4"
    value="Disabled value" disabled />
<x-basekit-ui::textarea label="Readonly Textarea" name="ta_readonly" rows="4"
    value="Readonly value" readonly />
<x-basekit-ui::textarea label="Error State" name="ta_error" rows="4"
    error="This field is required" />

Textarea Variations

Corner Hint

Optional 
<x-basekit-ui::textarea label="Description" name="ta_corner" rows="4"
    corner-hint="Optional" placeholder="Enter description..." />

Underline Textarea

<x-basekit-ui::textarea label="Notes" name="ta_underline" rows="4"
    control-style="underline" placeholder="Enter your notes here..." />

Inset Label

<x-basekit-ui::textarea label="Company bio" name="ta_inset" rows="4"
    label-style="inset" placeholder="Tell us about your company..." />

Overlap Label

<x-basekit-ui::textarea label="Bio" name="ta_overlap" rows="4"
    label-style="overlap" placeholder="Tell us about yourself..." />

Form Checkboxes

Grouped

Checkbox variants 
<x-basekit-ui::fieldset label="Checkbox variants">
    <x-basekit-ui::checkbox name="ckx_primary" label="Primary" variant="primary"
        is-checked />
    <x-basekit-ui::checkbox name="ckx_secondary" label="Secondary"
        variant="secondary" is-checked />
    <x-basekit-ui::checkbox name="ckx_success" label="Success" variant="success"
        is-checked />
    <x-basekit-ui::checkbox name="ckx_warning" label="Warning" variant="warning"
        is-checked />
    <x-basekit-ui::checkbox name="ckx_danger" label="Danger" variant="danger"
        is-checked />
    <x-basekit-ui::checkbox name="ckx_info" label="Info" variant="info"
        is-checked />
    <x-basekit-ui::checkbox name="ckx_ghost" label="Ghost" variant="ghost"
        is-checked />
</x-basekit-ui::fieldset>

Custom Colors

<x-basekit-ui::checkbox color="indigo-500" name="ckx_color_indigo" label="Indigo"
    is-checked />
<x-basekit-ui::checkbox color="pink-500" name="ckx_color_pink" label="Pink"
    is-checked />
<x-basekit-ui::checkbox color="emerald-500" name="ckx_color_emerald" label="Emerald"
    is-checked />

Checkbox sizes

<x-basekit-ui::fieldset>
    <x-basekit-ui::checkbox name="ckx_sm" label="Small" size="sm" />
    <x-basekit-ui::checkbox name="ckx_md" label="Medium" size="md" />
    <x-basekit-ui::checkbox name="ckx_lg" label="Large" size="lg" />
</x-basekit-ui::fieldset>

Standalone States

This is a helpful hint 

<x-basekit-ui::fieldset>
    <x-basekit-ui::checkbox name="ckx_unchecked" label="Unchecked" />
    <x-basekit-ui::checkbox name="ckx_checked" label="Checked" is-checked />
    <x-basekit-ui::checkbox name="ckx_disabled" label="Disabled" disabled />
    <x-basekit-ui::checkbox name="ckx_disabled_checked" label="Disabled & Checked"
        is-checked disabled />
    <x-basekit-ui::checkbox name="ckx_error" label="With Error"
        error="This is required" />
    <x-basekit-ui::checkbox name="ckx_hint" label="With Hint"
        hint="This is a helpful hint" />
</x-basekit-ui::fieldset>

Form Radios

Grouped

Radio variants 
<x-basekit-ui::fieldset label="Radio variants">
    <x-basekit-ui::radio name="radio_variants" value="primary" label="Primary"
        variant="primary" is-checked />
    <x-basekit-ui::radio name="radio_variants" value="secondary" label="Secondary"
        variant="secondary" />
    <x-basekit-ui::radio name="radio_variants" value="success" label="Success"
        variant="success" />
    <x-basekit-ui::radio name="radio_variants" value="warning" label="Warning"
        variant="warning" />
    <x-basekit-ui::radio name="radio_variants" value="danger" label="Danger"
        variant="danger" />
    <x-basekit-ui::radio name="radio_variants" value="info" label="Info"
        variant="info" />
    <x-basekit-ui::radio name="radio_variants" value="ghost" label="Ghost"
        variant="ghost" />
</x-basekit-ui::fieldset>

Custom Colors

<x-basekit-ui::radio color="indigo-500" name="radio_color" value="indigo"
    label="Indigo" is-checked />
<x-basekit-ui::radio color="pink-500" name="radio_color" value="pink"
    label="Pink" />
<x-basekit-ui::radio color="emerald-500" name="radio_color" value="emerald"
    label="Emerald" />

Radio sizes

<x-basekit-ui::fieldset>
    <x-basekit-ui::radio name="radio_sizes" value="sm" label="Small" size="sm" />
    <x-basekit-ui::radio name="radio_sizes" value="md" label="Medium" size="md" />
    <x-basekit-ui::radio name="radio_sizes" value="lg" label="Large" size="lg" />
</x-basekit-ui::fieldset>

Standalone States

Select the option that applies 

<x-basekit-ui::fieldset>
    <x-basekit-ui::radio name="radio_group" value="unchecked" label="Unchecked" />
    <x-basekit-ui::radio name="radio_group" value="checked" label="Checked"
        is-checked />
    <x-basekit-ui::radio name="radio_group" value="disabled" label="Disabled"
        disabled />
    <x-basekit-ui::radio name="radio_group_disabled" value="checked_disabled"
        label="Disabled & Checked" is-checked disabled />
    <x-basekit-ui::radio name="radio_group" value="error" label="With Error"
        error="Please select an option" />
    <x-basekit-ui::radio name="radio_group" value="hint" label="With Hint"
        hint="Select the option that applies" />
</x-basekit-ui::fieldset>

Form Groups

Radio Group

Billing cycle

Choose how often you are billed 

<x-basekit-ui::fieldset label="Billing cycle"
    hint="Choose how often you are billed">
    <x-basekit-ui::radio name="fieldset_billing" value="monthly" label="Monthly"
        is-checked />
    <x-basekit-ui::radio name="fieldset_billing" value="yearly"
        label="Yearly (save 20%)" />
    <x-basekit-ui::radio name="fieldset_billing" value="lifetime" label="Lifetime" />
</x-basekit-ui::fieldset>

Checkbox Group with Error

Topics 
<x-basekit-ui::fieldset label="Topics"
    error="Please select at least one topic">
    <x-basekit-ui::checkbox name="fieldset_topics" value="security" label="Security" />
    <x-basekit-ui::checkbox name="fieldset_topics" value="releases" label="Releases" />
    <x-basekit-ui::checkbox name="fieldset_topics" value="product"
        label="Product news" />
</x-basekit-ui::fieldset>

Toggle Group

Notifications

Choose which emails you receive 

<x-basekit-ui::fieldset label="Notifications"
    hint="Choose which emails you receive">
    <x-basekit-ui::toggle name="fieldset_marketing" label="Marketing emails" />
    <x-basekit-ui::toggle name="fieldset_security" label="Security alerts"
        is-checked />
    <x-basekit-ui::toggle name="fieldset_product" label="Product news"
        is-checked />
</x-basekit-ui::fieldset>

Form Toggles

Variants

<x-basekit-ui::fieldset>
    <x-basekit-ui::toggle name="toggle_primary" label="Primary" variant="primary"
        is-checked />
    <x-basekit-ui::toggle name="toggle_secondary" label="Secondary"
        variant="secondary" is-checked />
    <x-basekit-ui::toggle name="toggle_success" label="Success" variant="success"
        is-checked />
    <x-basekit-ui::toggle name="toggle_warning" label="Warning" variant="warning"
        is-checked />
    <x-basekit-ui::toggle name="toggle_danger" label="Danger" variant="danger"
        is-checked />
    <x-basekit-ui::toggle name="toggle_info" label="Info" variant="info"
        is-checked />
    <x-basekit-ui::toggle name="toggle_ghost" label="Ghost" variant="ghost"
        is-checked />
</x-basekit-ui::fieldset>

Custom Colors

<x-basekit-ui::fieldset>
    <x-basekit-ui::toggle color="indigo-500" name="toggle_color_indigo"
        label="Indigo" is-checked />
    <x-basekit-ui::toggle color="pink-500" name="toggle_color_pink"
        label="Pink" is-checked />
    <x-basekit-ui::toggle color="emerald-500" name="toggle_color_emerald"
        label="Emerald" is-checked />
</x-basekit-ui::fieldset>

Sizes

<x-basekit-ui::fieldset>
    <x-basekit-ui::toggle name="toggle_sm" label="Small" size="sm" />
    <x-basekit-ui::toggle name="toggle_md" label="Medium" size="md" />
    <x-basekit-ui::toggle name="toggle_lg" label="Large" size="lg" />
</x-basekit-ui::fieldset>

States

Enable to activate this feature 

<x-basekit-ui::fieldset>
    <x-basekit-ui::toggle name="toggle_off" label="Off" />
    <x-basekit-ui::toggle name="toggle_on" label="On" is-checked />
    <x-basekit-ui::toggle name="toggle_disabled" label="Disabled" disabled />
    <x-basekit-ui::toggle name="toggle_disabled_on" label="Disabled & On"
        is-checked disabled />
    <x-basekit-ui::toggle name="toggle_error" label="With Error"
        error="This setting is required" />
    <x-basekit-ui::toggle name="toggle_hint" label="With Hint"
        hint="Enable to activate this feature" />
</x-basekit-ui::fieldset>

Alerts

Variants

Primary · Key update
This is a primary alert to highlight key information.
Secondary · Neutral note
This is a neutral alert for supporting context.
Info · Information
This is an informational alert to highlight something important.
Success · Saved
Your changes have been saved successfully.
Ghost · Minimal notice
Just a lightweight note without a filled background.
<x-basekit-ui::alert variant="primary" title="Primary · Key update">This is a primary alert
    to highlight key information.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="secondary" title="Secondary · Neutral note">This is a neutral
    alert for supporting context.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="info" title="Info · Information">This is an informational alert
    to highlight something important.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="success" title="Success · Saved">Your changes have been saved
    successfully.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="warning" title="Warning · Subscription expiring">Your
    subscription is about to expire.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="danger" title="Danger · Request failed">Something went wrong
    while processing your request.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="ghost" title="Ghost · Minimal notice">Just a lightweight note
    without a filled background.</x-basekit-ui::alert>

Custom Colors

Custom
Indigo content here.
Custom
Pink content here.
Custom
Emerald content here.
<x-basekit-ui::alert color="indigo-500" title="Custom"
    :is-dismissible="true">Indigo content here.</x-basekit-ui::alert>
<x-basekit-ui::alert color="pink-500" title="Custom"
    :is-dismissible="true">Pink content here.</x-basekit-ui::alert>
<x-basekit-ui::alert color="emerald-500" title="Custom"
    :is-dismissible="true">Emerald content here.</x-basekit-ui::alert>

Custom Icon

Security Updated
Your account security settings have been updated.
Custom SVG Icon
This alert uses a custom SVG checkmark icon from the icon slot.
<x-basekit-ui::alert variant="success" icon="shield-check"
    title="Security Updated">Your account security settings have been
    updated.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="danger" icon="lock-closed"
    title="Access Restricted">This resource is not accessible with your
    current permissions.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="success" title="Custom SVG Icon">
    <x-slot:icon>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
            viewBox="0 0 24 24">
            <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
        </svg>
    </x-slot:icon>
    This alert uses a custom SVG checkmark icon from the icon slot.
</x-basekit-ui::alert>

Dismissible

Announcement
Check out our new features released today.
<x-basekit-ui::alert variant="info" title="Announcement"
    :is-dismissible="true">Check out our new features released
    today.</x-basekit-ui::alert>
<x-basekit-ui::alert variant="warning" title="Temporary Notice"
    :is-dismissible="true">Scheduled maintenance happening
    tonight.</x-basekit-ui::alert>

With Actions

Update Available
A new version is available for download.
<x-basekit-ui::alert variant="info" title="Update Available">
    A new version is available for download.
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="primary">Update Now</x-basekit-ui::button>
        <x-basekit-ui::button size="sm"
            variant="ghost">Later</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::alert>
<x-basekit-ui::alert variant="danger" title="Confirm Action"
    :is-dismissible="true">
    This action cannot be undone.
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="danger">Confirm</x-basekit-ui::button>
        <x-basekit-ui::button size="sm"
            variant="secondary">Cancel</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::alert>

Empty State

Variants

Primary · No projects

Create your first project.

Secondary · No activity

Your recent activity will appear here.

Success · All caught up

Everything is running smoothly.

Info · No messages

When you receive messages, they will show up here.

Warning · No backups

Add a backup schedule.

Danger · Sync failed

Try again to recover.

Ghost · Nothing here yet

Start by adding some content.

<x-basekit-ui::empty-state variant="primary" size="sm"
    title="Primary · No projects" description="Create your first project."
    icon="folder">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="primary">Create</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="secondary" size="sm"
    title="Secondary · No activity"
    description="Your recent activity will appear here." icon="clock">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="secondary">Refresh</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="success" size="sm"
    title="Success · All caught up"
    description="Everything is running smoothly." icon="check-circle">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="success">View logs</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="info" size="sm"
    title="Info · No messages"
    description="When you receive messages, they will show up here."
    icon="chat-bubble-left-right">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="info">Open inbox</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="warning" size="sm"
    title="Warning · No backups" description="Add a backup schedule."
    icon="exclamation-triangle">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="warning">Add schedule</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="danger" size="sm"
    title="Danger · Sync failed" description="Try again to recover."
    icon="x-circle">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="danger">Retry</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="ghost" size="sm"
    title="Ghost · Nothing here yet"
    description="Start by adding some content." icon="eye-slash">
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="ghost">Dismiss</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

Custom Colors

Indigo

Indigo themed empty state

Pink

Pink themed empty state

Emerald

Emerald themed empty state

<x-basekit-ui::empty-state color="indigo-500" size="sm" title="Indigo"
    description="Indigo themed empty state" />
<x-basekit-ui::empty-state color="pink-500" size="sm" title="Pink"
    description="Pink themed empty state" />
<x-basekit-ui::empty-state color="emerald-500" size="sm" title="Emerald"
    description="Emerald themed empty state" />

Custom Icon

Star icon

A custom star SVG passed via the icon slot.

Upload icon

A custom cloud upload SVG passed via the icon slot.

<x-basekit-ui::empty-state variant="primary" size="sm" title="Star icon"
    description="A custom star SVG passed via the icon slot.">
    <x-slot:icon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
            fill="currentColor">
            <path
                d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
        </svg>
    </x-slot:icon>
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="primary">Learn more</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

<x-basekit-ui::empty-state variant="secondary" size="sm" title="Upload icon"
    description="A custom cloud upload SVG passed via the icon slot.">
    <x-slot:icon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
            fill="currentColor">
            <path
                d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" />
        </svg>
    </x-slot:icon>
    <x-slot:actions>
        <x-basekit-ui::button size="sm"
            variant="secondary">Upload
            file</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::empty-state>

Sizes

Small empty state

Compact layout for tight spaces.

Medium empty state

Balanced layout for most pages.

Large empty state

Roomier layout for full pages.

<x-basekit-ui::empty-state size="sm" title="Small empty state"
    description="Compact layout for tight spaces." icon="inbox" />

<x-basekit-ui::empty-state size="md" title="Medium empty state"
    description="Balanced layout for most pages." icon="inbox" />

<x-basekit-ui::empty-state size="lg" title="Large empty state"
    description="Roomier layout for full pages." icon="inbox" />

Spinners

Sizes

XS
SM
MD
LG
XL 
<x-basekit-ui::spinner size="xs" variant="secondary" />
<x-basekit-ui::spinner size="sm" variant="secondary" />
<x-basekit-ui::spinner size="md" variant="secondary" />
<x-basekit-ui::spinner size="lg" variant="secondary" />
<x-basekit-ui::spinner size="xl" variant="secondary" />

Variants

Primary
Secondary
Success
Warning
Danger
Info
Ghost
White 
<x-basekit-ui::spinner size="md" variant="primary" />
<x-basekit-ui::spinner size="md" variant="secondary" />
<x-basekit-ui::spinner size="md" variant="success" />
<x-basekit-ui::spinner size="md" variant="warning" />
<x-basekit-ui::spinner size="md" variant="danger" />
<x-basekit-ui::spinner size="md" variant="info" />
<x-basekit-ui::spinner size="md" variant="ghost" />
<x-basekit-ui::spinner size="md" variant="white" />

Custom Colors

<x-basekit-ui::spinner color="indigo-500" />
<x-basekit-ui::spinner color="pink-500" />
<x-basekit-ui::spinner color="emerald-500" />

With Label

<x-basekit-ui::spinner size="md" variant="primary"
    label="Loading data..." />
<x-basekit-ui::spinner size="sm"
    variant="secondary">Syncing
    changes...</x-basekit-ui::spinner>

Progress Bars

Variants

Primary 20%
Secondary 35%
Info 55%
Success 75%
Warning 90%
Danger 100%
Ghost 45%
White 65% 
<x-basekit-ui::progress value="20" variant="primary" label="Primary"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="35" variant="secondary"
    label="Secondary" :is-show-percentage="true" />
<x-basekit-ui::progress value="55" variant="info" label="Info"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="75" variant="success" label="Success"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="90" variant="warning" label="Warning"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="100" variant="danger" label="Danger"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="45" variant="ghost" label="Ghost"
    :is-show-percentage="true" />
<x-basekit-ui::progress value="65" variant="white" label="White"
    :is-show-percentage="true"
    class="[--progress-bg:var(--color-slate-500)] [--progress-label-color:var(--color-slate-100)]" />

Custom Colors

Indigo 60%
Pink 60%
Emerald 60% 
<x-basekit-ui::progress color="indigo-500" value="60" label="Indigo"
    :is-show-percentage="true" />
<x-basekit-ui::progress color="pink-500" value="60" label="Pink"
    :is-show-percentage="true" />
<x-basekit-ui::progress color="emerald-500" value="60" label="Emerald"
    :is-show-percentage="true" />

Sizes

SM 40%
MD 40%
LG 40% 
<x-basekit-ui::progress value="40" size="sm" variant="primary"
    label="SM" :is-show-percentage="true" />
<x-basekit-ui::progress value="40" size="md" variant="primary"
    label="MD" :is-show-percentage="true" />
<x-basekit-ui::progress value="40" size="lg" variant="primary"
    label="LG" :is-show-percentage="true" />

Skeletons

Variants

Circle sizes

SM
MD
LG

Default (line blocks)

SM
MD
LG

Text variant

SM
MD
LG 
<x-basekit-ui::skeleton variant="circle" size="sm" />
<x-basekit-ui::skeleton variant="circle" size="md" />
<x-basekit-ui::skeleton variant="circle" size="lg" />

<x-basekit-ui::skeleton size="sm" class="w-1/3" />
<x-basekit-ui::skeleton size="md" class="w-2/3" />
<x-basekit-ui::skeleton size="lg" class="w-full" />

<x-basekit-ui::skeleton variant="text" size="sm"
    lines="1" />
<x-basekit-ui::skeleton variant="text" size="md"
    lines="1" />
<x-basekit-ui::skeleton variant="text" size="lg"
    lines="1" />

Tooltips

Positions

<x-basekit-ui::tooltip position="left" content="Left position">
    <x-basekit-ui::button size="sm"
        variant="secondary">Left</x-basekit-ui::button>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip position="top" content="Top position">
    <x-basekit-ui::button size="sm"
        variant="secondary">Top</x-basekit-ui::button>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip position="bottom"
    content="Bottom position">
    <x-basekit-ui::button size="sm"
        variant="secondary">Bottom</x-basekit-ui::button>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip position="right" content="Right position">
    <x-basekit-ui::button size="sm"
        variant="secondary">Right</x-basekit-ui::button>
</x-basekit-ui::tooltip>

Triggers

Hover Link
Hover Text 
<x-basekit-ui::tooltip content="This is a button">
    <x-basekit-ui::button size="sm">Hover
        Button</x-basekit-ui::button>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip content="More information">
    <a href="#"
        class="text-primary-600 hover:text-primary-700 underline">
        Hover Link
    </a>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip content="Helpful context">
    <span
        class="cursor-help border-b border-dashed border-slate-400">
        Hover Text
    </span>
</x-basekit-ui::tooltip>

<x-basekit-ui::tooltip content="Information icon">
    <x-heroicon-o-information-circle
        class="w-5 h-5 text-slate-500 cursor-help" />
</x-basekit-ui::tooltip>

Custom Content

<x-basekit-ui::tooltip position="right">
    <x-basekit-ui::button size="sm"
        variant="ghost">Custom
        Content</x-basekit-ui::button>
    <x-slot:content>
        <div class="text-xs">
            <p class="font-semibold">Tooltip Title</p>
            <p class="mt-1">This is custom content inside the
                tooltip.</p>
        </div>
    </x-slot:content>
</x-basekit-ui::tooltip>

Toasts

Variants

Primary update
A key announcement for all users.
Secondary notice
Background sync completed successfully.
Changes saved
Your settings have been updated.
New update available
Version 2.0 is ready to install.
Ghost note
This is a lightweight, low-emphasis toast. 
<x-basekit-ui::toast variant="primary" title="Primary update"
    message="A key announcement for all users." :duration="0" />
<x-basekit-ui::toast variant="secondary" title="Secondary notice"
    message="Background sync completed successfully." :duration="0" />
<x-basekit-ui::toast variant="success" title="Changes saved"
    message="Your settings have been updated." :duration="0" />
<x-basekit-ui::toast variant="info" title="New update available"
    message="Version 2.0 is ready to install." :duration="0" />
<x-basekit-ui::toast variant="warning" title="Storage almost full"
    message="You're using 95% of your storage." :duration="0" />
<x-basekit-ui::toast variant="danger" title="Connection failed"
    message="Unable to reach the server." :duration="0" />
<x-basekit-ui::toast variant="ghost" title="Ghost note"
    message="This is a lightweight, low-emphasis toast."
    :duration="0" />

Custom Colors

Indigo
Indigo colored toast
Pink
Pink colored toast
Emerald
Emerald colored toast 
<x-basekit-ui::toast color="indigo-500" title="Indigo"
    message="Indigo colored toast" :duration="0" />
<x-basekit-ui::toast color="pink-500" title="Pink"
    message="Pink colored toast" :duration="0" />
<x-basekit-ui::toast color="emerald-500" title="Emerald"
    message="Emerald colored toast" :duration="0" />

Custom Icon

Upload complete
3 files uploaded successfully.
New message
You have a message from Sarah.
Milestone reached
You've completed 100 tasks! 
<x-basekit-ui::toast variant="success" title="Upload complete"
    message="3 files uploaded successfully." icon="cloud-arrow-up"
    :duration="0" />
<x-basekit-ui::toast variant="info" title="New message"
    message="You have a message from Sarah." icon="envelope"
    :duration="0" />

<x-basekit-ui::toast variant="success" title="Milestone reached"
    message="You've completed 100 tasks!" :duration="0">
    <x-slot:icon>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor">
            <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
    </x-slot:icon>
</x-basekit-ui::toast>

Custom Content

Changes published
Your post is now live. View post 
<x-basekit-ui::toast variant="success" title="Changes published"
    :duration="0">
    Your post is now live. <a href="#"
        class="underline hover:no-underline font-medium">View
        post</a>
</x-basekit-ui::toast>

With Actions

Update available
Version 2.0 is ready to install. 
<x-basekit-ui::toast variant="warning" title="Connection lost"
    message="Reconnecting to server..." :duration="0">
    <x-slot:actions>
        <x-basekit-ui::button size="sm" variant="ghost"
            class="text-xs py-1 px-2">Retry</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::toast>

<x-basekit-ui::toast variant="info" title="Update available"
    message="Version 2.0 is ready to install." :duration="0">
    <x-slot:actions>
        <x-basekit-ui::button size="sm" variant="primary"
            class="text-xs py-1 px-2">Install
            now</x-basekit-ui::button>
        <x-basekit-ui::button size="sm" variant="ghost"
            class="text-xs py-1 px-2">Later</x-basekit-ui::button>
    </x-slot:actions>
</x-basekit-ui::toast>

Container

Sizes

size="sm"

size="md"

size="lg"

size="xl"

size="full"

<x-basekit-ui::container size="sm">sm</x-basekit-ui::container>
<x-basekit-ui::container size="md">md</x-basekit-ui::container>
<x-basekit-ui::container size="lg">lg</x-basekit-ui::container>
<x-basekit-ui::container size="xl">xl</x-basekit-ui::container>
<x-basekit-ui::container size="full">full</x-basekit-ui::container>

Not Centered

size="sm" :is-centered="false"

<x-basekit-ui::container size="sm" :is-centered="false">
    Not centered content
</x-basekit-ui::container>

Divider

Variants

solid (default)

dashed

dotted

<x-basekit-ui::divider variant="solid" />
<x-basekit-ui::divider variant="dashed" />
<x-basekit-ui::divider variant="dotted" />

Tones

light

default

dark

<x-basekit-ui::divider tone="light" />
<x-basekit-ui::divider tone="default" />
<x-basekit-ui::divider tone="dark" />

With Label

<x-basekit-ui::divider label="Or continue with" />

Vertical

Left Right 
<div class="flex h-16 items-center gap-4">
    <span>Left</span>
    <x-basekit-ui::divider orientation="vertical" />
    <span>Right</span>
</div>

Stack

Vertical (default)

Item 1
Item 2
Item 3
<x-basekit-ui::stack direction="vertical" spacing="md">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</x-basekit-ui::stack>

Horizontal

Item 1
Item 2
Item 3
<x-basekit-ui::stack direction="horizontal" spacing="md">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</x-basekit-ui::stack>

Spacing

spacing="xs"

A
B
C

spacing="sm"

A
B
C

spacing="md"

A
B
C

spacing="lg"

A
B
C

spacing="xl"

A
B
C
<x-basekit-ui::stack direction="horizontal" spacing="xs">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" spacing="sm">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" spacing="lg">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" spacing="xl">...</x-basekit-ui::stack>

Alignment (align)

align="start"

A
B
C

align="center"

A
B
C

align="end"

A
B
C

align="stretch"

A
B
C
<x-basekit-ui::stack direction="horizontal" align="start" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" align="center" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" align="end" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" align="stretch" spacing="md">...</x-basekit-ui::stack>

Justify

justify="start"

A
B
C

justify="center"

A
B
C

justify="end"

A
B
C

justify="between"

A
B
C

justify="around"

A
B
C
<x-basekit-ui::stack direction="horizontal" justify="start" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" justify="center" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" justify="end" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" justify="between" spacing="md">...</x-basekit-ui::stack>
<x-basekit-ui::stack direction="horizontal" justify="around" spacing="md">...</x-basekit-ui::stack>

Grid

Column Counts

cols="2"

1
2

cols="3"

1
2
3

cols="4"

1
2
3
4

cols="6"

1
2
3
4
5
6
<x-basekit-ui::grid :cols="2" gap="sm" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid :cols="3" gap="sm" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid :cols="4" gap="sm" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid :cols="6" gap="sm" :responsive="false">...</x-basekit-ui::grid>

Gap Sizes

gap="xs"

A
B
C

gap="sm"

A
B
C

gap="md"

A
B
C

gap="lg"

A
B
C

gap="xl"

A
B
C
<x-basekit-ui::grid cols="3" gap="xs" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid cols="3" gap="sm" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid cols="3" gap="md" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid cols="3" gap="lg" :responsive="false">...</x-basekit-ui::grid>
<x-basekit-ui::grid cols="3" gap="xl" :responsive="false">...</x-basekit-ui::grid>

Responsive

Responsive Grid

Resize the preview or use the preset buttons to test responsive behavior.

•
1
2
3
4
<x-basekit-ui::grid cols="4" gap="md" :responsive="true">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</x-basekit-ui::grid>

Card

Default

Card Header

Card body content with header and footer slots.

<x-basekit-ui::card>
    <x-slot:header class="font-semibold">Card Header</x-slot:header>
    <p class="text-slate-600">Card body content with header and footer slots.</p>
    <x-slot:footer>
        <x-basekit-ui::button size="sm" variant="primary">Action</x-basekit-ui::button>
    </x-slot:footer>
</x-basekit-ui::card>

Bordered Variant

Bordered Card

Card with bordered variant styling.

<x-basekit-ui::card variant="bordered">
    <x-slot:header class="font-semibold">Bordered Card</x-slot:header>
    <p class="text-slate-600">Card with bordered variant styling.</p>
</x-basekit-ui::card>

Without Body Padding

Card Image
Full-bleed body content.
<x-basekit-ui::card :is-padded="false">
    <img src="https://placehold.co/400" alt="Card Image" class="w-full object-cover h-56">
    <div class="bg-slate-100 px-4 py-3 text-sm text-slate-700">Full-bleed body content.</div>
    <div class="px-4 py-3">
        <x-basekit-ui::button size="sm" variant="secondary">View</x-basekit-ui::button>
    </div>
</x-basekit-ui::card>

Transparent Variant

Transparent Card

Card with transparent background — inherits the parent background.

<x-basekit-ui::card variant="transparent">
    <x-slot:header class="font-semibold text-white">Transparent Card</x-slot:header>
    <p class="text-indigo-100">Card with transparent background — inherits the parent background.</p>
</x-basekit-ui::card>

Badge

Variants

Primary Secondary Success Warning Danger Info Ghost 
<x-basekit-ui::badge variant="primary">Primary</x-basekit-ui::badge>
<x-basekit-ui::badge variant="secondary">Secondary</x-basekit-ui::badge>
<x-basekit-ui::badge variant="success">Success</x-basekit-ui::badge>
<x-basekit-ui::badge variant="warning">Warning</x-basekit-ui::badge>
<x-basekit-ui::badge variant="danger">Danger</x-basekit-ui::badge>
<x-basekit-ui::badge variant="info">Info</x-basekit-ui::badge>
<x-basekit-ui::badge variant="ghost">Ghost</x-basekit-ui::badge>

Custom Colors

Indigo Pink Emerald 
<x-basekit-ui::badge color="indigo-500">Indigo</x-basekit-ui::badge>
<x-basekit-ui::badge color="pink-500">Pink</x-basekit-ui::badge>
<x-basekit-ui::badge color="emerald-500">Emerald</x-basekit-ui::badge>

Sizes

SM MD LG 
<x-basekit-ui::badge variant="primary" size="sm">SM</x-basekit-ui::badge>
<x-basekit-ui::badge variant="primary" size="md">MD</x-basekit-ui::badge>
<x-basekit-ui::badge variant="primary" size="lg">LG</x-basekit-ui::badge>

With Icon

Verified Review Blocked 
<x-basekit-ui::badge variant="success" icon="check">Verified</x-basekit-ui::badge>
<x-basekit-ui::badge variant="warning" icon="exclamation-triangle">Review</x-basekit-ui::badge>
<x-basekit-ui::badge variant="danger" icon="x-mark">Blocked</x-basekit-ui::badge>

Dot Indicator

Primary Success Warning Danger 
<x-basekit-ui::badge variant="primary" :is-dot="true">Primary</x-basekit-ui::badge>
<x-basekit-ui::badge variant="success" :is-dot="true">Success</x-basekit-ui::badge>
<x-basekit-ui::badge variant="warning" :is-dot="true">Warning</x-basekit-ui::badge>
<x-basekit-ui::badge variant="danger" :is-dot="true">Danger</x-basekit-ui::badge>

Avatar

Sizes

JD
sm
JD
md
JD
lg
JD
xl 
<x-basekit-ui::avatar initials="JD" size="sm" />
<x-basekit-ui::avatar initials="JD" size="md" />
<x-basekit-ui::avatar initials="JD" size="lg" />
<x-basekit-ui::avatar initials="JD" size="xl" />

Shapes

JD
round
JD
soft
JD
square 
<x-basekit-ui::avatar initials="JD" shape="round" />
<x-basekit-ui::avatar initials="JD" shape="soft" />
<x-basekit-ui::avatar initials="JD" shape="square" />

Status Indicators

JD
online
JD
away
JD
busy
JD
offline 
<x-basekit-ui::avatar initials="JD" status="online" />
<x-basekit-ui::avatar initials="JD" status="away" />
<x-basekit-ui::avatar initials="JD" status="busy" />
<x-basekit-ui::avatar initials="JD" status="offline" />

Image And Fallback

Jane Doe
Image
John Smith
Fallback 
<x-basekit-ui::avatar src="https://i.pravatar.cc/80?img=1" alt="Jane Doe" initials="JD" />
<x-basekit-ui::avatar src="/broken-image.jpg" alt="John Smith" initials="JS" />

Table

Types

basic

Name Role Status
Jane Doe Admin Active
John Smith Editor Active
Sarah Brown Viewer Inactive 
<x-basekit-ui::table type="basic" :columns="$tableColumns" :rows="$tableRows" />

dropdown (responsive column visibility)

Dropdown Table Preview

Resize to see hidden columns and the column menu behavior

•
Name Role Status
Jane Doe Admin Active
John Smith Editor Active
Sarah Brown Viewer Inactive 
<x-basekit-ui::styleguide.responsive-preview title="Dropdown Table Preview"
    subtitle="Resize to see hidden columns and the column menu behavior"
    small-label="Mobile columns" large-label="Desktop columns" :breakpoint="768"
    :default-width="520">
    <x-basekit-ui::table type="dropdown" :columns="$tableColumns" :rows="$tableRows" />
</x-basekit-ui::styleguide.responsive-preview>

stacked (responsive detail rows)

Stacked Table Preview

Resize to see compact stacked behavior on small widths

•
Name Role Status Actions
Jane Doe Admin Active
Role: Admin
Status: Active
John Smith Editor Active
Role: Editor
Status: Active
Sarah Brown Viewer Inactive
Role: Viewer
Status: Inactive 
<x-basekit-ui::styleguide.responsive-preview title="Stacked Table Preview"
    subtitle="Resize to see compact stacked behavior on small widths" small-label="Stacked mode"
    large-label="Desktop table" :breakpoint="768" :default-width="520">
    <x-basekit-ui::table type="stacked" :columns="$tableColumns" :rows="$tableRows"
        primary-column="name" />
</x-basekit-ui::styleguide.responsive-preview>

Variants

variant="default"

Name Role
Jane Doe Admin

variant="bordered"

Name Role
Jane Doe Admin

variant="striped"

Name Role
Jane Doe Admin

variant="hoverable"

Name Role
Jane Doe Admin 
<x-basekit-ui::table type="basic" variant="default"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />
<x-basekit-ui::table type="basic" variant="bordered"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />
<x-basekit-ui::table type="basic" variant="striped"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />
<x-basekit-ui::table type="basic" variant="hoverable"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />

Sizes

size="sm"

Name Role
Jane Doe Admin

size="md"

Name Role
Jane Doe Admin

size="lg"

Name Role
Jane Doe Admin 
<x-basekit-ui::table type="basic" size="sm"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />
<x-basekit-ui::table type="basic" size="md"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />
<x-basekit-ui::table type="basic" size="lg"
    :columns="[['key' => 'name', 'label' => 'Name'], ['key' => 'role', 'label' => 'Role']]"
    :rows="[['name' => 'Jane Doe', 'role' => 'Admin']]" />

Empty State

Name Role Status
No records found. 
<x-basekit-ui::table type="basic" :columns="$tableColumns" :rows="[]" empty="No records found." />

List

Variants

default

  • First item
  • Second item
  • Third item

divided

  • First item
  • Second item
  • Third item

bordered

  • First item
  • Second item
  • Third item
<x-basekit-ui::list variant="default" :items="['First item', 'Second item', 'Third item']" />
<x-basekit-ui::list variant="divided" :items="['First item', 'Second item', 'Third item']" />
<x-basekit-ui::list variant="bordered" :items="['First item', 'Second item', 'Third item']" />

Markers

disc

  • Alpha
  • Beta
  • Gamma

circle

  • Alpha
  • Beta
  • Gamma

square

  • Alpha
  • Beta
  • Gamma

decimal

  1. Alpha
  2. Beta
  3. Gamma

none

  • Alpha
  • Beta
  • Gamma
<x-basekit-ui::list :marker="'disc'" :items="['Alpha', 'Beta', 'Gamma']" />
<x-basekit-ui::list :marker="'circle'" :items="['Alpha', 'Beta', 'Gamma']" />
<x-basekit-ui::list :marker="'square'" :items="['Alpha', 'Beta', 'Gamma']" />
<x-basekit-ui::list :ordered="true" :marker="'decimal'" :items="['Alpha', 'Beta', 'Gamma']" />
<x-basekit-ui::list :marker="'none'" :items="['Alpha', 'Beta', 'Gamma']" />

Description List

Variants

default

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components

horizontal

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components

striped

Framework
Laravel
Styling
Tailwind CSS 4
Templates
Blade Components
<x-basekit-ui::description-list :items="$descriptionListItems" />
<x-basekit-ui::description-list variant="horizontal" :items="$descriptionListItems" />
<x-basekit-ui::description-list variant="striped" :items="$descriptionListItems" />

Gap Sizes

gap="sm"

Key
Value

gap="md"

Key
Value

gap="lg"

Key
Value
<x-basekit-ui::description-list gap="sm" :items="[['term' => 'Key', 'description' => 'Value']]" />
<x-basekit-ui::description-list gap="md" :items="[['term' => 'Key', 'description' => 'Value']]" />
<x-basekit-ui::description-list gap="lg" :items="[['term' => 'Key', 'description' => 'Value']]" />

Stat

Trend Directions

Revenue
$12,345
+12%
Refunds
$1,200
-4%
Visitors
8,430
0% 
<x-basekit-ui::stat label="Revenue" value="$12,345" change="+12%" trend="up" />
<x-basekit-ui::stat label="Refunds" value="$1,200" change="-4%" trend="down" />
<x-basekit-ui::stat label="Visitors" value="8,430" change="0%" trend="neutral" />

With Icon

Orders
342
+8%
Users
1,847
+23% 
<x-basekit-ui::stat label="Orders" value="342" change="+8%" trend="up" icon="chart-bar" />
<x-basekit-ui::stat label="Users" value="1,847" change="+23%" trend="up" icon="users" />

Without Change

Total Items
4,096 
<x-basekit-ui::stat label="Total Items" value="4,096" />

Accordion

Variants

Default

Basekit Laravel UI is a set of reusable, customizable Blade components styled with Tailwind CSS.
You can install the package via Composer using `composer require basekit-laravel/basekit-laravel-ui`.
Yes! The components are built with Tailwind CSS, so you can easily override styles. 
<x-basekit-ui::accordion :items="[
    [
        'title' => 'What is Basekit Laravel UI?',
        'content' => 'Basekit Laravel UI is a set of reusable, customizable Blade components styled with Tailwind CSS.',
        'value' => 'item-1',
    ],
    [
        'title' => 'How do I install it?',
        'content' => 'You can install the package via Composer using `composer require basekit-laravel/basekit-laravel-ui`.',
        'value' => 'item-2',
    ],
    [
        'title' => 'Can I customize the styles?',
        'content' => 'Yes! The components are built with Tailwind CSS, so you can easily override styles.',
        'value' => 'item-3',
    ],
]" active="item-1" />

Bordered

Includes buttons, forms, modals, dropdowns, tables, and more. All components are fully accessible.
Optimized for performance with minimal CSS and JavaScript footprint.
Comprehensive documentation with usage examples for every component. 
<x-basekit-ui::accordion variant="bordered" :items="[
    [
        'title' => 'Features',
        'content' => 'Includes buttons, forms, modals, dropdowns, tables, and more. All components are fully accessible.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Performance',
        'content' => 'Optimized for performance with minimal CSS and JavaScript footprint.',
        'value' => 'item-2',
    ],
    [
        'title' => 'Documentation',
        'content' => 'Comprehensive documentation with usage examples for every component.',
        'value' => 'item-3',
    ],
]" />

Flush

Start by installing the package and publishing the config file.
Customize colors, fonts, and spacing using Tailwind CSS configuration.
Learn about slots, variants, and custom component composition. 
<x-basekit-ui::accordion variant="flush" :items="[
    [
        'title' => 'Getting Started',
        'content' => 'Start by installing the package and publishing the config file.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Theming',
        'content' => 'Customize colors, fonts, and spacing using Tailwind CSS configuration.',
        'value' => 'item-2',
    ],
    [
        'title' => 'Advanced Usage',
        'content' => 'Learn about slots, variants, and custom component composition.',
        'value' => 'item-3',
    ],
]" active="item-1" />

Separated

Over 30 components including forms, navigation, feedback, and layout elements.
All components follow WAI-ARIA best practices and are keyboard navigable. 
<x-basekit-ui::accordion variant="separated" :items="[
    [
        'title' => 'Components',
        'content' => 'Over 30 components including forms, navigation, feedback, and layout elements.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Accessibility',
        'content' => 'All components follow WAI-ARIA best practices and are keyboard navigable.',
        'value' => 'item-2',
    ],
]" />

Sizes

SM

This is a compact accordion with smaller padding and font sizes.
Perfect for tight spaces or when you need to conserve vertical space. 
<x-basekit-ui::accordion size="sm" :items="[
    [
        'title' => 'Question 1',
        'content' => 'This is a compact accordion with smaller padding and font sizes.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Question 2',
        'content' => 'Perfect for tight spaces or when you need to conserve vertical space.',
        'value' => 'item-2',
    ],
]" active="item-1" />

MD

Medium is the default accordion size and works well for most content blocks.
It provides a balanced amount of spacing and readable typography. 
<x-basekit-ui::accordion size="md" :items="[
    [
        'title' => 'Default Size',
        'content' => 'Medium is the default accordion size and works well for most content blocks.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Balanced Layout',
        'content' => 'It provides a balanced amount of spacing and readable typography.',
        'value' => 'item-2',
    ],
]" active="item-1" />

LG

This is a larger accordion with more generous padding and larger text.
Use this size when you want to draw more attention to the accordion content. 
<x-basekit-ui::accordion size="lg" :items="[
    [
        'title' => 'Important Information',
        'content' => 'This is a larger accordion with more generous padding and larger text.',
        'value' => 'item-1',
    ],
    [
        'title' => 'Key Features',
        'content' => 'Use this size when you want to draw more attention to the accordion content.',
        'value' => 'item-2',
    ],
]" />

Modals

Sizes

Medium (Default)

<x-basekit-ui::button size="sm" variant="secondary" @click="openMedium = true">
    Medium Modal (Default)
</x-basekit-ui::button>
<x-basekit-ui::modal show="openMedium" size="md" title="Medium Modal (Default)">
    <div class="space-y-4">
        <p class="text-slate-600">
            This is the default medium-sized modal. It works well for most use cases
            including forms and detailed content.
        </p>
        <p class="text-slate-600">
            You can add multiple paragraphs, images, or any other content here.
        </p>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-basekit-ui::button variant="ghost"
                @click="openMedium = false">Cancel</x-basekit-ui::button>
            <x-basekit-ui::button variant="primary"
                @click="openMedium = false">Save</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::modal>

Use Cases

Basic

<x-basekit-ui::button @click="openModal = true">
    Basic Modal
</x-basekit-ui::button>
<x-basekit-ui::modal show="openModal" title="Welcome to Basekit">
    <div class="space-y-4">
        <p class="text-slate-600">
            This is a basic modal dialog. It can contain any content, forms, or
            other components.
        </p>
        <div class="p-4 bg-slate-50 rounded border border-slate-100">
            <p class="text-sm">
                You can dismiss this by clicking the backdrop or the close button.
            </p>
        </div>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-basekit-ui::button variant="ghost"
                @click="openModal = false">Close</x-basekit-ui::button>
            <x-basekit-ui::button variant="primary"
                @click="openModal = false">Understood</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::modal>

Confirmation

<x-basekit-ui::button variant="danger" @click="openConfirm = true">
    Confirmation Modal
</x-basekit-ui::button>
<x-basekit-ui::modal show="openConfirm" size="sm" title="Are you sure?">
    <p class="text-slate-600">
        This action cannot be undone. This will permanently delete your data from
        our servers.
    </p>

    <x-slot:footer>
        <div class="flex justify-end gap-3 w-full">
            <x-basekit-ui::button class="w-full sm:w-auto" variant="ghost"
                @click="openConfirm = false">Cancel</x-basekit-ui::button>
            <x-basekit-ui::button class="w-full sm:w-auto" variant="danger"
                @click="openConfirm = false">Delete
                Permanently</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::modal>

No Close Button

<x-basekit-ui::button variant="warning" @click="openNoClose = true">
    No Close Button
</x-basekit-ui::button>
<x-basekit-ui::modal show="openNoClose" :is-close-button="false"
    title="Action Required">
    <div class="space-y-4">
        <p class="text-slate-600">
            This modal requires you to make a choice. There's no close button, so you
            must select one of the options below.
        </p>
        <div class="p-4 bg-yellow-50 border border-yellow-200 rounded">
            <p class="text-sm text-yellow-800">
                <strong>Note:</strong> You can still close this by pressing the
                Escape key or clicking outside the modal.
            </p>
        </div>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3 w-full">
            <x-basekit-ui::button variant="ghost"
                @click="openNoClose = false">Decline</x-basekit-ui::button>
            <x-basekit-ui::button variant="primary"
                @click="openNoClose = false">Accept</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::modal>

Advanced Example

Form Modal

<x-basekit-ui::button variant="secondary" @click="openFormModal = true">
    Form Modal
</x-basekit-ui::button>
<x-basekit-ui::modal show="openFormModal" title="Create New Project">
    <form class="space-y-4">
        <div>
            <x-basekit-ui::input label="Project Name"
                placeholder="Enter project name" />
        </div>
        <div>
            <x-basekit-ui::textarea label="Description"
                placeholder="Describe your project..." rows="3" />
        </div>
        <div>
            <x-basekit-ui::select label="Category" :options="[
                'web' => 'Web Application',
                'mobile' => 'Mobile App',
                'api' => 'API Service',
                'other' => 'Other',
            ]" />
        </div>
    </form>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-basekit-ui::button variant="ghost"
                @click="openFormModal = false">Cancel</x-basekit-ui::button>
            <x-basekit-ui::button variant="primary"
                @click="openFormModal = false">Create
                Project</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::modal>