React - BEM classes, no lock-in

React is one of our strongest markets. Your system is plain CSS + HTML - React just renders the classes.

Install (Vite example)

# copy your ZIP into the project
cp -r my-design-system src/my-design-system

# main.tsx - import once
import './my-design-system/dist/my-design-system.min.css';
// or SCSS source:
// import './my-design-system/main.scss';

export function Button({ children, variant='primary' }) {
 return <button className={`my-btn ${variant==='outline' ? 'my-btn--outline':''}`}>{children}</button>
}

State via classes

// Tabs / modals - CSS cares only about .is-open / .is-active
const [open, setOpen] = useState(false);
<button data-my-toggle={open} onClick={()=>setOpen(!open)} className="my-btn">Toggle</button>
<div className={open ? 'my-modal is-open' : 'my-modal'}>

Prefer headless? Delete ani.js - accordion, carousel, tooltip already work with zero JS. For modal/drawer/tabs you can drive .is-open yourself.

TypeScript

Classes are strings - no generated components to type. Your prefix (my in examples) is just a string replace if you rename. Tokens are CSS vars: var(--my-colour-primary).

Why not a component library?

You own the source. Upgrade React without waiting for a library release. Tweak a token in abstracts/_colours.scss, recompile - whole system re-themes. See SCSS and Tokens.

Next: Next.js guide (App Router, SSR) · Components