Code at the Speed of Design in Chakra UI Vue

Rate this content

With Chakra UI, we are able to override component styles to express custom design systems with accessible Vue components. This talk explores the new theme API in v1 and how you can use it to quickly build custom UIs for your application.

23 min
21 Oct, 2021

Video Summary and Transcription

Jonathan Bakebwa introduces Chakra UI View, a component library focused on accessibility, with features like extending themes and defining custom variants. The upcoming versions of Chakra UI V1 will introduce a zero-runtime build and a theming API with component overrides, custom variants, and custom sizes. The Talk demonstrates how to implement a button design using Chakra UI, customize button styles, create custom button sizes, and use icons from external libraries. Chakra UI allows for quick implementation of UI designs and is recommended for developers looking to enhance their designs.

Available in Español

1. Introduction to Chakra UI View

Short description:

Jonathan Bakebwa introduces Chakra UI View, a component library focused on accessibility. It allows for extending themes, defining custom variants, sizes, and components. The V1 release includes a full TypeScript rewrite, a new theming API, composables, and a factory API for styling components. The community's support with tools like Volar and Vite makes it easier to use with Vue 3.

Hi, everybody. My name is Jonathan Bakebwa. I am the creator and one of the maintainers of Chakra UI View, and I'm also a UI engineer and engineering manager at During day, that's what I do. I am also a final year computer science major at Beijing Institute of Technology, and I am excited to be here today at Vue.js London talking to us about coding at the speed of design with Chakra UI View.

I'm going to start by introducing Chakra UI as a component library. Chakra UI is a component library with focus on accessibility. And what that means is that all components in the Chakra UI library have been built from the ground up with WAI-ARIA-spec compliance for authored components.

We've also built in the ability to extend the theme of the Chakra UI components, and this becomes so much easier inside of V1, and the way that we've made it more convenient is that you can now override the initial rendered styles for components that are natively inside Chakra UI. And we've also added more features that allow you to define custom variants, custom sizes, and even create your own custom components and theme them using Chakra UI. And what this allows for is that you have a lot more concise code and you have a bit more speed when it comes to implementing UIs. So we see this as a step towards bridging the gap between design and code, especially for within the browser context.

So for V1, we did a full TypeScript rewrite. And what we did was that we re-implemented the theming API, and I want to talk about the theming API because that's going to be the focus of this talk. And we also were able to implement some composables. And so what we did was that when we were writing the components for V1 was that we split a of the logic out into composables, and the component only had to deal with the styles for that component. So this allows you to be able to consume some of the hooks that are commonly used. So that means you don't need to import another third-party library for hooks that we are exposing.

The other thing that we've added inside of V1 is a factory API. So this factory API provides some component primitives that you can style directly. And you can also, since it's a function, you can also use it can also provide it a component that's not initially styled with Chakra UI. And this component will be able to... The return value will now be the same component, with the same props, everything will be the same. With the differences, you can now add some style props to it, and it will work natively. So with the new Theming API, you can also define custom components. And we've also provided a new API that will...with the use style config. And what this allows you to do is to define styles within your theme, and you can then consume those values when you create your own custom components. And since it's a full TypeScript rewrite, we have spent a lot of work and effort trying to make sure that all the style props are accessible to you within your Vue templates. And thanks to the community for working with different tools like Volar and with Vite, all this becomes a lot more easier if you're going into Vue 3. We definitely recommend using Vite for Chakra UI Vue, Vue V1.

2. Upcoming Features in Chakra UI V1

Short description:

The upcoming versions of Chakra UI V1 will introduce a zero-runtime build, state machines for logic-heavy components, and a theming API with component overrides, custom variants, and custom sizes. The component overrides allow for overriding base styles for specific components, while custom variants and sizes provide flexibility in styling. These features make it easier to create unique UI designs using Chakra UI.

If you have Webpack, it's also possible to use it. Some of the ideas we're exploring inside of probably the later versions of V1 would be a zero-runtime build. And what this would allow for is that we would walk through your entire template context because we realized most of our users are using Chakra UI to define maybe static properties, static style props onto the components. And so, what we can also do is that we can walk through the entire your template and we can then extract those style props into CSS that we'll then inject into your single file component styles.

