Lobi
Everything the styleguide does not already cover: data-heavy and commerce components, layout shell pieces, extra inputs and the full icon set.
<x-ui.data-table :columns :rows selectable sticky search-placeholder empty-title empty-description />
โ the workhorse list view for every admin/vendor screen.
| Product | Store | Actions | |||
|---|---|---|---|---|---|
| Harness leather tote bag | Nour Atelier | $189.00 | Out of stock | ||
| Ethiopia Guji โ washed, 250g | Bayt Al Qahwa | $22.00 | In stock | ||
| Orbit ANC over-ear headphones | Orbit Electronics | $129.00 | In stock | ||
| Stoneware dinner set, 12 pieces | Zahra Home | $145.00 | In stock | ||
| Atlas Trail 40L backpack | Atlas Outdoors | $99.00 | Out of stock | ||
| No results found | |||||
| Product | Store | Actions | ||
|---|---|---|---|---|
| Harness leather tote bag | Nour Atelier | $189.00 | Out of stock | |
| Ethiopia Guji โ washed, 250g | Bayt Al Qahwa | $22.00 | In stock | |
| Orbit ANC over-ear headphones | Orbit Electronics | $129.00 | In stock | |
| Stoneware dinner set, 12 pieces | Zahra Home | $145.00 | In stock | |
| Atlas Trail 40L backpack | Atlas Outdoors | $99.00 | Out of stock | |
| No results found | ||||
Renders automatically โ x-ui.empty-state โ when rows is empty.
<x-ui.table sticky striped><x-slot:head>โฆ</x-slot:head>โฆrowsโฆ</x-ui.table>
โ raw markup for a totals row or free-form cells a data-table cannot express.
| Month | Net |
|---|---|
| Jun 2026 | $7,095.78 |
| Jul 2026 | $7,329.08 |
| Aug 2026 | $4,662.75 |
| Row |
|---|
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
| Row 5 |
| Row 6 |
| Row 7 |
| Row 8 |
<x-ui.filter-panel :groups />
โ one group per type: checkbox, range, rating, swatch, chips.
<x-ui.image-gallery :images :seed />
<x-ui.cart-line-item :item />
Sold by Nour Atelier
Color: Cognac
<x-ui.order-summary :subtotal :shipping :tax :discount :total />
Shipping by store
<x-ui.color-swatch :colors /> ยท <x-ui.size-selector :sizes />
<x-ui.stock-pill :quantity :low-threshold />
<x-ui.review-card :review />
Mona Rasheed
Verified purchaseUsed these on a 6-hour flight and barely heard the engines. Battery easily lasts a full work week.
Orbit Electronics Jul 3, 2026
Thank you, Mona! Glad the ANC held up on a long flight.
Tariq Salim
Verified purchaseAudio quality and comfort are excellent. The companion app is slow to connect sometimes.
<x-ui.timeline :items />
Order placed
Sep 1, 2026
Shipped
Sep 3, 2026
Delivered
<x-ui.description-list :items :columns />
<x-ui.stepper :steps :current />
The pieces every dashboard layout (vendor, admin) is assembled from.
<x-ui.sidebar :items> ยท <x-ui.sidebar-item :href :icon :active>
<x-ui.panel-topbar state>
<x-ui.back-link :href>
Back
<x-ui.page-header :title :subtitle>
Renders an <h1> internally, so it is mocked below (same markup, a <p> instead) rather than invoked live โ this page already has its own <h1> above.
Example page title
A one-line description of what this screen is for.
<x-ui.combobox :options :value :label />
No results found
<x-ui.file-upload :label :hint :accept :multiple />
<x-ui.range :min :max :value />
<x-ui.range :value-min :value-max :currency />
<x-ui.tag removable variant :value>
<x-ui.tooltip text position>
<x-ui.popover :title :align :width>
A small panel anchored to its trigger, useful for short contextual help.
<x-ui.confirm-dialog :state :title :description :variant>
<x-ui.thumb :seed ratio :label :icon />
โ generated placeholder art, one stable colour per seed.
square
portrait
landscape
wide
banner
Every name icon.blade.php defines. Pass one to the name prop on x-ui.icon โ an unknown name silently falls back to "info", so always pick from this list.