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 (there are several other libraries out there for that), 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.
- Much smaller (~1KB)
- 8 components: Box, Flex, Text, Heading, Button, Link, Image, and Card
- Built with styled-components v4
- Intended to be extended
- Only one dependency: styled-system
- No default theme or colors
- No Provider component required
- Variant theme support for Button and Card
- Demo: https://rebass.now.sh
npm i [email protected]
- Removes 61 components
- Removes the
is prop in favor of styled-components'
- All components extend the base
- v3 should still be compatible with previous versions of styled-components and emotion
Where'd all the components go?
They're still here in spirit :ghost: They might come back to haunt you in separate, more modular packages.
The overall reduction in size of this codebase and splitting Rebass up into more modular packages will give users much more control over the size of their application bundles and allow a lot more flexibility in terms of building out custom libraries.
Why has system-components (
@rebass/components) been removed?
It adds a lot of overhead and complexity to the codebase, and most end-users don't benefit from it being used in Rebass.
Why are style props showing in the HTML
This is a long standing issue with styled-components and is due to the way the
styled higher-order component is implemented. I was hopeful that styled-components v4 would have addressed this issue to avoid some of the less-than-ideal solutions used in the previous version of Rebass, but that will have to wait. And, due to the introduction of the
as prop in styled-components, attempting to work around this issue while keeping up with the changing landscape of CSS-in-JS libraries doesn't seem worth it for a simple library like Rebass. That said, there might be a Babel plugin introduced in the future to help with this issue.
What's happening with @rebass/grid (formerly grid-styled)?
@rebass/grid package will be updated to match the APIs of the Box and Flex component here (which is virtually the same) and will be available as an even smaller alternative to this library.
Why has the Provider and theme been removed?
In order to remain as unopinionated as possible, themes are now optional, giving you complete control over what your application looks like. Separate theme packages might be introduced to provide some smart defaults.
v2 will still be available in a branch to continue development while v3 is in beta. Any pull requests for v2 should point to that branch.