Components — BK Marketplace

Foundations

Every colour, radius and font is a CSS variable. Swap them in public/ui/ui.css and the whole kit re-themes.

Colour tokens

Light and dark values switch on the .dark class.

Accent

Success

Danger

Warning

Info

Surface

Sunken

High

Radii

Six steps, from controls to panels.

control 7px

input 9px

card 11px

card-lg 13px

panel 16px

pill 999px

Typography

Space Grotesk for display, Plus Jakarta Sans for text, JetBrains Mono for code.

Display / 32 / Extrabold

Heading / 20 / Semibold

Body / 14 / Regular — the default reading size across the kit.

Muted / 12.5 — hints, captions and secondary metadata.

Mono / 12.5 — TX-8821-A94F

Buttons

Seven variants, four sizes, with icon, loading and block states.

Variants

Show markup

<x-ui.button variant="primary" icon="bolt">Launch</x-ui.button>
<x-ui.button variant="secondary">Secondary</x-ui.button>
<x-ui.button variant="outline">Outline</x-ui.button>
<x-ui.button variant="ghost">Ghost</x-ui.button>
<x-ui.button variant="soft">Soft</x-ui.button>
<x-ui.button variant="danger">Delete</x-ui.button>
<x-ui.button :loading="true">Saving</x-ui.button>

Sizes

States

Link

Badges & Avatars

Status pills in soft and solid fills; avatars with initials fallback.

Badges

Neutral Accent Active Failed Pending Solid Pro

Show markup

<x-ui.badge variant="accent">Accent</x-ui.badge>
<x-ui.badge variant="success" dot>Active</x-ui.badge>
<x-ui.badge variant="danger" icon="warning">Failed</x-ui.badge>
<x-ui.badge variant="info" solid>Solid</x-ui.badge>

Avatars

KK AO TB ZN

Show markup

<x-ui.avatar name="Kelly Kingston" size="lg" status="online" />
<x-ui.avatar name="Ada Obi" square />
<x-ui.avatar size="sm" />

Cards & Stats

Header, body and footer slots; KPI tiles infer trend direction from the sign.

Balance

875 400 FCFA

12.4% vs. last month

Active plans

3

2 one expired

Requests

24.8k

8.1%

Uptime

99.98%

0.0%

Card

Wallet

Available balance

875 400 FCFA

Last funded 3 days ago.

Border beam

Hover me

Pass beam and a light travels the border on hover, focus, or when active is set. The same trigger the radio cards use.

Show markup

<x-ui.card title="Wallet" subtitle="Available balance" icon="wallet" beam>
    Your card body content.

    <x-slot:action>
        <x-ui.button size="xs" variant="ghost" icon="settings" />
    </x-slot:action>

    <x-slot:footer>
        <x-ui.button size="sm" block>Fund wallet</x-ui.button>
    </x-slot:footer>
</x-ui.card>

Alerts

Five tones, optional action slot and dismiss button.

Variants

Heads up

Scheduled maintenance runs Sunday 02:00–04:00 UTC.

Payment received

Funds have landed in your wallet.

Verify your account

Some features stay locked until verification completes.

Transaction failed

The card issuer declined this charge.

A bare alert with no title — just body copy.

Show markup

<x-ui.alert variant="success" title="Payment received">
    Funds have landed in your wallet.
</x-ui.alert>

<x-ui.alert variant="warning" title="Verify your account" dismissible>
    Some features stay locked until verification completes.
</x-ui.alert>

Text inputs

Label, hint, error, icons and prefix/suffix affixes — all optional.

Inputs

Email

We never share this.

Search

Amount

FCFA XAF

Digits only, grouped as you type.

Password

Password must be at least 12 characters.

Website Optional

Disabled

Show markup

<x-ui.input label="Email" type="email" icon="user"
    placeholder="you@example.com" hint="We never share this." />

<x-ui.input label="Amount" numeric prefix="FCFA" suffix="XAF" placeholder="0" />

<x-ui.input label="Password" type="password"
    error="Password must be at least 12 characters." />

Textarea

Notes

Markdown supported.

Native select

Currency

Use combobox when you need search.

Choice controls

Checkbox, radio, switch and segmented control — native inputs, repainted in CSS.

Checkbox & radio

Email notifications Get a summary every morning. SMS alerts Disabled option

Plan

Starter 0 FCFA / month Pro 19 000 FCFA / month

Show markup

<x-ui.checkbox label="Email notifications"
    description="Get a summary every morning." checked />

<x-ui.radio name="plan" label="Starter" card />

<x-ui.switch label="Two-factor auth" :checked="true" />

<x-ui.segmented :options="[
    ['label' => 'Day', 'value' => 'day'],
    ['label' => 'Week', 'value' => 'week'],
]" />

Switch & segmented

Two-factor auth Require a code at sign-in.

Public profile

Small switch

Combobox

Searchable select with full keyboard support — ↑↓ to move, ↵ to pick, esc to close. Posts through a hidden input.

Single, multiple and plain

Country

Type to filter.

Markets

Multi-select with running count.

Priority

Search disabled for short lists.

Show markup

<x-ui.combobox
    label="Country"
    name="country"
    placeholder="Select a country"
    :options="[
        ['value' => 'ng', 'label' => 'Nigeria', 'description' => 'Lagos · GMT+1'],
        ['value' => 'gh', 'label' => 'Ghana', 'description' => 'Accra · GMT'],
    ]"
