@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
CBoxandCStackthat 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/cssor
npm install @chakra-ui/vue @emotion/cssNote: If you're using Nuxt, you need to install
@nuxtjs/emotionpackage as well to server-side render your styles.
yarn add @chakra-ui/vue @emotion/css @nuxtjs/emotion1. 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 devThanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!