A React design system your team and your coding agent can both build with.
62 accessible components, 19 color themes, right-to-left layouts built in, and a plain-text reference your agent reads before it writes a line.
Order | Customer | Status | Total |
|---|---|---|---|
| #4821 | L | Paid | $128.40 |
| #4820 | T | Packing | $64.00 |
| #4819 | P | Shipped | $212.90 |
| #4818 | O | Refunded | $39.50 |
Every control above is a madagent component: Input, Hotkey, Button, SegmentedControl, Metric, Currency, AreaChart, Timeline, Table, Chip, and Avatar.
The rest of the kit
A sample of the 62 components, all live. Click a name to open its docs, props, and right-to-left examples.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
19 themes, one prop
Every color on this page comes from theme tokens. Pick a theme and the whole page follows, including the dashboard above.
Arabic and English from the same markup
Components are written with logical CSS properties, so setting dir="rtl" mirrors layout, icons, and arrow-key behavior. There is no second stylesheet to maintain.
إلى أين نرسل طلبك؟
Written for coding agents, too
The package ships a set of Markdown references that list every component, prop, and token in a compact format. Point Claude Code, Cursor, or Copilot at them and it uses the real API instead of guessing one.
## Button variant primary | neutral | secondary | outline | ghost | danger size sm | md | lg props icon, loading, fullWidth notes Defaults to type="button". Icon-only needs aria-label. ## Metric label string value ReactNode (pair with <Currency> for money) sentiment positive | negative | neutral