Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rebass with all npm packages installed. Try it out:

require("styled-components/package.json"); // styled-components is a peer dependency. var rebass = require("rebass")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rebass v3.0.1

React primitive UI components built with styled-system

Rebass

React primitive UI components built with styled-system. https://rebassjs.org

Build Status Coverage Downloads Version MIT License

npm i rebass

Note: Rebass v3 is intended for use with styled-components v4. Some features may not work with previous versions.

Getting Started

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

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

Emotion

To use Rebass with emotion, install and use the @rebass/emotion

npm i @rebass/emotion @emotion/core @emotion/styled

Features

  • 8 core UI components to serve as the basis for design systems
  • Super small (~1KB)
  • Responsive, themeable style props from styled-system
  • Flexbox grid with the Box and Flex components
  • Extensible base components
  • Design-system based consistency
  • Built for responsive web design

"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 built with the following principles in mind.

  • Minimal
  • Useful
  • Unopinionated
  • Flexible
  • Consistent
  • Extensible
  • Themeable
  • Do one thing well

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

Documentation

CodeSandbox

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

Related

Previous Versions


Contributing | MIT License

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free