chakra-ui-vue

by chakra-ui

chakra-ui / chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.

837 Stars 66 Forks Last release: 29 days ago (v0.6.6) MIT License 1.6K Commits 115 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build & Test Components Netlify Status Chakra UI Vue downloads All contributors

chakra-ui symbol

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

中文文档翻译Github问题

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
  • 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
  2. Usage a. With Nuxt

Installation

yarn add @chakra-ui/vue emotion

or

npm install @chakra-ui/vue emotion

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 @nuxtjs/emotion

Usage

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.

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:

Codesandbox starters

Storybook Components

You can also view all developed components in Storybook!

Development for Contributing:

Interested in contributing? See our open issues! Remember to take a look at our CONTRIBUTORS guide.

yarn install
yarn bootstrap
yarn dev

Related

Contributors ✨

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

📖 🖋 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.