Built with React
Modern React components built with TypeScript, providing full type safety and excellent developer experience with IntelliSense support.
Design Tokens
Semantic design tokens powered by CSS variables. Customize colors, spacing, typography, and more. Built-in light and dark mode support.
Accessible by Default
WCAG 2.1 AA compliant components with keyboard navigation, screen reader support, and semantic HTML. Accessibility is built in, not bolted on.
21
Components
WCAG
Accessibility First
TypeScript
First
Tree Shakeable
Optimized
Get Started in Seconds
Install the package and start building accessible interfaces immediately.
Install via pnpm
pnpm add @grasdouble/lufa_design-system
src/App.tsx
import { Button } from '@grasdouble/lufa_design-system';
function App() {
return <Button variant="solid" color="primary">Click me</Button>;
}
💡 Tip: Try switching to dark mode using the toggle in the navbar to see all components adapt automatically!