Chakra UI

When to Use

• Building UI components that need dark mode, theming, or design token consistency
• Creating responsive layouts with mobile-first breakpoints
• Wrapping form controls with accessible labels, errors, and helper text
• Building compound components (Dialog, Drawer, Alert) with consistent patterns

When NOT to use:

• Highly custom animations or interactions — use Framer Motion or CSS directly
• One-off styled elements where a plain <div> with Tailwind/CSS would be simpler
• Performance-critical lists with thousands of items — style props add overhead per element

Our Conventions