React primitive UI components built with Styled System. https://rebassjs.org
npm i rebassimport React from "react";
import { Box, Heading, Button } from "rebass";
export default (props) => (
<Box>
<Heading>Hello</Heading>
<Button>Rebass</Button>
</Box>
);- 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
"One of the best React component libs out there"
"Rebass is the Bootstrap of React."
"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
Rebass is intended to be:
- Minimal
- Useful
- Unopinionated
- Flexible
- Consistent
- Extensible
- Themeable
Do one thing, and do it well
See Patterns for Style Composition in React for more on some of the thought behind Rebass.
Try it out: https://codesandbox.io/s/github/streetwriters/rebass/tree/master/examples/sandbox
See the Migration Guide.