We're also planning to, in the future, we're also planning to use state machines for logic heavy components. For example, the accordion has a lot of logic that we have to compute and a lot of states that we have to manage. And the best way to deal with this that we discovered as a team was to use state machines. And for this, what this allows us to do is that the state machine only returns the current state that we then destructure into the components that are then rendered on the page. So this makes it a lot more convenient to use, and it's certainly a good way for us to share logic. And so, in the future, if somebody decides to build ChakraUI for Svelte, they don't have to rewrite all this logic and use side effects for things that would probably already exist inside a state machine, they just need to access that state and then provide it to their components, which is really, really convenient.

So what's coming inside of the V1 theming API? As I mentioned before, we're going to be providing component overrides, which we'll then look at today. We're also providing a custom variants API. We're also providing the ability to create custom sizes for your components. We're also providing the factory function API and custom components. So for today's talk, I want to focus on three attributes that the theming API will cover inside of V1. The one, among so many, by the way, since we're going to have some time, we can only talk about three of them. The first one will be component overrides. So inside of the theme object, for those of us that are quite familiar with the V1, of V0.x of chakray y, within the plugin options, there's a value called extend theme. And on the extend theme, for V1 we've added a key called the components key. So this component key allows you to now override the base styles for the component that you are then choosing to override within the extend theme. So when you define the base styles, those styles get applied to all the buttons. So you don't need to create a custom button so it can do that. The second thing we have allowed for you to do is to define custom variants. So now within Chakra UI, you can then create a custom variant within for that component that you are, are hoping to consume the variant. And finally, you can then define custom sizes, which is really convenient for creating an extra large button. If you need a button that's 100 meters wide, you can certainly now do that with Chakra UI view, I wouldn't advise you creating a 100 meter wide button, it wouldn't fit on the screen. But it's certainly possible.

So let's look at all of this in action, what's going to, how we're going to implement this, this, how we're going to see these things in action. So for starters, I went online and I tried to collect you know, a bit of a user interface with a few custom, which has components that are not implemented inside of, whose designs are not implemented inside of Chakra UI. So looking very quickly at this, this UI, I can see there's a button here and this button appears to have a different theme compared to the default styles that are provided inside of Chakra UI.

3. Implementing the Button Design with Chakra UI

Short description:

The buttons in this design have different styles, sizes, and icons. To implement this design using Chakra UI, we can create a new custom variant within the theme object or override the button entirely. I will clone my Chakra UI Chidori starter and use it for this project.

And there's this variety of a solid button that has a black style, a black background, the edges are rounded. And there's also this, this, this, this, this style here. So we can already see certain things are being shared by the buttons.

Second thing that I can see here is that the height of this button is not really quite the same as this button. So this is a different size and so we might need to create a custom size for this component. It's inheriting icons from an external library because we don't have this icon inside of Chakra UI natively. So we might need to use a custom icon.

So I'm going to go ahead and create a project that we can then clone, we can then basically try to re-implement this using Chakra UI. And the beauty of this is we're not going to rewrite all the button logic because we need the button to look different and you're not going to write extra nested styles so you can make sure that the button looks like the way you want it to look like. You can simply define these and create a new custom variant within the theme object or you can decide to override the button entirely and then make all buttons share these styles. So let's dive right in and let's see what that looks like.

So I think the first thing we're going to do is I think I'm going to go ahead and try to clone this button using Chakra UI and try to implement this. You know, I'm going to assume a designer handed it over to me and in most cases I probably already know all the different measurements of all the pixels about the radii and everything else in particular but we may not go that deep. I just want to show you how easy it is to implement the visual representation for this button.

So the first thing I'm going to do is I'm going to go ahead and clone my Chakra UI Chidori starter. Actually, I think it's a pretty good starter. I'm going to use it for my project. So if you ever want to have a project that's already using Chakra UI, you can just head on over to my GitHub username slash Chakra UI Chidori starter. So I'm going to copy that and I'm going to clone it. So I'm going to open my terminal and I'm going to go ahead and close that. Sorry. Open my terminal again. And I'll head over to my projects directory and I'm going to then git clone, uh, this, well, should have pasted that. Well, I didn't paste it. So copy that again. Git clone that. And I will call this ChakraButton. Right. Let me call it ChakraButton. I was going to try to clone that button.

4. Implementing ChakraButton Design

Short description:

I'm going to CD into the ChakraButton directory and run yarn install and yarn dev. Then, I'll open the project in VSCode to examine the main.ts file. The project is scaffolded with Chakra UI, including layouts, routes, and a statically generated site. Inside the Chakra UI plugin, I'll remove the extend theme option and the entire theme definition. I'll also delete the contents of the index.view file and remove unnecessary styles. After adding a hello world message, I'll check if everything is working. Next, I'll import the special font family used in the design.

