Chakra UI Dashboard Components

Discover 12 components available in Chakra UI Dashboard

Button Icon Right

Component from Chakra UI Dashboard Builder
<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
   Arrow
  </Button>

Button Icon Left

Component from Chakra UI Dashboard Builder
<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
   Email
  </Button>

Input Outline

Component from Chakra UI Dashboard Builder
<Input data-type='Input' placeholder='Basic usage' />

Divider

Component from Chakra UI Dashboard Builder
<Divider data-type='Divider' my='4'></Divider>

Avatar Image

Component from Chakra UI Dashboard Builder
<Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar>

Textarea

Component from Chakra UI Dashboard Builder
<Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>

Input Filled

Component from Chakra UI Dashboard Builder
<Input data-type='Input' variant='filled' placeholder='Filled' />

Badge

Component from Chakra UI Dashboard Builder
<Badge data-type='Badge'>Default</Badge>

Avatar Group

Component from Chakra UI Dashboard Builder
<AvatarGroup data-type='AvatarGroup'>
 <Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar>
 <Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar>
 <Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar>
 <Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar>
 <Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar>
</AvatarGroup>

Button

Component from Chakra UI Dashboard Builder
<Button data-type='Button' colorScheme='blue'>Button</Button>