This package consist of all DesignSystem components from AdminBro so you can use all of them outside the admin-bro core.

Installation outside the AdminBro

yarn add styled-components @admin-bro/design-system

Optionally, if you use typescript, you might want to install types for styled-components

yarn add --dev @types/styled-components

Design System needs a theme so in order to use it you have to use ThemeProvider from styled-components like this:

import { ThemeProvider } from 'styled-components'

// theme is the default theme, which you can alter
import { theme, Button, Box, Icon } from '@admin-bro/design-system'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box variant="grey">
        <Button><Icon icon="Add" />Click Me</Button>
        <Button variant='primary' ml="xl">I am important</Button>

export default App;

Changing theme

Design System provides you with the default theme. It contains all the parameters like paddings, colors, font sizes etc. For the list of all available parameters take a look at the Theme spec.

But nothing stands in a way for you to change the default theme. In order to do that you can use combineStyles method:

import { combineStyles } from '@admin-bro/design-system`

const myTheme = combineStyles({
  colors: {
    primary100: '#000'

<ThemeProvider theme={myTheme}>

Changing particular components

Sometimes you might want to change the look and feel of a particular component - not the entire theme. You can achieve that with styled method:

import { Button } from '@admin-bro/design-system'
import styled from 'styled-components'

const MyRoundedButton = styled(Button)`
  border-radius: 10px;

and then you can use it like a normal button component:

<MyRoundedButton variant="primary">Rounded I am</MyRoundedButton>


For the list off all the components and their documentation go to

Bundled packages

This npm package comes with the bundled versions as well. You can find them under:

  • node_modules/@admin-bro/design-system/bundle.development.js
  • node_modules/@admin-bro/design-system/bundle.production.js (minified)

(they can also be bundled by using bundle script: yarn bundle or NODE_ENV=production yarn bundle)

In order to use them you will have to host them (put to your 'public' folder) and then put them into the HEAD of your page:

<!-- ... -->
<script crossorigin src="[email protected]/umd/react.development.js"></script>
<script crossorigin src=""></script>
<script crossorigin src="/bundle.development.js"></script>
<!-- ... -->


If you find any UI errors - feel free to create a PR.


Inside the repo there is a storybook folder containing all the stories. In order to run it go inside and:

yarn install
yarn storybook

View Source admin-bro-design-system/src/index.ts, line 2


# static combineStyles(newTheme) → {Theme}

Applies new styles to the default theme

Name Type Description
newTheme Partial.<Theme>

View Source admin-bro-design-system/src/utils/combine-styles.ts, line 31


# static formatDate(date) → {string}

Formats date to YYYY-MM-DD

Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 16


# static formatDateProperty(date, propertyType) → {string}

Based on the property type formats date to either YYYY-MM-DD HH:mm or YYYY-MM-DD

Name Type Description
date Date
propertyType PropertyType

View Source admin-bro-design-system/src/utils/date-utils.ts, line 41


# static formatDateTime(date) → {string}

Formats date to YYYY-MM-DD HH:mm

Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 32


# static formatTime(date) → {string}

Formats date to HH:mm

Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 24


# static pad(pad) → {sting}

adds leading 0 to the number when it is lower than 10

Name Type Description
pad number

number - i.e 8

View Source admin-bro-design-system/src/utils/date-utils.ts, line 8

formatted number: i.e. "08"