Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Chakra UI Dashboard AdminKit Asteria Dashboard Motion Landing Library Soft UI Design System Soft UI Dashboard Tailwind Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Argon Dashboard
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

Discover 12 Chakra Components available in Loopple

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>