/>

{{-- multi-select --}}
<x-ui.combobox label="Tags" :options="$tags" multiple />

Date picker

No date library. Tap the month label to zoom out to months, again for a year grid — so 1950 is three taps away, not 900 clicks. Values post as YYYY-MM-DD.

Variants

Start date

Preselected to today.

Date of birth

Year grid runs back to 1920.

Delivery window

Bounded to this month.

Show markup

<x-ui.date-picker
    label="Start date"
    name="start_date"
    value="2026-08-08"
    hint="Posts as YYYY-MM-DD."
/>

{{-- year grid back to 1920 --}}
<x-ui.date-picker label="Date of birth" :min-year="1920" :max="now()->toDateString()" />

Tables

Header and footer slots; wide tables scroll inside the card, not the page.

Recent transactions

Last 7 days

Reference	Description	Amount	Status
TX-8821	Wallet funding	240 000 FCFA	Settled
TX-8820	Plan renewal	-29 000 FCFA	Settled
TX-8817	Withdrawal	-500 000 FCFA	Pending
TX-8814	Wallet funding	1 200 000 FCFA	Failed

Navigation

Breadcrumbs, pagination, tabs, dropdown menus and accordions.

Breadcrumbs & pagination

Showing 31–40 of 118

1 … 3 4 5 … 12

Show markup

<x-ui.breadcrumbs :items="[
    ['label' => 'Dashboard', 'href' => '/', 'icon' => 'chart'],
    ['label' => 'Billing'],
]" />

<x-ui.pagination :current="4" :last="12" summary="Showing 31–40 of 118" />

<x-ui.tabs :tabs="[['label' => 'Overview'], ['label' => 'Activity']]">
    <x-slot:panel0>First panel</x-slot:panel0>
    <x-slot:panel1>Second panel</x-slot:panel1>
</x-ui.tabs>

Tabs — underline

Panels are named slots — panel0, panel1, and so on.

Twelve events in the last 24 hours.

Email digest

Tabs — pill

Today's figures.

This week's figures.

This month's figures.

Dropdown

Show markup

<x-ui.dropdown label="Actions" align="right">
    <x-ui.dropdown-item heading="Manage" />
    <x-ui.dropdown-item icon="user">Profile</x-ui.dropdown-item>
    <x-ui.dropdown-item icon="settings" shortcut="⌘,">Settings</x-ui.dropdown-item>
    <x-ui.dropdown-item divider />
    <x-ui.dropdown-item icon="trash" variant="danger">Delete</x-ui.dropdown-item>
</x-ui.dropdown>

Accordion

Open the wallet panel, choose an amount and pick a funding method. Balances update once the transaction settles.

Yes — upgrades apply immediately and downgrades take effect at the end of the billing period.

Two-factor authentication and active sessions both live under Settings → Security.

Overlays

Modals trap focus and lock scroll; toasts queue globally; tooltips follow hover and focus.

Modal, toast and tooltip

Show markup

{{-- Trigger --}}
<x-ui.button x-on:click="$dispatch('open-modal', 'confirm')">Open modal</x-ui.button>

{{-- Modal --}}
<x-ui.modal name="confirm" title="Delete workspace" icon="trash">
    This cannot be undone.

    <x-slot:footer>
        <x-ui.button variant="ghost" x-on:click="$dispatch('close-modal', 'confirm')">Cancel</x-ui.button>
        <x-ui.button variant="danger">Delete</x-ui.button>
    </x-slot:footer>
</x-ui.modal>

{{-- Toast, from anywhere --}}
<x-ui.button x-on:click="$store.toast.push({
    title: 'Saved', message: 'Changes applied.', variant: 'success'
})">Toast</x-ui.button>

{{-- Tooltip --}}
<x-ui.tooltip text="Copied to clipboard" position="top">
    <x-ui.button size="sm" variant="outline" icon="copy">Copy</x-ui.button>
</x-ui.tooltip>

Feedback

Progress bars, loading skeletons and empty states.

Progress

Storage used 68%

Verification 100%

Quota 92%

Syncing…

Show markup

<x-ui.progress label="Storage" :value="68" show-value />
<x-ui.progress indeterminate variant="accent" />

<x-ui.skeleton variant="paragraph" :lines="3" />

<x-ui.empty-state icon="inbox" title="No transactions yet"
    description="Once you fund your wallet, activity shows up here.">
    <x-ui.button size="sm" icon="plus">Fund wallet</x-ui.button>
</x-ui.empty-state>

Skeletons

No transactions yet

Once you fund your wallet, activity shows up here with receipts and running balances.

A reusable Blade UI kit

Foundations

Colour tokens

Radii

Typography

Buttons

Variants

Sizes

States

Badges & Avatars

Badges

Avatars

Cards & Stats

Card

Wallet

Border beam

Alerts

Variants

Text inputs

Inputs

Textarea

Native select

Choice controls

Checkbox & radio

Switch & segmented

Combobox

Single, multiple and plain

Date picker

Variants

Tables

Recent transactions

Navigation

Breadcrumbs & pagination

Tabs — underline

Tabs — pill

Dropdown

Accordion

Overlays

Modal, toast and tooltip

Feedback

Progress

Skeletons

No transactions yet