// tech stack
ReactTypeScriptStorybookVitestCSS ModulesRollup
// the challenge
Security teams needed data-dense UIs that were still accessible. Existing component libraries weren't designed for dark environments or real-time data.
// the solution
Built a design system from scratch — tokens first, components second. Every component has keyboard navigation, screen reader support, and motion preferences respected.
// measurable impact
Adopted by 6 internal products. 14K monthly npm downloads. 98/100 Lighthouse accessibility score.
- Timeline
- 4 months (ongoing)
- Team
- Solo project
- Role
- Design System Architect
// key highlights
- ◆60+ production-grade components with full TypeScript generics
- ◆Zero dependencies except React — tiny bundle footprint
- ◆Automated visual regression tests with Chromatic
- ◆Full Storybook documentation with accessibility annotations
// implementation sample
// Type-safe composable DataTable component
interface DataTableProps<T extends Record<string, unknown>> {
data: T[];
columns: ColumnDef<T>[];
onRowClick?: (row: T) => void;
virtualize?: boolean;
}
export function DataTable<T extends Record<string, unknown>>({
data, columns, onRowClick, virtualize = data.length > 200
}: DataTableProps<T>) {
const { sorted, handleSort } = useSortable(data);
const Component = virtualize ? VirtualTable : StandardTable;
return <Component data={sorted} columns={columns} onRowClick={onRowClick}
onSort={handleSort} aria-label="Data table" role="grid" />;
}