Great. And while this is, oh, I was really fast. I'm going to CD into that directory. I think it's called ChakraButton. And I'm going to run yarn install and yarn dev, and I'll open the same directory, a new terminal and I'm going to run, open it inside VSCode. So we can see what's, what's inside this project. All right, let me open up a full screen.

Great. That's perfect. So the first thing that I'm interested in looking at is our main dot TS file. And this, this project is actually scaffolded out with a Chakra UI with layouts and routes and also a statically generated site. So it's pretty good. So the first thing I'm going to look at here is, is, is inside our, the, the, the consummation of the Chakra UI plugin, we see there's this extend theme option that we saw, and I'm going to click the theme and inside the theme here, this is where the entire definition of our theme. So since we're going to re-implement this from scratch, I'm going to go ahead and remove everything inside here because we do not need it because we're savages. I'm joking, and I'm going to delete that. And I'm also going to go inside our index dot dot view file. I'm going to delete everything from inside here. I will also go ahead and remove these other styles because I don't think we need them. No, I don't think we need them. I don't think we need them. And I'll just put in here a hello world. So that I can be sure that everything is working. Here, we can see our dev service running. So I'm going to open that in a new tab. And if I refresh this page, all right, there it is, there's our hello world. It's empty. Page is empty. There's no emptiness. And so we're just going to go ahead and do some simple modifications here. The first thing I want to want to do is I'd like to import this font family because it seems to me like there's a very special font family being used here.

5. Implementing the Pop-Ins Font

Short description:

I'm going to and searching for the pop-ins font family. I'll copy the link and replace the inter font family with pop-ins. In our theme file, I'll define the pop-ins font family for the body and heading. The browser now shows the pop-ins font family, and our button has a black background.

So I'm going to go to And it looks it resembles pop-ins. So I'm going to just go ahead and search for pop-ins. I've been using it a lot, so that's how I'm able to tell pop-ins. And I'm going to get this style. We might want to use the bold style. So I'm going to take that as well.

I think we're also going to use the regular style. So I'll copy this entire link and I will put that inside of our index.html. This template comes set up with inter, but I don't think we're going to need this for this demo. We're going to replace inter with the pop-ins font family. And finally I would like our theme to then, I'd like to ask our theme to hey, wherever you find the font family value being defined as body or as heading, I would like you to use the pop-ins font family. So to do that, we head back inside our theme file and we're going to go into the fonts. And here there is a property called body, and for body, I wanted to use this guy. And for our heading as well, I would like for it to use the same font family. And so I can then inherit that by saying, I would like everything inside here, I'd like it to inherit the font family of body. Body. So this should reference whatever we have inside of our theme definition here. So that's great. So I can head over into the browser now. And if I refresh the page, I can already see there is a font family there. If I inspect it, I can see that there is a font family there of fonts body. And if we click that, or if we try to search for that, fonts body, the definition, it should be somewhere in here. Yeah, fonts, fonts body. There it is. There's our pop ins. Awesome. I'm gonna zoom in so everything's a bit clearer inside here for us. Great.

And our button, now, we can see that it has this black background.

6. Customizing Button Styles

Short description:

To customize the buttons in Chakra UI, we can define the border radius and font weights in the theme. We can also create different variants for buttons, such as a dark variant with a black background and white text. By adding the variant prop to the button component, we can apply the dark variant. Additionally, we can adjust the size of the button to match the design.

And I can also see that all buttons tend to share this squared of border radius. So I'm gonna go ahead inside our theme, and I'm going to define that for our buttons. But first we need a button. There it is. And I think the text inside the button says, get started. So out of the box, all right, there's a Get Started button, it looks nothing like our button that we see in our design. So I'm just going to go ahead and first define the border radii and the font weights.

So under the components key, I have a button component, right, and I'm going to then find the base style. The base style, I want it to have a rounded of none. All these are shorthands that Chakra UI already has inside it. So you can just directly use the shorthands here. I'd like for it to have a font weight of, I think, regular. Right, so with any luck, this should have replaced those values inside our... Alright, that's great.

