Skip to content

Rebass
React primitive UI components
built with Styled System

npm i 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

Hello

<Flex
  alignItems='center'
  px={3}
  py={4}
  bg='muted'>
  <Heading>Hello</Heading>
  <Box mx='auto' />
  <Button>Beep</Button>
  <Button ml={2} variant='secondary'>Boop</Button>
</Flex>

<Flex
  alignItems='center'
  px={3}
  py={4}
  bg='muted'>
  <Heading>Hello</Heading>
  <Box mx='auto' />
  <Button>Beep</Button>
  <Button ml={2} variant='secondary'>Boop</Button>
</Flex>

Live Demo

“One of the best React component libs out there”
- Max Stoiber
“Rebass is the Bootstrap of React.”
- Jori Lallo
“A whopper component library built on styled-components. Responsive, systematic, scalable...the business!”
- Colm Tuite
“Why the hell are we now putting CSS in Javascript? I’m losing my mind with web developers trying to control everything in the world with client-side javascript. What a mess.”
- alttab

Get Started