Why Tosui limits design choices
Tosui is a React component library built around one constraint: a design system needs enough choices to express intent, but not enough to make every screen a new system.
Many component libraries expose broad theme objects and long token scales. Those APIs can reproduce almost any design, but each added option also creates another decision for application code. Tosui chooses a smaller surface. Spacing uses one base unit, colors use semantic names, and component variants cover a bounded set of states.
Tokens describe intent
A token such as primary or foreground-muted says why a color appears. The token does not name a shade. Light and dark themes can therefore change the underlying values without changing component code.
Background tokens keep their state suffixes, such as primary-default and error-subtle. Text and border tokens use shorter names, such as primary and error. The distinction prevents a subtle background token from becoming a low-contrast text color by accident.
Composition supplies the missing flexibility
The smaller token API does not try to predict every interface. Instead, Box, Text, Heading, and the layout components combine into application-specific patterns. Components such as Modal, Tabs, and FormField own behavior that is difficult to compose correctly, including keyboard interaction and accessible relationships.
This boundary keeps styling flexible while leaving interaction behavior consistent.
CSS keeps themes visible
Tosui uses CSS Modules for component styles and CSS custom properties for design tokens. There is no runtime style generator. You can inspect the active values in browser developer tools and override the variables with ordinary CSS.
The base stylesheet also supports system, light, and dark color modes. A theme defines both light and dark primitive values, while components refer to the active semantic values.
TypeScript enforces the constraints
Style props accept documented token values instead of arbitrary strings. Responsive objects use the same value types at every breakpoint. Polymorphic components also infer native props and refs from the element passed to as.
The type errors are part of the design: they catch token names, alignment values, and element attributes that Tosui cannot render as intended.
To build your first screen, follow Get started. For lookup information, use the Box reference or choose a component from the sidebar.