Styling
All components are designed to be styled using props.
AI TipWant to skip the docs? Use the MCP Server
Concepts
After installing Chakra UI, follow these guidelines to learn the key concepts:
- Chakra Factory
- Responsive Design
- CSS Variables
- Dark Mode
- Color Opacity Modifier
- Conditional Styles
- Virtual Color
Compositions
After understanding the concepts, learn how to use these compositions to avoid repeating styles:
Style Props
Style props are the most fundamental way to style your components in Chakra UI. They are basically css styles as props. Learn more about style props