rebass is a library of highly customizable React components for building user interfaces. It provides a set of primitive UI components that can be easily styled and composed to create responsive and visually appealing designs. While rebass offers a convenient way to build UI components, there are other libraries in the React ecosystem that provide similar functionality. Here are a few alternatives:

• emotion is a popular CSS-in-JS library that allows you to style React components with JavaScript. It provides powerful features for styling components, including theming and global styles.
• styled-components is another CSS-in-JS library that enables you to write CSS directly inside your JavaScript components. It offers a simple and intuitive way to style components and manage styles in React applications.
• theme-ui is a library for building consistent and themeable user interfaces in React. It provides a theme-based approach to styling components, allowing you to easily customize the look and feel of your application.

Check out this comparison: Comparing emotion vs rebass vs styled-components vs theme-ui.

Rebass

React primitive UI components built with Styled System. https://rebassjs.org

npm i rebass

Getting Started

import React from 'react'
import { Box, Heading, Button } from 'rebass'

export default props =>
  <Box>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Box>

Features

• 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"

– 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

Principles

Rebass is intended to be:

• Minimal
• Useful
• Unopinionated
• Flexible
• Consistent
• Extensible
• Themeable

Do one thing, and do it well

– Unix philosophy

See Patterns for Style Composition in React for more on some of the thought behind Rebass.

Documentation

• Docs
• Getting Started
• Props
• Extending
• Theming
• Reflexbox
• Text
• Heading
• Button
• Link
• Image
• Card

CodeSandbox

Try it out: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Related

• Styled System
• Theme UI
• Emotion
• Styled Components

Upgrading from v3

See the Migration Guide.

Previous Versions

• v3.2.2 – v3 Docs
• v2.3.2 – Docs for Rebass v2
• v1.0.7

---

Contributing | MIT License