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:

Web Native

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

<Card borderRadius="5" paddingY="major-4" width="300px">
  <Stack spacing="major-2" alignX="center">
    <Avatar
      borderRadius="100%"
      src="https://bit.ly/3tve2fu"
      size="large"
    />
    <Stack alignX="center" spacing="major-1">
      <Heading fontSize="500">Jake Moxey</Heading>
      <Text
        use="h2"
        color="text100"
        fontSize="150"
        fontWeight="500"
        textTransform="uppercase"
      >
        Bumbag Entrepreneur
      </Text>
    </Stack>
    <Button
      use="a"
      href="https://twitter.com/jxom_"
      iconBefore="solid-twitter"
      palette="twitter"
      variant="outlined"
    >
      Twitter
    </Button>
  </Stack>
</Card>

<Card borderRadius="5" paddingY="major-4" width="300px">
  <Stack spacing="major-2" alignX="center">
    <Avatar
      borderRadius="100%"
      src="https://bit.ly/3tve2fu"
      size="large"
    />
    <Stack alignX="center" spacing="major-1">
      <Heading fontSize="500">Jake Moxey</Heading>
      <Text
        use="h2"
        color="text100"
        fontSize="150"
        fontWeight="500"
        textTransform="uppercase"
      >
        Bumbag Entrepreneur
      </Text>
    </Stack>
    <Button
      use="a"
      href="https://twitter.com/jxom_"
      iconBefore="solid-twitter"
      palette="twitter"
      variant="outlined"
    >
      Twitter
    </Button>
  </Stack>
</Card>

;

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

<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">
        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">
        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

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