Design System

This package consist of all DesignSystem components from AdminBro so you can use all of them inside and outside the AdminBro environment.

It was created with the help of 2 amazing packages:

• styled-components which is a peerDependency
• styled-system

make sure to check them out in order to use full potential of this design system

Usage within the AdminBro

If you are using this module inside AdminBro there is no need to install anything, just use its components like this:

import { Box, Button } from '@admin-bro/design-system'
 
// and here you can use them

Usage outside the AdminBro

Nothing stays in a way of using @admin-bro/design-system in your project which doesn't require AdminBro. Simply visit the module page and follow installation instructions

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 override the Theme or its selected parameters use AdminBroOptions.branding theme property.

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>

Components

This is the list of all our components

Atoms

Badge	Box	Button
CheckBox	Header	Icon
Illustration	Input	Label
Link	Loader	Placeholder
Radio	Section	Text
TextArea	Table

Molecules

DatePicker	InfoBox	LoggedUser
MessageBox	NavGroup	Pagination
Stepper	Step	FormGroup
DropZone	DropZoneItem	DropDown
Drawer