:atom_symbol: React primitive UI components built with styled-system.

Rebass React UI component library & design system, built with styled-system, with support for styled-components & emotion. http://jxnblk.com/rebass npm i rebass Rebass is a library of highly-composable, primi

Information

Category: React / UI Frameworks
Watchers: 61
Star: 7.9k
Fork: 698
Last update: Sep 15, 2023

Resource links

http://jxnblk.com/rebass

https://github.com/rebassjs/rebass

README
Releases v4.0.0

Popular

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

CodeSandbox

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

Upgrading from v3

See the Migration Guide.

Previous Versions

Contributing | MIT License

v4.0.0(Aug 27, 2019)

See the Migration Guide for updating from v3

Source code(tar.gz)
Source code(zip)

v3.0.0(Dec 1, 2018)

Rebass v3 is a complete rewrite with the intent of making this UI component library useful to an even wider audience. Instead of trying to provide an off-the-shelf solution to styling UI, it tries to provide a solid base for extending these components into a highly customized UI component library. Rebass is intended to be useful in any React application and is so small it shouldn't make a huge impact on your overall bundle size.

Reduced package size (~1.17 kB)
Reduced number of components to 8
Updated for Styled Components v4 and Emotion v10
Reduced dependencies
Removed default theme and colors
Removed Provider component
Added variant theme support for Button and Card components
Removed is prop in favor of Styled Components' and Emotion's as prop
Uses Box component as base for all other components
Removed css prop in favor of Styled Components' and Emotion's implementations

Migrating from v2 to v3

Version 3 is a complete rewrite and major breaking change. It removes many of the components from the previous version to focus on a lighter, more generally useful set of 8 primitive components. If you've relied heavily on some of the Rebass v2 components that have been removed, you should consider forking or copying and pasting components into your application where needed. Alternatively there are other UI component libraries out there that can provide some of the same functionality from v2, such as Reakit.

It is also intended for Styled Components v4 or Emotion v10 and some features will not work as expected with previous versions.

Read more about the rationale here: rebassjs/rebass#474

Use the following guide to upgrade to Rebass v3.

1. Install the latest versions of Styled Components or Emotion

npm i styled-components@latest

Or, if you're using emotion:

npm i @emotion/core@latest @emotion/styled@latest

2. Replace v2 components

The following components have been removed and should be replaced with custom implementations:

Base
CSS
Root
Provider
DarkMode
ButtonOutline
ButtonCircle
ButtonTransparent
NavLink
BlockLink
Close
Subhead
Caps
Small
Lead
Truncate
Truncate
Blockquote
Divider
Pre
Code
Samp
Measure
Label
Input
Select
Textarea
Radio
Checkbox
Slider
Switch
BackgroundImage
Avatar
Embed
Container
Group
Row
Column
Border
Panel
Progress
Banner
Message
Toolbar
Tabs
Tab
Badge
Circle
Dot
Arrow
Donut
Position
Relative
Absolute
Fixed
Sticky
Modal
Drawer
Carousel
Tooltip
Hide

3. Replace imports for the following

If you've used any of the internal theme modules from Rebass, you will need to replace these with custom implementations:

theme
colors
createColors
invertTheme

4. Use a custom ThemeProvider

Since Rebass v3 no longer includes a default theme, replace the Rebass Provider component with a ThemeProvider to apply a custom theme.

5. Replace the `is` prop with `as`

// v2
<Box is='header' />

// v3
<Box as='header' />

Source code(tar.gz)
Source code(zip)

v2.0.0(Jun 24, 2018)

Added

Support for emotion

Changed

styled-system v2
grid-styled v4
Moves components to separate modules
Uses system-components
Updates docs site

Breaking

Renamed components
- TabItem -> Tab
- DotButton -> Dot
- PanelHeader -> Panel.Header
- PanelFooter -> Panel.Footer
Default theme (changed to match styled-system)
- The colors object no longer uses Palx
- Array color values have been removed
- radius has been replaced with radii
- font has been replaced with fonts
- monospace has been removed
- Theme fields are no longer exposed as exports
Props
- width is only available on Flex and Box
- fontSize is only available on typographic components
- direction is now flexDirection
- Flex align is now alignItems
- Flex justify is now justifyContent
- Flex wrap is now flexWrap
- Arrow up is now direction='up'
- active props have been removed in favor of custom styles
- Border now uses styled-system border props
- Banner image is now backgroundImage
- Absolute, Fixed, Relative, and Sticky now require values for top, right, bottom, and left props
- Drawer position prop has been renamed to side
- Drawer size prop has been replaced with width and height props

