Introduction

Hopper embraces a Styled System-inspired approach to styling components, allowing developers to define styles directly via props rather than writing CSS. This method provides a type-safe and intuitive API, making it easier to build consistent, on-brand interfaces without dealing with complex class names or global styles. With built-in intellisense and static analysis, developers can confidently apply design tokens without memorizing them, ensuring efficiency and reducing errors.

Style Props

Style props are the most fundamental way to style your components in Hopper. They are basically css styles as props. Learn more about style props

Key Concepts

Follow these links to learn key concepts about the Styled System:

• Responsive Styles
• Using Style Props on HTML Elements
• Using Style Props on custom components