Best Practices

1. Component Design

✅ Do:

• Use forwardRef for components that need refs
• Use cva for variant management
• Use cn() for class merging
• Export variants for reuse
• Add displayName for debugging
• Use TypeScript for type safety

❌ Don't:

• Create components without variants when variants are needed
• Hardcode colors (use CSS variables)
• Mix styling approaches (stick to Tailwind)
• Create components that are too specific

2. Styling Guidelines

✅ Do:

• Use Tailwind utility classes
• Use CSS variables for colors
• Use cn() to merge classes
• Create reusable variants
• Follow the design system

❌ Don't:

• Use inline styles
• Use CSS modules (unless necessary)
• Hardcode colors
• Create one-off styles

3. Component Organization

✅ Do:

• Place base UI components in src/components/ui/
• Place form components in src/components/forms/
• Place feature components in feature directories
• Group related components together
• Use consistent naming conventions

❌ Don't:

• Mix component types in one directory
• Create deeply nested component structures
• Duplicate components unnecessarily

4. Performance

✅ Do:

• Use React.memo for expensive components
• Lazy load heavy components
• Optimize images
• Use CSS for animations (not JavaScript)

❌ Don't:

• Create unnecessary re-renders
• Load all components upfront
• Use heavy libraries for simple tasks

5. Accessibility

✅ Do:

• Use semantic HTML
• Add ARIA labels where needed
• Ensure keyboard navigation
• Test with screen readers
• Use Radix UI primitives (they're accessible)

❌ Don't:

• Skip accessibility features
• Use divs for buttons
• Ignore focus states
• Remove default browser behaviors without alternatives