Build accessible & themeable React applications with your Bumbag

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

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

<Group
  backgroundColor="background"
  altitude="300"
  borderRadius="4"
>
  <Image
    fit="cover"
    width="200px"
    src="https://bit.ly/3fCkvhp"
  />
  <Level orientation="vertical" padding="major-2">
    <Stack spacing="major-1">
      <Heading fontSize="400" marginBottom="minor-1">
        The Local Hostel
      </Heading>
      <Tag palette="info" variant="tint">Great for solo travellers</Tag>
      <Paragraph color="text100" fontSize="100">
        <Icon icon="solid-map-marker-alt" marginRight="minor-1" />
        6km from city center
      </Paragraph>
    </Stack>
    <Paragraph fontSize="300">
      from <Text fontWeight="bold">$35</Text> a night
    </Paragraph>
  </Level>
</Group>

<Group
  backgroundColor="background"
  altitude="300"
  borderRadius="4"
>
  <Image
    fit="cover"
    width="200px"
    src="https://bit.ly/3fCkvhp"
  />
  <Level orientation="vertical" padding="major-2">
    <Stack spacing="major-1">
      <Heading fontSize="400" marginBottom="minor-1">
        The Local Hostel
      </Heading>
      <Tag palette="info" variant="tint">Great for solo travellers</Tag>
      <Paragraph color="text100" fontSize="100">
        <Icon icon="solid-map-marker-alt" marginRight="minor-1" />
        6km from city center
      </Paragraph>
    </Stack>
    <Paragraph fontSize="300">
      from <Text fontWeight="bold">$35</Text> a night
    </Paragraph>
  </Level>
</Group>

The Local Hostel

Great for solo travellers

6km from city center

from $35 a night