Guides
Demo
Every component on one page — the free Flux UI set plus the whole mds layer, in English.
This is the workbench demo, rendered through Blade at build time like every other preview in these docs. Everything on it is live: open the modals, press ⌘K, type in the composer. For the kit in the language it is designed for, see the RTL demo.
Body text with an inline link and Persian numerals straight from the @toman directive: ۲٬۵۰۰٬۰۰۰ تومان — and from @jalali: 29 Mordad 1405 (both are Persian by definition, whatever the page locale).
Vertical separator:
Sign in
Sign up
An open version of the Command component (Pro-only in Flux) — Persian search, keyboard navigation and a ⌘K shortcut.
Inline:
In a modal with the ⌘K shortcut:
An open version of the Color Picker component (Pro-only in Flux) — a saturation/brightness canvas, hue and alpha sliders, a swatch palette, an eyedropper and six output formats.
Button mode:
An open version of the File Upload component (Pro-only in Flux) — drag and drop, click to choose, a Livewire upload progress bar, and a file list with localized sizes.
Any HTML inside <mds:file-upload> gets the full upload behavior; style the states with in-data-dragging: and in-data-loading:.
An open version of the Composer component (Pro-only in Flux) — a multi-line input that grows with the text, an action bar around it, Ctrl/⌘ + Enter to send, and a character counter.
A card previewing a link's destination — it opens on hover or keyboard focus, and the link itself still navigates on click.
This kit is maintained by the team at
@majid_ds
An RTL-first UI kit for Laravel Livewire, on top of Flux UI.
Our next offsite is at the
Coastal House
A bright, open workspace overlooking the bay — room for 24.
The card only opens on hover or focus — never on touch — so keep anything essential on the linked page itself. Placement is logical (side/align take start/end) and mirrors automatically on RTL pages.
An open version of the Timeline component (Pro-only in Flux) — vertical and horizontal, step states, colored indicators and full-width blocks. The rail follows the reading direction.
-
Order placed · 4 days ago
-
Payment confirmed
-
Delivered ·
-
1Cart
Review the items and finalize quantities.
-
2Address & delivery slot
Pick the recipient address and a delivery window.
-
3Payment
Pay online or on delivery.
-
Paid
31 Mordad 1405
-
Packed
1 Shahrivar 1405
-
Shipping
The courier is on the way
-
Delivered to customer
By tomorrow
start
-
1Submit documents
Upload a photo of your national ID and your latest academic certificate so our team can review your file.
-
2Final review
baseline
-
1Submit documents
Upload a photo of your national ID and your latest academic certificate so our team can review your file.
-
2Final review
center
-
1Submit documents
Upload a photo of your national ID and your latest academic certificate so our team can review your file.
-
2Final review
end
-
1Submit documents
Upload a photo of your national ID and your latest academic certificate so our team can review your file.
-
2Final review
-
Deployment failed
-
Warning raised
-
Released
The indicator sits on the first line of the large heading (align="baseline").
-
Mahdi left a comment · 30 Mordad 1405
-
Support replied
Your parcel ships from the Tehran warehouse today.
-
Ticket closed
Monochrome dashboard charts, server-rendered as SVG with no library — an open take on the Chart component (Pro-only in Flux). Persian digits; the funnel and heatmap are RTL-native.
Every chart's ink is currentColor; a single text-accent class recolors the whole thing.
Hugeicons replaces heroicons across every mds component. The free Stroke Rounded set (6,200 icons) ships with the package; heroicon names still work through an alias map.
|
Product
|
Status
|
|
Amount
|
|---|---|---|---|
|
|
2 days ago |
13%
42,500,000
Toman
|
|
|
|
1 day ago |
1,890,000
Toman
|
|
|
|
6 hours ago |
30%
245,000
Toman
|
|
|
|
2 hours ago |
3,200,000
Toman
|
Profile completion — 35%
Flash sale capacity — 70%
Satisfaction score — 92%
Leave a rating:
flux:input, except Persian and Arabic digits are rewritten to Latin as they are typed or pasted — the value that reaches the server is always the machine form.
Flash deal:
You have not added anything to your cart yet. Start with the flash deals.