Rather than installing someone else's complete component library or building your own one from scratch, you can leverage shadcn-vue to create accessible, functional components with great defaults.
In this video, we'll add shadcn to a new Vue 3 project and get one of the components up and running.
You can find out more and find all of the commands needed at the shadcn-vue website.
Enjoy your building!
[00:00] When designing and building your own applications, there are two routes that you could take in order to maintain consistency across your component systems. First, you could install a third-party library, of which there are many. These often opinionated systems need to be learnt, understood and adapted to your use case. The other extreme is you could build everything from scratch. This gives you more control and ensures that the systems you create fit your use case.
[00:25] ShadCN aims to fit somewhere in the middle. The aim of this open-source project is to allow you to build your own component library but with a head start. In this video I want to show you how to install this into a new Vue project and get one of the components up and running. Let's dive in. I'll start a new project with npm create feet at latest.
[00:44] I'll call this shadcn. I'm going to be working in Vue and in TypeScript. I'll cd into my directory. I'll npm install. I'll open my code editor and start the project.
[00:57] Shadcn is built with Tailwind, so I'm going to get that up and running. With the dependencies installed, I'm going to go to my Vite config and I'm going to add Tailwind and the auto-prefixer. So I'll import them and in my config I'll define the CSS key. That's going to be an object. I'm going to add a post CSS key to that.
[01:15] Add Plugins and the array is going to be Tailwind, which I'm going to invoke and Auto Prefixer, which I'm also going to invoke. In my TypeScript config file I'm going to add a base URL of the root directory and I'm going to set up the path alias. This means instead of having to relatively navigate up at the component tree, we can just use the at sign. And this is what the shadcntooling uses internally, so we're setting that up so we don't have any errors. I'm going to add the node types because in my Vite config I want to import path from node and I want to allow the aliases to be resolved correctly in here as well.
[01:57] I'm going to resolve, resolve the alias, which alias, the at sign and I want that to be path.resolve, the directory name, that's the current directory that this is being invoked from, and then source. With that done, in the command line I'm going to run npx shad cn-v at latest init. It's going to run me through a few questions. I'm using TypeScript. I'm using Vite, but this works with Nuxt, Laravel and Astro as well.
[02:27] I'm going to use the default theming. There's also New York. We can override all of these themings internally, but this is just a good base layer. Equally I'm going to set the default color to be slate. And my global CSS file, well if I look inside my source folder, it's actually here.
[02:42] The style.css. So it's source style.css. I do want to use CSS variables. My Tailwind config file doesn't exist yet, but we'll leave it there and we'll add it. I'm going to add the components in there and the lib for in there.
[02:59] Okay, so everything's being ready to go. You can see I get this error that says Tailwind CSS animate isn't found and if I look at my Tailwind CSS it's actually being required in here. I'm going to npm install that library as well. So npm install that library. We refresh this, it should be working fine.
[03:17] I see all the styling from the default project isn't being applied anymore. So let's tidy up our app view remove that hello world. This is using Tailwind so we can do things like display that as flex, put them side by side, width 100, justify center. So what I'd like today is add a little accordion feature with some questions and answers. In the command line or on npx add-cn-view, add accordion.
[03:45] And inside the components library, in UI, I now have accordion, which has all of these files in it. Now, the idea is that you have ownership and control over the code for every component that you add to your project, allowing you to decide how the components are built and styled. So it has some sensible defaults to start you off, and then you can customize the components to your needs. Let's finish setting this up and see what we think. So as well as installing these components, it also added into our Tailwhip config some animations.
[04:15] So inside these key frames, animations for accordion down, accordion up, collapsible down and collapsible up and then what should happen with the speed and the type of those animations, which we can change here as they're applied inside of our components. So inside our App View, rather than importing Hello World, let's import our accordion and our accordion content, our accordion item, and our accordion trigger. And then let's use them. So I have an accordion inside of my accordion. Let's say it's going to be type single, which means only one of the accordions can be open at any one time.
[04:51] I'll set the class to width full. And I'll set the default value to be default value. So I'll set that in my script up here. I'll say const default value It's going to equal what I'm going to call item1. I'm going to define those items in a second.
[05:07] So for I want an accordion item for each of my, I'll say item in accordion item. So up here I'm going to create an array of accordion items that we're going to use inside of here. We're using v4 so we should really have a key. So we'll say the key is going to be the item value. The value is also going to be the item value.
[05:33] We're going to set up the accordion trigger to be the item title and the accordion content we're going to set up to be the item content. Okay so let's add some items. So the first item which we're gonna have is item 1. So we can say what is this built on top of? So this project uses RAIDX UI and Tailwind.
[06:00] The first one is open. Let's add another one. Item 2. Is it accessible? It is.
[06:07] Here's to the ARIA standard. So by default this one's open. So I click on this one, it closes the other one and opens that. You get this nice smooth animation from one to the other. That's good.
[06:20] And value item three is unstyled, allowing you to make those decisions. So I can tab between them and press return to an open. Not having to think about any of that, that's all been done for me. I can focus on making this look the way I need it to, but starting from really sensible default. ShadCN has a whole host of components from breadcrumbs, to calendars, combo boxes, command palettes, date pickers, there's so many and they're adding new ones quite regularly.
[06:53] So it's worth having a look and keeping up to date with them. You can follow the docs which have good samples and clear instructions and also have some ideas for combining these components to make complete, complex and really interesting UIs. Hope this video is useful and you know a little bit more about what ChadCN is and how to get up and running with it in Vue 3. Enjoy your building!