2^nd Practical Class:
React Styling - Chakra UI

React Browser plugin

React Developer Tools

• Chrome
• Firefox

CSS-in-JS

👩‍🎤 Emotion library for react React:

Generated HTML:

Generated CSS:

Chakra UI

⚡️ Chakra UI is a React component library that provides accessible, themeable building blocks, helping teams implement their design system in code.
It's build on top of Emotion.

= with styling

Resources

• Box
• Background ()
• Sizing (, , , )
• Spacing (, , , , )
• Border (, , )
• Effects ()
• Transitions (, )
• Responsive Design & Breakpoints
• Theming (customize default Chakra UI Design Tokens)

By default, Stack applies and to its children.

Chakra Layout Components

• 1D layout → /
• 2D layout → /
• Content framing → / /
• Inline flows → /

Advanced – Escaping the Design System

Chakra UI encourages using style props and tokens for consistency, but sometimes you need raw CSS for effects the system doesn’t cover (e.g. clip-path, custom gradients). Use this escape hatch sparingly, as you lose theme awareness and design consistency.