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.
An open version of the Popover component (Pro-only in Flux) — a panel anchored to its button: logical, RTL-aware placement, focus returned to the trigger, and Escape to close.
Chest is measured flat, across the garment, 2cm below the armhole. Between two sizes, take the larger.
The third panel also opens on hover or keyboard focus; a click pins it open.
An open version of the Accordion component (Pro-only in Flux) — built on the browser's own details/summary, so opening, the keyboard and find-in-page keep working with JavaScript off.
Frequently asked questions (one at a time, animated):
Shipping and delivery
Returning an item
Warranty
Business accounts
A custom heading with a badge and an icon:
Order 1481
Order 1477
An open version of the Slider component (Pro-only in Flux) — single-thumb or range, with a live localized readout, tick marks and server-side clamping.
An open version of the Time Picker component (Pro-only in Flux) — a list of times at any step, free typing with localized digits, and a machine value that is always 24-hour.
- 09:00
- 09:30
- 10:00
- 10:30
- 11:00
- 11:30
- 12:00
- 12:30
- 13:00
- 13:30
- 14:00
- 14:30
- 15:00
- 15:30
- 16:00
- 16:30
- 17:00
- 17:30
- 18:00
- 18:30
- 19:00
- 19:30
- 20:00
- 20:30
- 21:00
- 08:00
- 08:15
- 08:30
- 08:45
- 09:00
- 09:15
- 09:30
- 09:45
- 10:00
- 10:15
- 10:30
- 10:45
- 11:00
- 11:15
- 11:30
- 11:45
- 12:00
- 12:15
- 12:30
- 12:45
- 13:00
- 13:15
- 13:30
- 13:45
- 14:00
- 14:15
- 14:30
- 14:45
- 15:00
- 15:15
- 15:30
- 15:45
- 16:00
- 16:15
- 16:30
- 16:45
- 17:00
- 17:15
- 17:30
- 17:45
- 18:00
- 12:00 AM
- 12:30 AM
- 1:00 AM
- 1:30 AM
- 2:00 AM
- 2:30 AM
- 3:00 AM
- 3:30 AM
- 4:00 AM
- 4:30 AM
- 5:00 AM
- 5:30 AM
- 6:00 AM
- 6:30 AM
- 7:00 AM
- 7:30 AM
- 8:00 AM
- 8:30 AM
- 9:00 AM
- 9:30 AM
- 10:00 AM
- 10:30 AM
- 11:00 AM
- 11:30 AM
- 12:00 PM
- 12:30 PM
- 1:00 PM
- 1:30 PM
- 2:00 PM
- 2:30 PM
- 3:00 PM
- 3:30 PM
- 4:00 PM
- 4:30 PM
- 5:00 PM
- 5:30 PM
- 6:00 PM
- 6:30 PM
- 7:00 PM
- 7:30 PM
- 8:00 PM
- 8:30 PM
- 9:00 PM
- 9:30 PM
- 10:00 PM
- 10:30 PM
- 11:00 PM
- 11:30 PM
An open version of the Tabs component (Pro-only in Flux) — the full WAI-ARIA pattern, arrow-key navigation that flips in a right-to-left layout, and the correct tab already active in the server's first render.
Default, with icons:
Segmented and small, with a preselected tab:
Pills, bound to Livewire:
An open version of the Autocomplete component (Pro-only in Flux) — an ordinary text field with a list of suggestions, Persian-aware search and keyboard navigation.
Free text, with cities suggested:
One of the options only, after two characters:
An open version of the Carousel component (Pro-only in Flux) — built on scroll snapping, so it swipes natively on a phone and runs right-to-left with nothing to configure.
The main banner, rotating on its own:
A product strip, three slides per view:
An open version of the Context component (Pro-only in Flux) — an ordinary flux:menu that opens at the pointer on right-click, Shift+F10 or a long press.
Right-click the card:
2.4 MB · right-click for options
With the keyboard: Tab to the image, then Shift+F10:
A context menu is a shortcut, never the only path: keep the same actions somewhere visible too — a flux:dropdown or the row's own buttons.
An open version of the Pillbox component (Pro-only in Flux) — multi-select with removable pills, Persian search and a selection cap.
Up to three categories:
Product tags:
An open version of Flux Pro's Editor — with no third-party JavaScript at all: a contenteditable surface, a standard ARIA toolbar, and pasted HTML filtered down to the allow-list.
A short toolbar:
A custom toolbar:
Shortcuts: Ctrl/⌘ with B for bold, I for italic, U for underline and K for a link. In the toolbar, the arrow keys move in the order you see.
An open version of the Calendar component (Pro-only in Flux) — and unlike it, Jalali: Farvardin through Esfand, a week that opens on Saturday, and the right leap years. What reaches Livewire is always an ISO Gregorian date.
One day, with bounds and days off:
| Week | Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|---|
| 23 | |||||||
| 24 | |||||||
| 25 | |||||||
| 26 | |||||||
| 27 |
| Week | Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|---|
A stay, two months side by side:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
Several days at once:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
Month and year from the header:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
An open version of the Kanban component (Pro-only in Flux) — mouse and touch dragging, full keyboard moves, and every move announced to screen readers.
To move a card with the keyboard, focus it and press Space, move it with the arrow keys, then press Space again.
- Design the checkout page Due Thursday
- Fix the cart badge
- Migrate to Tailwind 4
- Release 2.1 Waiting on QA
- Add unit tests
- Review the Persian copy Locked
Last move: Nothing moved yet.
An open version of the Date picker component (Pro-only in Flux): a text field you can write a date into, plus the same Jalali calendar inside a popover. Whatever you type or pick, what reaches Livewire is an ISO Gregorian date.
One day — type it or take it from the calendar:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
A travel range, two months side by side:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
A date far back — with month and year selects:
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
| Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|---|
The same field, on the Gregorian calendar:
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
|---|---|---|---|---|---|---|
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
|---|---|---|---|---|---|---|
«۱۴۰۵-۰۵-۲۹», «۱۴۰۵/۰۵/۲۹» and «۱۴۰۵۰۵۲۹» are all the same day; anything that is not a date never becomes one, and the field puts back what it had.
A comet of light lapping the border of whatever it wraps. There is no script behind it — it is CSS all the way down, and it inherits the corner radius from the wrapper itself, so it sits on a rounded card and on a fully round button alike. On a right-to-left page the lap is mirrored too.
The beam is decoration and nothing else: it stays hidden from screen readers, never swallows a click, and is not drawn at all for anyone who asked for less motion. So never let it be the only sign of a state — put text or a spinner next to it.
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.