Create React components with CSS Modules and design tokens
Write React components in src/ui/ following the project's component philosophy.
ItemCell.tsx).module.css file (e.g., ItemCell.module.css)import classNames from 'classnames/bind';
import type { ReactNode } from 'react';
import styles from './ComponentName.module.css';
const cx = classNames.bind(styles);
interface ComponentNameProps {
children: ReactNode;
variant?: 'primary' | 'secondary' | undefined;
isActive?: boolean | undefined;
}
export function ComponentName(props: ComponentNameProps): ReactNode {
const { children, variant = 'primary', isActive = false } = props;
return (
<div className={cx('component', `component--${variant}`, { 'component--active': isActive })}>
{children}
</div>
);
}
/* ComponentName.module.css */
.component {
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-default);
}
.component--primary {
color: var(--text-primary);
}
.component--secondary {
color: var(--text-secondary);
}
.component--active {
border-color: var(--accent-primary);
}
.block-element--modifier in CSSAlways use classnames/bind for conditional classes:
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
// Good
<div className={cx('cell', { 'cell--selected': isSelected })} />
// Bad - plain string literals forbidden
<div className="cell" />
<div className={styles.cell} />
| Prefix | Usage |
|---|---|
font- | Typography |
space- | Spacing/padding/margins |
z- | Z-index layers |
shadow- | Box shadows |
size- | Fixed sizes |
bg- | Background colors |
text- | Text colors |
border- | Border colors |
accent- | Accent/highlight colors |