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

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
</Button>
// Compose with hooks
const linkProps = Link.useProps({
href: '/get-started'
});
<Button {...linkProps}>
Get started
</Button>
// Compose with render props
<Link href="/get-started">
{linkProps => (
<Button {...linkProps}>
Get started
</Button>
)}
</Link>

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

Copyright © 2020 Jake Moxey