Themeable components for
React & React Native

Bumbag is a themeable, accessible & composable component library for React & React Native allowing you to create cross-platform applications with ease.

Get started:

Style your components using props

to help you build with speed

All components in Bumbag are built on top of the primitive Box component that allows you to use "style props" in your components allowing you to rapidly build web & native applications.Learn more
Editable example
;

Jake Moxey

Bumbag Entrepreneur

Twitter

Dark mode

provided out-of-the-box

Bumbag provides you with dark mode out-of-the-box — all you have to do is trigger the setColorMode function! You can also create other custom modes as well (such as: Christmas mode or Dank mode).Learn more
function Example() {
const { colorMode, setColorMode } = useColorMode();
return (
<Stack alignX="center">
<Text
color="text100"
fontSize="100"
fontWeight="500"
textTransform="uppercase"
>
Current mode
</Text>
<Text fontWeight="500">{colorMode}</Text>
<Set>
<Button onClick={() => setColorMode('default')}>
Light
</Button>
<Button onClick={() => setColorMode('dark')}>
Dark
</Button>
</Set>
</Stack>
)
}
Current modedefault

Accessible out-of-the-box

to assist your diverse audience

Powered by Reakit under the hood, all components come with accessible HTML attributes & keyboard interactions out of the box and follow the WAI-ARIA standards.
<Alert title="An error occurred" type="danger">
We were unable to save your changes.
</Alert>
<div
role="alert"
aria-labelledby="alertTitle"
aria-describedby="alertDescription"
>
<div id="alertTitle">
An error occurred
</div>
<div id="alertDescription">
We were unable to save your changes.
</div>
</div>

Theme your way

to suit your brand

Put yourself in control and have the ability to customize any component by altering the theme at a global or component level.Learn more

Heading

This is some text
Primary
Success
Danger
Warning
const theme = {
fonts: {
default: '"Comic Sans MS", sans-serif',
heading: '"Helvetica", sans'
},
palette: {
primary: '#574feb',
success: '#0a7d33',
danger: '#da1717',
warning: '#ed9c22'
},
Button: {
defaultProps: {
palette: 'primary'
}
}
}
<BumbagProvider theme={theme}>
...
</BumbagProvider>

Code with an intuitive API

understandable by designers

Editable example
;

The Local Hostel

Great for solo travellers

6km from city center

from $35 a night

Join our growing community

Join our discord server to get the latest updates, chat with other Bumbag enthusiasts, and see what's happening in the community!Join our discord
Copyright © 2021 Jake Moxey