A design system made of tokens, not guesses
Token-driven React components, a style-prop system and a markdown companion library - accessible by default, themeable down to a single slot, and documented with live demos for every published version.
npm i @soroush.tech/design-systemWhy it holds together
Tokens first
Every color, space, radius and motion is a theme token. One theme object restyles the whole library, in light and in dark.
Accessible by default
Keyboard use, focus, roles and labels are built in, and written down on each component's Accessibility tab.
Customize any part
Every component names its slots. Change one through the theme, or hand it a part of your own, without forking.
Made for tools and AI
A component catalog, an MCP server and an llms.txt describe the whole library, so tools and assistants place components correctly.
Three packages
Design System
The components: layout, inputs, feedback, navigation and overlays, with a theme to match your brand.
v2.1.1Markdown
The companion library: render markdown, edit it live, highlight code and draw diagrams with the same tokens.
v1.2.3Styled System
The style-prop engine under it all: responsive props, scales and variants for any component of yours.
v6.0.0