Payment method
All transactions are secure and encrypted.
Name on card
Card Number
CVV
Month
Year
Advanced components • RTL first • Zero runtime deps • Agentic ready
design ecosystem built natively for agents & builders
A React design system for product teams and coding agents. Minimal API, accessible primitives, and structured docs that reduce hallucinations.
Components
Components shown in context
Not isolated demo cards. Real interactive UI scenes that mirror how product teams actually compose interfaces.
No Team Members
Invite your team to collaborate on this project.
Two-factor authentication
Verify via email or phone number.
SyncingUpdatingLoading
Compute environment
Select the best setup for your cluster workloads.
How did you hear about us?
Select all channels that influenced your decision.
Social MediaSearch EngineReferralOther
Built with real DS primitives: Button, Input, Select, Tabs, Alert, Avatar, Chip, Checkbox, and Switch.
Not just another component library
Every design system claims to be accessible and themeable. We also made sure agents can actually use it without hallucinating your props.
01
Agent-first architecture
Ships with madagent.md — a structured reference that teaches agents your entire DS in a fraction of the tokens.
02
RTL from the ground up
CSS Logical Properties, directional icon flipping, element reordering. margin-inline-start, not margin-left.
03
Zero runtime dependencies
Just React and ReactDOM as peers. Tree-shakeable ESM and CJS builds. Your bundle stays lean.
04
HSL theming with CSS vars
Light and dark themes ship ready. Build custom themes with TypeScript safety. 50+ design tokens.
05
WCAG AA accessible
Keyboard nav, screen reader support, 4.5:1 contrast, 44px touch targets. Every component, every state.
06
TypeScript strict mode
Every prop typed. Every type exported. Zero any. Full IntelliSense in VS Code, Cursor, and agents.
For agents
Your agent's new best friend
Other design systems hand agents 300 pages of Storybook docs. We hand them a single .md file that fits in their context window.
Token-efficient documentation
madagent.md is structured specifically for LLM consumption. Every component, prop, variant, and pattern described in a format that minimizes token usage while maximizing understanding.
Consistent, predictable APIs
Every component follows the same patterns. Agents learn once, apply everywhere. No surprises, no edge cases that break their output.
Works with every coding agent
Cursor, Copilot, Claude Code, Windsurf, Devin — if it writes code, it works with madagent.
madagent.md
# #madagent — Agent Reference ## Button Props: variant="primary|neutral|secondary|outline|ghost|danger" size="sm|md|lg" loading="boolean" icon="ReactNode" fullWidth="boolean" RTL: auto — logical properties ## Input Props: label helperText errorText iconLeft iconRight size="sm|md|lg" RTL: auto — logical properties ## Tokens Colors: --md-surface-* --md-content-* --md-border-* ... Space: --md-spacing-{1..24} Font: --md-font-family-sans|mono // ~800 tokens for the full DS reference
RTL Support
One codebase. Both directions.
No separate RTL stylesheet. No direction: rtl hacks. Just CSS Logical Properties doing what they were made for.
LTR — Profile Form
RTL — نموذج الحساب
LTR — Filters & States
DesignActiveReview
RTL — تصفية وإعدادات
تصميمنشطمراجعة