Introduction

An accessible design system for React.

Design goals

styple is a CSS-in-TS based design system. It focuses on three main areas: accessibility, micro-interactions, user & developer experience.

Accessibility

The design system follow WCAG standards as best it can (continuely improved!) via the use of Radix-UI base components and accessible default themes.

Micro-interactions

The web should be more fun to use. As such styple is designed in a way that enables delightful micro-interactions and animations in its components. Though it always respects users who want reduced motion.

UX & DX

Good user experience is important for high-quality webapps and as such styple does everything it can to enable this. Developer experience is also important, which is why styple strives for a solid component API.

More tools

styple is more than just a design system. It has other useful tools for developing webapps with React. See Getting Started for more information about additional packages.