Build accessible & themeable React applications with your Bumbag

Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications.

Get startedComponents

Accessible by default

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.
<div id="alertTitle">
An error occurred
<div id="alertDescription">
We were unable to save your changes.
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}>

Theme your way

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

Compose for flexibility

Flexibly build your own components such as a pricing section, a contact form, or even a call-to-action.
Learn more about composition
// Compose with `use`
<Button use={Link} href="/get-started">
Get started
// Compose with hooks
const linkProps = Link.useProps({
href: '/get-started'
<Button {...linkProps}>
Get started
// Compose with render props
<Link href="/get-started">
{linkProps => (
<Button {...linkProps}>
Get started

Worn in production by

Code with an intuitive API
understandable by designers

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!

Copyright © 2020 Jake Moxey