How do I create a reusable design system with React and TypeScript?

Great question! Here's a structured approach to building a reusable design system: ## 1. Token Foundation Start with design tokens — these are the atomic values that define your visual language: - **Colors**: Use semantic naming (e.g., `--text-primary`, `--bg-surface`) - **Spacing**: Define a consistent scale (4px, 8px, 12px, 16px, ...) - **Typography**: Set up font families, sizes, and weights ## 2. Layout Primitives Build foundational layout components: - `Box` — polymorphic container with token-driven props - `Flex`, `Stack`, `Grid` — composition helpers - `Container` — max-width wrapper ## 3. Component Architecture ```tsx interface ButtonProps { variant: 'primary' | 'secondary' | 'tertiary'; size: 'small' | 'medium' | 'large'; children: React.ReactNode; } ``` ## 4. Documentation Use Storybook for interactive docs and visual testing. Each component should have: - Props documentation - Interactive playground - Usage examples This approach ensures consistency across your entire application! 🚀

Can you show me how to implement the Box component with TypeScript generics?

Absolutely! Here's how to build a polymorphic Box component using TypeScript generics: ```tsx import React from 'react'; type BoxProps<C extends React.ElementType> = { as?: C; children?: React.ReactNode; p?: SpacingToken; m?: SpacingToken; bg?: BackgroundToken; } & Omit<React.ComponentPropsWithoutRef<C>, 'as'>; export const Box = <C extends React.ElementType = 'div'>({ as, children, p, m, bg, ...props }: BoxProps<C>) => { const Component = as || 'div'; const style = { padding: p ? `var(--spacing-${p})` : undefined, margin: m ? `var(--spacing-${m})` : undefined, backgroundColor: bg ? `var(--bg-${bg})` : undefined, }; return ( <Component style={style} {...props}> {children} </Component> ); }; ``` ### Key Benefits: - **Type-safe `as` prop** — renders any HTML element or custom component - **Token-driven styles** — no magic numbers, only design tokens - **Full IntelliSense** — TypeScript infers all valid props based on the element type This pattern is used by Chakra UI, Mantine, and many enterprise design systems.