Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Asteria Dashboard Soft UI Design System Riva Dashboard Tailwind Chakra UI Dashboard Motion Landing Library Soft UI Dashboard Argon Dashboard Motion Landing Library React Soft UI Dashboard Tailwind
All 32
Components 12
Typography 3
Cards 8
Sidebars 1
Tables 2
Navbars 1
Cards Section 2
Tables Section 1
Projects Section 1

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

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>