React UI component library & design system Sample in 2020

React UI component library & design system Sample in 2020


tutorials -

Rebass

React UI component library & design system, built with styled-components and styled-system.

npm i [email protected]

Rebass is a library of highly-composable, primitive UI components for React,
built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application.
Based upon a configurable design system,
Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Getting Started

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

const App = props => (
  <Provider>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Provider>
)

Features

  • Kickstart your own React component library
  • Responsive style props from [styled-system][system]
  • Flexbox grid with [grid-styled][gs]
  • Style encapsulation with [styled-components][sc]
  • Functional stateless UI components
  • Configurable theming
  • 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

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff