Chakra UI Vue

Welcome to the documentation of Chakra UI Vue. Here you can find more about Chakra UI Vue, what it is, how it can help you build applications, explore the components and theme, etc.

What is Chakra UI Vue?

Chakra UI Vue is a design system implementation that allows you to build applications and design systems with speed. Chakra UI Vue comes with a list of components, like a button, accordion component, etc. All the components are build with accessibility in mind and will ship with the needed ARIA-labels and keyboard interactions out of the box.

Chakra UI Vue also comes with a default theme, with colors, sizes, component styles, to get you started. But allows for a fully customization to make your application look exactly as you want it, thanks to the extensive theming API.

Chakra UI Vue is build for Vue.js 3 and is part of the Chakra-verse ecosystem, along with Chakra UI and Zag.js.

Why Chakra UI Vue?

@chakra-ui/vue-next is a design system implementation whose mission is to make building accessible and composable Vue.js web applications fun.

In order to make our components as accessible as possible, we've carefully crafted each component to be WAI-ARIA compliant while still making it possible to customize Chakra components based on constraint-based design principles.

Chakra UI Vue is able to do this because of principles adopted from patterns in the web development space that proved to be successful. We've borrowed tons of knowledge and inspiration from React's Chakra UI (The mother ship 😁) by Segun Adebayo, Tailwind CSS by Adam Wathan, Vuetify by John Leider, Buefy by Walter Thomasi, Reach UI from the folks over at React Training, and many other tools that make web development a colorful field.

Core Concepts

Chakra UI is built from the ground up with two main guiding principles in mind:

• Accessibility
• Constraint based design

Vision

• Provide accessible components out of the box.
• Bridge the gap between design and development, by providing a styling API that utilizes constraint-based design principles.
• Provide composable components that consumers can extend to create their own custom components.
• Find new ways to make building accessible Vue applications fun and fast.

Getting started

To get started, you can use the Codesandbox starter template:

Stackblitz starter template is coming soon.

There are starter demo's available on GitHub thanks to @Codebender828:

• Vue 3: https://github.com/codebender828/chakra-vue-v1-demo
• Nuxt 3: https://github.com/codebender828/chakra-nuxt-v1-demo

Or follow along with the installation guide.

Community

Please feel free to connect with the Chakra UI community on Discord.