Build & Test Components Netlify Status Chakra UI Vue downloads All contributors
@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
Head over here => https://vue.chakra-ui.com
- Ease of Styling: Chakra UI contains a set of layout components like
CBox
andCStack
that make it easy to style your components by passing props. Learn more - 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.
yarn add @chakra-ui/vue @emotion/css
or
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.
yarn add @chakra-ui/vue @emotion/css @nuxtjs/emotion
1. Import the Chakra UI plugin in your main.js
file.
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.
<template> <CThemeProvider> <CReset /> <!-- Your application code goes here! 😁 --> </CThemeProvider> </template> <script> import { CThemeProvider, CReset } from '@chakra-ui/vue' export default { name: 'App', components: { CThemeProvider, CReset } } </script>
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:
<template> <CThemeProvider> <CReset /> <!-- Your application code goes here! 😁 --> <CButton variantColor="blue"> Chakra consumed ⚡️ </CButton> </CThemeProvider> </template> <script> import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue' export default { name: 'App', components: { CThemeProvider, CReset, CButton } } </script>
You can also view all developed components in Storybook!
Interested in contributing? See our open issues! Remember to take a look at our CONTRIBUTORS guide.
yarn install
yarn build && yarn bootstrap
yarn dev
Thanks goes to these wonderful people (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
💻 🔧
This project follows the all-contributors specification. Contributions of any kind welcome!