Elenxia UI kit
One React kit for every product: the Elenxia design system as standalone components — actions, inputs, pop-ups, navigation, steps, people, live activity, maps, data, charts, meters, media and payments — each usable on its own, in dark and light, English and Persian, and each one live on this page.
React 18 or 19 · TypeScript · Version 0.2.0 · Updated
Install
Download the kit, copy its src/ into your React app, and load its stylesheet once. The stylesheet is complete on its own: your app does not need Tailwind.
1 · Dependencies
npm install clsx tailwind-merge lucide-react2 · Stylesheet and theme
import "./elenxia/elenxia.css"; <html class="dark" lang="en"> <html data-theme="light" lang="en"> <html class="dark" lang="fa" dir="rtl">3 · Use
import { Button, Modal } from "./elenxia"; <div id="root"> <Button variant="primary">Save changes</Button> </div>
Components
90 components, each on its own and each live. Every one is the kit's real component — click it, type in it, open it — and can be used alone in any product. Switch the language to see it mirror right to left, and the theme to see it in light.
Actions · 3
Button
Hollow, with a ring: violet for the one way forward, a quiet line for every other action, red for danger. Busy shows a spinner and blocks a second click.
IconButton
A round button with only an icon — 44px for top bars, 32px inside rows. Its label is required: it is the tooltip and what a screen reader says.
Menu
A glass menu anchored to the button that opened it, kept on screen, from the end edge. Arrow keys move, Escape or a click outside closes.
Inputs · 6
TextField
A label above, a hint or an error below (never both). The faint field for pages, the glass one inside pop-ups; emails and URLs stay left to right.
Select
The browser's own select in the field's look, so it works with every keyboard and screen reader; its arrow sits at the end edge.
Checkbox
An animated check that draws itself, with a glow and a burst on checking. The input stays reachable by keyboard and screen reader.
Toggle
A switch for a setting that takes effect at once; violet when on, its thumb travelling to the end edge.
Segments
Tabs between views of the same thing. Two sizes; arrow keys move between them in either direction.
ChoiceGroup
One choice among a few, each a ringed row with its detail at the end — a plan, a period, a size.
Feedback · 6
Chip
A short status. Its colour is always paired with a word — never colour alone.
Toast
A short message about an outcome the server confirmed — never about a click. A coloured bar on the start edge, up to four at once.
Spinner & Skeleton
A spinner while something short is on its way; skeletons in the shape of what is coming, so nothing moves when it arrives.
ProgressBar
How far something has come: live with a sheen, a running band while there is no measure yet, green or amber for a level.
EmptyState
What an empty list says: one quiet sentence and, when there is one, the action that fills it.
Tooltip
A short explanation on hover and on keyboard focus, gone on Escape. Never the only place something is said.
Overlays · 3
Modal
A glass dialog over a blurred page: its title and buttons never move, only its body scrolls. Escape closes, focus stays inside and goes back on close.
Drawer
A side sheet for the details of one thing, entering from the end edge — the right in English, the left in Persian.
Popup
Detail asked for from a page, with levels: what opens inside it opens in place with Back, never as a second pop-up; with `levels` the title never moves.
Navigation · 8
Breadcrumbs
Where the page sits: links back up, the current page last and not a link. The chevrons turn round in Persian.
CommandPalette
One search for everything (Ctrl K, ⌘K or /): places, actions and records in groups, “Opens here” on what opens in place. Arrows move, Enter opens, Esc closes; it matches either language.
TopBar
Back, forward and where you are: the product's name, a slash and the item open. No bar, no frame — a band of the page's colour shows behind it once the page scrolls.
AccountMenu
The account's picture and its menu: who is signed in, the account's pages, language and theme, and Sign out last in red.
Fold & Separator
A heading that hides what is under it until clicked (with a hint while closed, remembered per browser with `store`), and the drawn dot between short facts — a typed “·” reads as zero beside Persian digits.
InputBar
One field and its two actions in a rounded ring that turns violet on focus: a quiet “save for later” and the violet start. Stacks on a phone; the field stays left to right.
JourneyHeading
The whole job in one line: numbered steps joined by arrows, the last in violet. When it wraps, each arrow stays with its step.
Steps & flows · 11
StatusLights
Where everything stands, in one row: a small blinking lamp per subject (red not done, amber waiting, green done, grey locked) and its name. Each lamp opens that subject's own pop-up.
Stepper
A journey's steps as numbered circles joined by arrows: green with a check when done, amber to look over, orange when it needs you, a violet ring on the one shown and “Start here” on the first to take.
StepHeader
Where a multi-step screen stands: the current step large; the next step small with Back and Next in line rings and Go to in the violet ring, and one line on what that step is for.
StepArrows
The previous and next step at a stage's two edges: a violet-ringed circle with a chevron and the step's name under it. At the first or last step it fades and does nothing.
FlowColumns
A step drawn as a flow: choices in columns joined by curved lines from what is chosen to what it leads to — violet and solid on the way taken, thin and dashed elsewhere; a locked choice says what opens it.
BranchChoice
One choice among several, as branches: from what it starts with to each option, the chosen one violet with a tick, then on to the action it leads to (a violet-ring button with a note).
ConfirmSteps
A guard before a costly action: confirm, choose how much to redo (its cost said under the choice), then do it. What waits on the confirmation stays faint until it is given.
ChoiceCards
Side-by-side cards — icon, name, one line, the radio at the foot; the whole card is the hit area. The chosen one takes the violet outline, one already done is green with its word, a locked one opens what unlocks it.
WorkflowPath
The compact path each piece of work travels, every step with what is in it now; the one to act on is filled violet. Steps that happen by themselves say so, as do the ones that are yours.
GuideDialog
How the whole thing goes, in one dialog of one size: the steps on top, the step clicked explained under them with its choices on branch lines, what the colours mean, and a closing line.
ProgressSummary
How far something has come: the number now (green from 90, red under 50), its change since the start, what the last change did, a chart of the way here, notices, marks reached and how it is worked out.
People · 4
Avatar
A person's initials or photo; a ring in any colour token, a slow turn while they are active, and a stack that ends in +n.
Orbit
The lead in the middle and the team on dashed rings round them. Still while you choose (a photo or a whole group); while the work runs the rings turn, the one at work pulses with how far it has come, and the lead ripples.
MemberCard
One member: a round photo in a ring of where they stand, a small badge (✓ chosen, ⚑ finished, ! stopped, a lock), then name, role and state — the state always in a word.
StatusTag
The chip a live line ends with: steps of the work on a soft pill (starting, started, finished with its flag, stopped early in amber), a result as its sign and word (passed, failed, couldn't run).
Live · 9
ActivityFeed
What everyone is doing, newest on top: who, what, and how it stands. Lines that arrive together are let in one by one and fade in; the newest is tinted while it runs, and what is under way holds a bar at the top.
ActivityBars
A bar per member on one scale, split into passed, failed and couldn't run; the legend lights its part of every bar. Failed of all at the end; rows with failures first.
PartTile & ImagePanel
Transparent tiles with an upper-case name and ✓ / ✕ counts, a blinking dot while running, dimmed when not in use. Inside: the newest images in one row (a light passing down the newest) and response times round a turning globe.
PipelineFlow
The browser, the API and the data on one line. While live the requests run along it, out above and back below, and a dot makes each round trip — green, or red when it failed — with what was asked, its status and its time.
LogConsole
A near-black terminal in mono green: each command typed at the prompt, then its answer printed, a block caret blinking where it types. The last lines only, the newest at the bottom, the older fading.
Beam
A curved line between any two boxes and a gradient light sweeping along it, over and over. Give it the container and both ends by ref; it follows them as the container resizes.
WorldMap
A dotted world with a pulsing point per place and its name, and curved links drawn one after another with a light along each and the round trip at its middle (≈ estimated from the distance, or measured). Wheel, pinch or the buttons zoom; drag to move.
ServerList
Servers under their group: who runs each and its address, a tag, where it is, and its slowest answer coloured and said in a word. A row with details opens them under it.
StatBento
A run's figures at a glance: a large share with a count beside it and what it means, a level out of 100 as ten rising bars, a count that is bad news when not nought, and how long it took — frames only, the figures counting up live.
Data · 12
StatTiles
A row of counts, each number over its name; green only where the number is good news.
DataTable
Rows as soft bands with no lines between them: sortable headers, a click anywhere on a row opens it, its own links and buttons stay theirs. Scrolls sideways inside itself on a phone.
ItemCards & ViewToggle
The same list as notched cards — the cover's corner bitten out round its open arrow, the name, one line and its lights under it — with the table / cards switch above.
ExpandableList
One row per person or part, each opening in place to its lines — a check, a cross, a dashed circle for what didn't run — with a reason under any of them.
ExpandableRows
Rows under a hairline that open in place: a priority chip before the title, a quiet line of status, where and who, one action at the end, and the details below.
PriorityChip & StatusChip
How urgent, from 0 (critical) to 3 (low), always in its word — as the kit's chip or as a soft tint for a report; and a status with its icon, turning while under way.
FilterChips
Chips that filter a list: a check and a violet ring on what is on, a quiet ring on what is off, a lock on what is closed — a click on it asks what opens it.
LevelCards & ChoiceMatrix
A few levels as cards (icon, check on the chosen one, lock on a closed one), and a choice per row in columns — who uses which level — with columns of your own after.
Bento
A region of a screen: a thin line round it, nothing filled. Its weight is the line's colour — one primary, at most two secondary, the rest quiet — and the whole bento opens its details.
Report
A report a client reads at a glance: the verdict in its colour with its light, what changed since last time, the score's trend, and what to do first in the order that helps most.
VerdictBand & StageCounts
The verdict as a band at the top of a working screen — pulsing with a bar while work runs, then the score, an action and a one-line summary — and the work counted by stage.
ResultSummary
The body of a finished job's summary: its result as an icon in a tinted disc, its figures, a note, and its sections — what each person did, what to download.
Charts · 12
Delta & Sparkline
A change against last time, with its sign and arrow, and a small trend line with its last point marked.
StackBar
How a whole divides, in one bar with its legend. Colours come from the workflow tokens, so both themes stay readable.
Donut
The same split as a ring, the total in its middle; it eases to new values.
Gauge
A 0–100 value on a 180° dial: a number every tenth, a banded edge cut at each tick, a needle that eases to the value. Red → amber → green by default; any bands; a button when it opens the detail.
Speedometer
An analog meter on a 90° arc: minor ticks every fifth, numbers every quarter turned along the arc, a zone at the top end, a filled needle. A ceiling fades the scale past what can be reached.
VUMeter
Analog meters in a row, each swinging to its value with the value coloured under it; the last, the total, wider with red → amber → green zones. Each one can open its detail.
ArcGauge
A half circle filled to the value in its tone, the bands outside it, a needle and the number large in the middle.
ScoreRing
A ring filled to a share, coloured by how good it is (or violet while live); the number inside counts as the ring eases.
Seismograph
A strip that stays quiet while things run well and jolts where something happened, the jolt's height its weight. Live, it trembles and each new event strikes in; here the events drift left as they age.
TrendChart
A value over time on a 0–100 axis (never cropped): a 2px line over a soft area, dots, the latest labelled. Hover, or focus and the arrow keys, shows a point's date, value, change and detail; the table carries the same numbers.
LevelLadder
Levels as seals on a line: the ones reached lit, the line filled as far as you have come, the current one ringed — and under it what the next level still needs.
Seal
A level's badge: a dashed ring round a filled disc in its colour, its mark in the middle; faded until it is reached, a cross when there is none.
Meters · 6
BarMeter
A figure out of 100 beside ten rising bars, as many lit as it reaches, in its band's colour. Live, the number counts up and the lit bars run in a wave.
ScoreCard
One large figure on the product's colour, what stands beside it, a verdict line and a caption; one small action at the top end. Live, it counts and glows at each change.
ScoreBreakdown
What makes up a figure out of 100: each part's name, what it adds of its most, what was chosen for it, its weight and a bar of that share.
UsageMeter & Counter
What is left, at a glance: large figures over their names, green while plenty is left, amber from 80% used, red with a blinking light at none. Numbers count to their new value.
QuotaBar
A limit as a line: its name, used / most, and a thin bar — violet, amber from 80%, red when it is all used.
Stat & Facts
One number over its name in a hairline box, coloured only when it is good or bad news; and name–value pairs in two columns.
Media · 5
ImageAnnotations
Marks drawn on a picture: red where it is wrong now, dashed green where it should be with an arrow, blue for a note that is not a fault — each numbered, its words beside it, never over another.
MasonryGallery & Lightbox
Pictures in a masonry at their own proportions, coming in one after another; a tile lifts on hover and opens in place — springing out of itself — with Fit and Fill, its caption and its marks.
Carousel
Pictures that open through an iris from where you click, framed in glass, with Previous / Next and the words for the one on screen written beside it — under it on a phone.
IrisCarousel
The iris carousel on its own: titles rise out of a mask, a hairline fills toward the next slide, a Next / Prev lens follows the cursor; a slide with no picture gets a painted landscape.
CardCarousel
Cards one at a time: the open one wide with its words and picture, those beside it peeking as pictures; they move on a spring, a tab fills per card, and its size follows its own width.
Commerce · 5
PlanCards & PricingTable
A monthly / annual switch with its saving, plans as cards to pick from, and the same plans compared row by row with the picked one's column lit; the fine print one click away.
PlanUsage & InfoTiles
How much of an allowance is used — amber at 80%, red when full — and a few kinds of thing side by side, each with its icon and a line of what it is.
CostCalculator
Three fields kept in step — what you pay, what you get, how many units it covers at the chosen rate — change any one and the others follow; the button says what is paid and what it brings.
DownloadList & DownloadProgress
What to include in a download, a check box each; then, from the moment it is asked for, its share, a bar that fills from the start edge, and the step under way — green when saved, red if it failed.