Build Accessible Vue apps with Speed ⚡️

Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed.

Get started Github

Accessible

Chakra UI strictly follows WAI-ARIA standards. All components come with proper attributes and keyboard interactions out of the box.

Themeable

Quickly and easily reference values from your theme throughout your entire application, on any component.

Composable

Components were built with composition in mind. You can leverage any component to create new things.

<template>

  <!-- AirBnB Card Example -->

  <CBox w="300px" shadow="md" rounded="lg" p="5">
    <CImage rounded="md" src="https://bit.ly/2k1H1t6"/>
    <CFlex align="baseline" mt="2">
      <CBadge variantColor="pink">Plus</CBadge>
      <CText
        ml="2"
        textTransform="uppercase"
        fontSize="sm"
        fontWeight="bold"
        color="pink.800"
      >
      Verified &bull; Cape Town
      </CText>
    </CFlex>
    <CText mt="2" fontSize="xl" fontWeight="semibold" lineHeight="short">
      Modern, Chic Penthouse with Mountain, City & Sea Views
    </CText>
    <CText mt="2">$119/night</CText>
    <CFlex mt="2" align="center">
      <CIcon name="star" color="orange.400" />
      <CText ml="1" fontSize="sm"><b>4.84</b> (190)</CText>
    </CFlex>
  </CBox>
</template>

Plus

Verified • Cape Town

Modern, Chic Penthouse with Mountain, City & Sea Views

$119/night

4.84 (190)