

Chakra Components - Chakra UI Dashboard
Discover 12 Chakra 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
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
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>