Rebass

Start your design system without boiling the ocean. Build consistent UI with design constraints and user-defined scales. Best-in-class developer ergonomics with Styled System props. First-class support for theming & fully compatible with Theme UI. Quick, mobile-first responsive styles with array-based syntax. Flexbox layout with the Box and Flex components. Flexibility built in for high design & development velocity. Minimal footprint at about 4KB. By default, Rebass components are stylistically unopinionated and do not include a theme. You can add a theme to your application with a ThemeProvider component and by providing a theme in context. For this guide, use the Emotion ThemeProvider with the default Rebass preset theme. You can use Rebass components out-of-the-box to build larger, composite components. All components in Rebass are extensions of the base Box component, which includes an sx prop for theme-based styling as well as a standard set of Styled System style props.