Rebass: When/why Rebass instead of Theme UI

[cour64]

I understand Rebass and Theme UI complement each other, but I'm a bit unsure of when or why one would use Rebass when there's Theme UI?

Does Rebass just provide a bunch on prebuilt primitives for convenience, that I would inevitably end up building (probably more poorly) using Theme UI?

[epilande]

From my understanding, they both use the Theme Specification and provides an sx prop.

rebass components are reusable primitive components ready to go out of the box with good default styles. All rebass components are essentially Box components that compose of styled-system which gives you the ability to style via props. Check out the source code; it's very digestible packages/rebass/src/index.js.

theme-ui doesn't come with any reusable primitive components. So yes, you will probably end up building those components yourself.

[cour64]

Thanks for the response, this solidifies my understanding. I ended up using reflexbox as a separate dependency and basically built my own primitives with theme-ui using the rebass source as a frame of reference. Thanks again!

[epilande]

I've done the exact same thing and the developer experience has been awesome so far! 😄

[ryancat]

Doesn't Theme UI has its own components? Why you say theme ui doesn't come with any reusable primitive components? @epilande

See https://theme-ui.com/components

For example, it mentions The Box & Flex layout components are similar to the ones found in Rebass, but are built with Emotion and @styled-system/css. at the layout section https://theme-ui.com/layout/#box--flex

I am new to the two libraries and it seems to me that Theme UI is trying to consolidate all the good parts of styling tools, and become a closed loop library, while rebass is more open to be used with other tools. Kinda like IOS and Android.

[ryancat]

Also, is reflexbox part of rebass now? https://rebassjs.org/reflexbox/

[epilande]

Doesn't Theme UI has its own components? Why you say theme ui doesn't come with any reusable primitive components? @epilande

My comment from a month ago is now invalid; Components in theme-ui were just added very recently. https://github.com/system-ui/theme-ui/pull/411

[ryancat]

Thanks for pointing me to that pull request! @epilande

[jeffryang24]

Currently I want to learn building a design system (for gaining experience in design world), since theme-ui already includes the primitive component, such us Box and Flex and also supports color-modes. This means that I only need to use theme-ui without rebass right? My current understanding is that theme-ui is the full version of rebass. Cmiiw.. :bowing_man:

[jxnblk]

@jeffryang24 yes, this issue was opened before @theme-ui/components was published. Rebass is an older project which has informed a lot of the direction and ideas in Theme UI. Rebass will probably continue to exist in its current API for those who have adopted the library, but if you're starting from scratch, Theme UI offers a lot more besides components

[brambow]

Hi, I was following this thread. I recently started a React component library of some higher-level components that use Rebass as a foundation. When I was looking at them, ThemeUI seemed more suited for building out apps/sites (with the MDX stuff and gatsby plugin), so I went with Rebass. Would you recommend migrating to ThemeUI even for a component library?

[kraiovsky]

@jeffryang24 yes, this issue was opened before @theme-ui/components was published. Rebass is an older project which has informed a lot of the direction and ideas in Theme UI. Rebass will probably continue to exist in its current API for those who have adopted the library, but if you're starting from scratch, Theme UI offers a lot more besides components

Hello, @jxnblk this helps a lot.
How would you compare Reflexbox to Theme UI?

[embryCODE]

I know this issue is closed but it's the only pertinent discussion I was able to find online. I'm a TypeScript developer. Based on what I'm seeing, the only reason to choose Rebass over Theme-UI at the moment is that type definitions for @theme-ui/components are still being worked on. Once those are finished, I believe Theme-UI is a full replacement of Rebass and more. Is that the concensus?

[jdmswong]

I want to add my two cents for anyone deciding between rebass / theme-ui for the first time.

I tried out theme-ui's components but ended up going with rebass using the theme-ui theme because theme-ui forces you into using the sx prop for most props like height and flexDirection even for the <Flex element itself.

I'm not going to use those properties in my themes and don't want to nest most of my style props every time I need one, so I used rebass.

[cereallarceny]

@embryCODE To be honest, why not avoid this confusion all together and just eliminate Rebass altogether? I've never understood the need for three libraries, two of which (theme-ui and rebass) are basically doing the same thing. From "lowest level" to "highest level":

1. styled-system is a core library for designing a component system
2. rebass is a few components built using styled-system
3. theme-ui is rebass but with even more components

If that's true... why bother confusing people? It would make a lot more sense to just have styled-system for those that want to go it alone and theme-ui for those who want a head-start. You're building a component system either way, it just depends on where you want to start from.

[embryCODE]

@cereallarceny Yeah, I think the main thing is that it was a little unclear that theme-ui is the next rebass. Once I understood that that was the case, then I knew that I didn't need both, especially now that theme-ui has so many great components. Why not indicate on rebassjsj.org that theme-ui is the new thing?

[clehene]

Does Theme UI work with Styled Components?

[pedroapfilho]

@clehene https://theme-ui.com/guides/styled-components/

[UiCandy]

Just when I thought I'd figured out the ever so minuscule differences between Rebass & Theme-UI, Reflexbox arrives on the scene. 😅
So will piggyback on @embryCODE comment and take that Theme-UI is the lib that prevails?