Styling

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
• Focus Ring
• Virtual Color

Compositions

After understanding the concepts, learn how to use these compositions to avoid repeating styles:

• Text Styles
• Layer Styles
• Animation 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