Removed

Custom HOC hoc
createLibrary function
util
createComponent
Palx dependency
ScrollCarousel component
CarouselSlide component
Star comonent

Source code(tar.gz)
Source code(zip)

v2.0.0-0(Feb 19, 2018)

Refactored code base, using the latest styled-system and grid-styled

styled-system v2
grid-styled v3
Removes custom HOC
Removes createLibrary function
Moves components to separate modules
Uses system-components
Removes Palx dependency
Updates docs site

Breaking Changes

Some components have been renamed:
- TabItem -> Tab
- DotButton -> Dot
- PanelHeader -> Panel.Header
- PanelFooter -> Panel.Footer
Some components have been removed:
- ScrollCarousel
- CarouselSlide
- Star
Some utilities have been removed:
- util
- hoc
- createComponent
- createLibrary
The default theme has changed to match styled-system
- The colors object no longer uses Palx
- Array color values have been removed
- radius has been replaced with radii
- font has been replaced with fonts
- monospace has been removed
- Theme fields are no longer exposed as exports
Some props have changed
- width is only available on Flex and Box
- fontSize is only available on typographic components
- direction is now flexDirection
- Flex align is now alignItems
- Flex justify is now justifyContent
- Flex wrap is now flexWrap
- Arrow up is now direction='up'
- active props have been removed in favor of custom styles
- Border now uses styled-system border props
- Banner image is now backgroundImage
- Absolute, Fixed, Relative, and Sticky now require values for top, right, bottom, and left props

Source code(tar.gz)
Source code(zip)

:atom_symbol: React primitive UI components built with styled-system.

React UI components powered by Tachyons with a styled-components like API

styled-components highlighting support in IntelliJ editors

This package has moved and renamed

vue-grid-styled grid-styledvue-grid-styled - A lightweight set of functional grid components, ported from React's grid-styled

Extension of styled-components with features for convert px to vw units

React Material Design Icons – built with Pixo, Styled Components, and Styled System

Minimal & Modern boilerplate for building apps with React & styled-components

a small starter for building a component library with styled-components

Defines themes via flexible color selectors for use with styled-components

Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components

PrimitiveNet: Primitive Instance Segmentation with Local Primitive Embedding under Adversarial Metric (ICCV 2021)

Reactive stylesheets for SolidJS

styled component for react & style-loader/usable

Awesome spinners for React 👋 ⚛ Built with styled-components 💅

Create a dark mode using Stuled-components

Create flexible layout and composite UI components without the need to define arbitrary custom props

Syntax highlighting for styled-components

Lint your styled components with stylelint!

React grid using CSS Grid and styled-components

Material Components Vue material-components-webMaterial Components Vue - wrapper around material-components-web for Vue.js

Share this repo

Related Repos

UI Frameworks

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build be...

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.

UI Frameworks

113

React mobile UI Components base on Vant

UI Frameworks

112

A React UI Kit based on Tailwind

UI Frameworks

Collection of Accessible React UI Components using TailwindCSS.

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

UI Frameworks

246

A React Component library for building modern applications easily & quickly

UI Frameworks

Embrace - Typesafe, declarative, and composable UI engine on top of React and Focal

UI Frameworks

🛠 React application framework based on Vite.

🚀 React application framework inspired by UmiJS. 类 UmiJS 的 React 应用框架。

UI Frameworks

A supa simple wrapper around Supabase.js to enable usage within Nuxt.

UI Frameworks

Peco: The featherweight Deno webapp framework. Built with Preact and htm.

UI Frameworks

A collection of Chakra UI-related awesomeness

UI Frameworks

122

A React.js admin dashboard template and UI library based on Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

UI Frameworks

802

Build your own chat UI with React components in few minutes.

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.