Code at the Speed of Design in Chakra UI Vue

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 RCT.ai. 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 to...you 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.

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.

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.

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.

So I'm going to go to fonts.google.com. 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.

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.

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 feathericons.com. 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.

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 view.chakraui.com or you can also follow us on Twitter. You can also check out our v1 repository, which is chakraui.com slash ChakraUIViewNext. If you want to see our v0.next 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 next.view.chakraui.com 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.