Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Chakra UI Dashboard View Theme 
<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
   Arrow
  </Button>

Button Icon Left

Chakra UI Dashboard View Theme 
<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
   Email
  </Button>

Input Outline

Chakra UI Dashboard View Theme 
<Input data-type='Input' placeholder='Basic usage' />

Divider

Chakra UI Dashboard View Theme 
<Divider data-type='Divider' my='4'></Divider>

Avatar Image

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

Textarea

Chakra UI Dashboard View Theme 
<Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>

Input Filled

Chakra UI Dashboard View Theme 
<Input data-type='Input' variant='filled' placeholder='Filled' />

Badge

Chakra UI Dashboard View Theme 
<Badge data-type='Badge'>Default</Badge>

Avatar Group

Chakra UI Dashboard View Theme 
<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

Chakra UI Dashboard View Theme 
<Button data-type='Button' colorScheme='blue'>Button</Button>