Components
Accent
Recolors any subtree of BlatUI components from a single accent colour — no per-component props.
php artisan blatui:add accent
Pro
Every control recolours from one color on the wrapper — buttons, badges,
checkboxes, switches and focus rings.
<x-ui.accent color="#7c3aed" class="flex max-w-sm flex-col gap-4 rounded-xl border p-5">
<div class="flex flex-wrap items-center gap-2">
<x-ui.button>Subscribe</x-ui.button>
<x-ui.button variant="outline">Maybe later</x-ui.button>
<x-ui.badge>Pro</x-ui.badge>
</div>
<div class="flex items-center gap-3">
<x-ui.checkbox id="acc-terms" :checked="true" />
<x-ui.label for="acc-terms">Email me product updates</x-ui.label>
<x-ui.switch :checked="true" class="ml-auto" aria-label="Weekly digest" />
</div>
<div class="space-y-1.5">
<x-ui.label for="acc-email">Email</x-ui.label>
<x-ui.input id="acc-email" type="email" placeholder="[email protected]" />
</div>
<p class="text-muted-foreground text-xs">
Every control recolours from one <code>color</code> on the wrapper — buttons, badges,
checkboxes, switches and focus rings.
</p>
</x-ui.accent>API Reference
Props, slots and exposed methods for
<x-ui.accent>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color |
string
|
— | Any CSS color value. Rewrites the theme tokens (--primary, --secondary, --ring) on this subtree only, so every BlatUI control inside — buttons, badges, checkboxes, switches, focus rings — recolours with no per-component props. |
foreground |
string
|
'#ffffff'
|
Text colour used on filled accents such as primary buttons and solid badges. Defaults to white when omitted. |
Slots
| Slot | Description |
|---|---|
default |
The content to recolour. The wrapper renders as display:contents so it never affects layout — add a class if you need it to be a real box. |