https://github.com/chakra-ui/chakra-ui-vue
⚡️ Build scalable and accessible Vue.js applications with ease.
https://github.com/chakra-ui/chakra-ui-vue
a11y accessibility chakra-ui composition design-system hacktoberfest library nuxt ui vue vuejs vuejs-components wai-aria
Last synced: about 2 months ago
JSON representation
⚡️ Build scalable and accessible Vue.js applications with ease.
- Host: GitHub
- URL: https://github.com/chakra-ui/chakra-ui-vue
- Owner: chakra-ui
- License: mit
- Archived: true
- Created: 2019-08-11T17:53:59.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-07-19T08:14:25.000Z (over 2 years ago)
- Last Synced: 2025-09-11T02:47:51.481Z (2 months ago)
- Topics: a11y, accessibility, chakra-ui, composition, design-system, hacktoberfest, library, nuxt, ui, vue, vuejs, vuejs-components, wai-aria
- Language: JavaScript
- Homepage: https://vue.chakra-ui.com
- Size: 9.53 MB
- Stars: 1,861
- Watchers: 21
- Forks: 137
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - Chakra UI Vue - ⚡ A lightweight & customizable component library to help you build accessible Vue applications and sites with speed. (Components & Libraries / Frameworks)
- awesome-starred-test - chakra-ui/chakra-ui-vue - ⚡️ Build scalable and accessible Vue.js applications with ease. (JavaScript)
- awesome-a11y-vue - @chakra-ui/vue - Build scalable and accessible Vue.js applications with ease. (Accessible libraries / Vuepress)
- awesome-access - @chakra-ui/vue - Build scalable and accessible Vue.js applications with ease. (Accessible libraries / Vuepress)
README
Build scalable and accessible Vue.js applications with ease.
**@chakra-ui/vue** gives you a set of accessible and composable Vue components that you can use to build your favourite applications and sites.
Made for Vue 2.X
## Looking for the documentation?
Head over here => https://vue.chakra-ui.com
## Features
- **Ease of Styling:** Chakra UI contains a set of layout components like `CBox` and
`CStack` that make it easy to style your components by passing props.
[Learn more](https://chakra-ui.com/style-props)
- **Flexible & composable**: Chakra UI components are built on top of a Vue UI Primitive for endless composability.
- **Accessible**. Chakra UI components follows the WAI-ARIA guidelines
specifications and have the right `aria-*` attributes.
- **Dark Mode 😍**: Most components in Chakra UI are dark mode compatible.
### Table of Contents
1. [Installation](#installation)
2. [Usage](#usage)
a. [With Nuxt](#nuxt-usage)
- [Looking for the documentation?](#looking-for-the-documentation)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Codesandbox starters](#codesandbox-starters)
- [Storybook Components](#storybook-components)
- [Development for Contributing:](#development-for-contributing)
- [Related](#related)
- [Contributors ✨](#contributors-)
## Installation
```bash
yarn add @chakra-ui/vue @emotion/css
```
or
```bash
npm install @chakra-ui/vue @emotion/css
```
> **Note:**
> If you're using Nuxt, you need to install `@nuxtjs/emotion` package as well to server-side render your styles.
```bash
yarn add @chakra-ui/vue @emotion/css @nuxtjs/emotion
```
## Usage
**1. Import the Chakra UI plugin in your `main.js` file.**
```js
import Vue from 'vue'
import Chakra from '@chakra-ui/vue'
import App from './App.vue'
Vue.use(Chakra)
new Vue({
el: '#app',
render: (h) => h(App)
}).$mount()
```
**2. Wrap your application inside the Chakra `CThemeProvider`.** We also recommend that you include the `CReset` component to normalize all browser styling.
_In your `App.vue` file._
```html
import { CThemeProvider, CReset } from '@chakra-ui/vue'
export default {
name: 'App',
components: {
CThemeProvider,
CReset
}
}
```
If you'd like to toggle your app between dark and light mode, you can also wrap your application inside the `ColorModeProvider` component.
**3. Hurray!🎉 Now the fun can begin**. You can start using components like so:
```html
Chakra consumed ⚡️
import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'
export default {
name: 'App',
components: {
CThemeProvider,
CReset,
CButton
}
}
```
### Codesandbox starters
- [Vue Starter](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g)
- [Nuxt Starter](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4)
- [Gridsome Starter](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9)
### Storybook Components
You can also view all developed components in **[Storybook](https://chakra-ui-vue.netlify.com)!**
### Development for Contributing:
Interested in contributing? See our [open issues](https://github.com/chakra-ui/chakra-ui-vue/issues)! Remember to take a look at our [CONTRIBUTORS](./.github/CONTRIBUTING.md) guide.
```bash
yarn install
yarn build && yarn bootstrap
yarn dev
```
#### Related
- [Chakra UI for React](https://github.com/chakra-ui/chakra-ui)
- [Vuetify](https://vuetifyjs.org)
- [Buefy](https://buefy.org)
- [Vuesax](https://lusaxweb.github.io/vuesax/)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Jonathan Bakebwa
💻 ⚠️ 📖
Mesut
💻 ⚠️
Omereshone Kelvin Oghenerhoro
📖 💻
Eric Carboni
📖
ankorGH
📖
Emmanuel Raymond
💻 📖
Harry Gulliford
📖
IFEANYICHUKWU AMAJUOYI
📖
Pierre Grimaud
📖
Ekunola Ezekiel
🔧 📖
Gift Egwuenu
📖
Joshua Angelo Bienes
📖
Saptak Sengupta
📖
Kuro Hsu
📖 💻
Anmol
📖
Vishnumohan R K
📖
Ken Love
💻 ⚠️
Guilherme Schalch
💻
Žiga Vukčevič
📖
Sybren W
📖 🖋 💡 💻
odanado
💻 🔧
Jonathan Hutchison
💻 🐛 🤔 ⚠️ 📖
JT Houk
📖 📦
Vincent Palma
📖
MaySoMusician
💻
Martin
💻 ⚠️
Ejiro Asiuwhu
📖
Abel N. Nieva
💻
Lê Thông
💻
Reinier van der Leer
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!