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

Looking for React.js version?

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.

<!-- AirBnB Card Example -->

<template>
  <c-box w="300px" shadow="md" rounded="lg" p="5">
    <c-image rounded="md" src="https://bit.ly/2k1H1t6"/>
    <c-flex align="baseline" mt="2">
      <c-badge variant-color="pink">Plus</c-badge>
      <c-text
        ml="2"
        text-transform="uppercase"
        font-size="sm"
        font-weight="bold"
        color="pink.800"
      >
      Verified &bull; Cape Town
      </c-text>
    </c-flex>
    <c-text mt="2" font-size="xl" font-weight="semibold" line-height="short">
      Modern, Chic Penthouse with Mountain, City & Sea Views
    </c-text>
    <c-text mt="2">$119/night</c-text>
    <c-flex mt="2" align="center">
      <c-icon name="star" color="orange.400" />
      <c-text ml="1" font-size="sm"><b>4.84</b> (190)</c-text>
    </c-flex>
  </c-box>
</template>

Plus

Verified • Cape Town

Modern, Chic Penthouse with Mountain, City & Sea Views

$119/night

4.84 (190)