An Auto-generated Admin Panel for your Node.js Application

This package consists 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 to use the 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 the theme

The 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 the 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	Tooltip	Table

Molecules

DatePicker	InfoBox	MessageBox
Modal	NavigationElement	Pagination
Stepper	Step	FormGroup
DropZone	DropZoneItem	DropDown
Drawer	RichText	ValueGroup