Framework

All Frameworks
bootstrap tailwind chakra

Theme

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