The next thing I want to do is it seems to me that this is a different variant. This black button is a different variant compared to this other one. So I'm going to go ahead and define a variance key. Variance and I want to create a, let's see, what do we call this? Let's call it a dark variant, right? Most people probably use something like primary or something. I'm just using this so that it's easy to remember. You could name these whatever you want. So I'm just going to give us a background of black. I'm going to give this a color of white. And if I head back, of course, it's not going to be applied. The reason for that is we need to add the variant prop here. So we can then say variant is, we called it dark, I suppose. And if we head back to our browser, it should have updated. Oh, perfect. There it is. Great.

The second thing is, if we zoom back out to a default size, to the default size here, we can see that it's actually a little smaller than it should be compared to the button here.

7. Creating Custom Button Size and Adding Icon

Short description:

I'm going to create a custom size for the button, named 'huge', with a padding x of 6 and a padding y of 12 to 16 pixels. Additionally, I will use a feather icon called 'arrow up right' from

So I'm going to create a custom size and inside this size, I would like for it to have a very specific padding inside there. So let's go back to our theme and let's create a custom size. So for that, we'll put that under the sizes key, and I would like for it to have a value of Excel.

Now, just to show you that it doesn't already exist in the library, we don't have an Excel button, so we can then say Excel or size would be Excel. And this should break our button, because if we define a size that doesn't exist or perfect, it's broken. Maybe let's use a size called huge. Let's just use huge, because you can name these sizes whatever you want. So I want a huge button. And for this, I would like for it to have a padding x of 6 by 4 is about 24 pixels. So I think that makes sense. I'm going to use six. So in Chakra UI, we have a four pixel grid. And that's how we're able to to establish, we can calculate how many pixels are being used. And it allows for some kind of visual consistency on the page. And so for our padding y, I would like for the large button to have about 12, maybe 16 pixels on either side. Great. And great. Now you see our button is inheriting the styles. And I'll just zoom in. So we can see that. Great. This is the size we passed in the huge size as a prop.

The last and final thing here, as we can see, is our button has this icon, and I don't think we have this icon inside of Chakra UI inside the internal icons. So to solve this problem, what are we going to do? I like to use feather icons. I'm just going to go to And I set up this data to already work with feather icons. And I'm going to search for the arrow. And I think the name for that icon is arrow up right. Perfect, we can already find the icon that we need, so we don't need to do a lot of gymnastics for that. And we head over to our utils icons.

8. Custom Variants and Sizes in Chakra UI

Short description:

We can define custom variants and sizes in Chakra UI without rewriting the entire component. By importing icons from external libraries, we can enhance our designs. Chakra UI allows us to write less code and implement UI designs quickly. To get started, visit or check out our v1 repository at I'm excited to see what you build with Chakra UI!

And if you're wondering how we were able to define these, inside the main TS file, we imported the icons object from this file. So I'm going to come in here and export it from the library. So arrow, it was arrow up right, right. And then I'm going to go inside our template and I'm going to define a left icon. So I'll say here, left icon should be equal to the arrow up, and right. And if I head back to our browser, or it's not right, it's the right icon, I can strike correctly. I can't show incorrectly was just positioned poorly. I forgot to position it the right way. I think that should be here. All right, great. Awesome. We have a perfectly similar button. And we didn't, we didn't recreate a brand new component, we just defined a new custom variant, we defined a custom size. And we also imported an icon from an external library. And we have re implemented this without having to rewrite the entire button. And it saves us so much time compared to having to have written it ourselves. And if we want to, we could then use a button size like large in case you need it smaller. And this, this size would then be reflected inside the template. I think because of the zooming, maybe the effect may difference may not be so much I think it's probably the same. But yeah, but that's it when it comes to using Chakra UI. But we could also go ahead and do the same for this other variant, this will probably be your secondary variant was to be a primary variant, and you can be able to do is using Chakra UI. Awesome. So with Chakra UI, it allows you to be able to code less or to write less code, and you have a bit more speed when it comes to implementing new UI designs that your design team will give to you. In order to get started with Chakra UI, you can head on over to or you can also follow us on Twitter. You can also check out our v1 repository, which is slash ChakraUIViewNext. If you want to see our you can just omit the next from the GitHub repository link and you can see the currently released version. So if you want to get started with this, you can just head on over to and you can get started with our v1 API. And I look forward to seeing what you've built, what you build with this and I'm happy to answer any questions and I'm very excited to be here today. Thank you so much for the opportunity and I wish you a great rest of your day. Have a wonderful evening.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.