Skip to main content

Introduction

Tosui is a themable, orderly, simple UI component library for React. It provides 40 components designed to help you build consistent, accessible user interfaces with minimal configuration.

Author's Note​

Hi, thanks for checking out Tosui. I'm Dan, the creator of this project.

Tosui is a UI framework and component library, similar to Chakra, MUI, or Ant Design. It provides a solid set of core components and a way to customize their look and feel.

The difference is that Tosui deliberately keeps its customization surface small and simple. Learning how to theme Tosui should be grokkable. In my experience, customizing other systems often feels daunting and overly complex.

Tosui accomplishes this through a limited number of style tokens and theming via CSS variables only. You don't have to define 10 different shades for every color or learn a complex theming API to create a custom theme.

Philosophy​

Tosui is built on constraint-driven simplicity. Instead of overwhelming you with endless customization options, Tosui provides a focused set of design tokens and components that cover real-world use cases.

Fewer, Better Choices​

Every design token earns its place in the system. Instead of dozens of color shades or spacing values, Tosui provides a curated set of options that make the right choice obvious.

Composition Over Configuration​

Build complex interfaces from simple primitives. The Box, Text, and Heading components form the foundation, while higher-level components like Card, Modal, and Tabs handle common patterns.

Semantic, Not Prescriptive​

Design values describe intent (foreground, background, primary-default) rather than specific measurements. This means themes swap seamlessly and components adapt automatically to light/dark modes.

Features​

  • 40 components covering primitives, layout, forms, navigation, feedback, data display, and overlays
  • CSS Modules styling with zero runtime CSS generation
  • Responsive props with mobile-first breakpoints
  • TypeScript-first with full type safety and autocomplete
  • Polymorphic components that render as any HTML element
  • Accessible with proper ARIA attributes and keyboard navigation

Technology​

Tosui uses CSS Modules for component styling with CSS Variables for design tokens. This provides:

  • Zero runtime CSS - styles compile at build time
  • Scoped class names - no style collisions
  • Easy theming - override CSS variables to customize
  • Small bundle size - only ship the CSS you use

Goals​

The primary goal is to have a React UI framework that's lightweight, themable, and has enough components to build the majority of most UIs.

Once that's done, I hope to port this to other frameworks, including React Native.