v4.0.0

See the Migration Guide for updating from v3

v3

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' />

System components

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

v2 alpha

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