Styling

Concepts

Saas UI is built on top of Chakra UI, all basic concepts are the same.

• Chakra Factory
• Responsive Design
• CSS Variables
• Dark Mode
• Color Opacity Modifier
• Conditional Styles
• Virtual Color
• Cascade Layers

Compositions

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

• Text Styles
• Layer Styles
• Animation Styles
• Focus Ring

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