Skip to content

v3
Compare
Choose a tag to compare
@jxnblk jxnblk released this 01 Dec 17:08
· 743 commits to master since this release
v3.0.0
118ab94

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: #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' />
Assets 2
Loading