Rebass

v2.0.0
Flexible & functional React design system, built with styled-system
DocumentationGitHub
npm i rebass@next

Rebass is a library of highly-composable, primitive UI components for React, built with styled-system to make building consistent, responsive web apps simpler and faster.

Features

Functional stateless UI components
Style encapsulation with CSS-in-JS and styled-components
No external CSS dependencies
Configurable theming
Extensible base components
Design-system based consistency
Built for responsive web design
Write less custom CSS
“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

Live Demo

Hello, Rebass

Beep

<Box px={4} py={5} color='white' bg='blue'>
  <Heading
    is='h1'
    fontSize={[ 4, 5, 6 ]}>
    Hello, Rebass
  </Heading>
</Box>
<Flex
  px={4}
  py={5}
  alignItems='center'>
  <Heading color='blue'>
    Beep
  </Heading>
  <Box mx='auto' />
  <Button>
    Beep
  </Button>
  <ButtonOutline ml={2}>
    Boop
  </ButtonOutline>
</Flex>

Getting Started

Install Rebass now and read the docs to get started
npm i rebass@next
Documentation
GitHubMade by Jxnblk