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
is prop in favor of Styled Components' and Emotion's
- Uses Box component as base for all other components
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:
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:
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
<Box is='header' />
<Box as='header' />