shadcn/ui Command Line (CLI) Tool

[00:00 - 00:10] In this lesson, you will learn about the Chatsie Commanding Tool. Chatsie and UI as a built-in command-lay tool, CLI, to automate some tasks.

[00:11 - 00:25] The available commands are init, add-in it initializes Chatsie and UI in an existing project. The add component installs Chatsie and UI component to a project, and the diff command checks for updates against the component registry.

[00:26 - 00:46] The easiest way to run the CLI is with NPX. If you have npm installed, you should download the event peaks, so call NPX inside the 'Newsed' folder, call NPX, Chatsie and UI at latest, add navigation menu, it's a component from Chatsie and UI that we are going to use in this project.

[00:47 - 00:52] Great! The add command is responsible for installing a component from the registry to the project.

[00:53 - 01:04] You can also go ahead and copy-paste the components manually from the docs if you'd like, but it takes a bit more time than running the command. The command is also responsible for installing any dependencies and the components themselves.

[01:05 - 01:12] You can use it the way we've seen. After the command finishes, you should see a new file under the UI folder.

[01:13 - 01:21] Let's add the card component. NPX, Chatsie and UI at latest, add card, now you should see Dan being printed in the console.

[01:22 - 02:06] Go back to the UI folder, click on the card, and here is the card source code. Now to validate the installation finish successfully, let's go to app/page.t6 and change everything inside into a card, remove everything that you see, import the card component, and render it with the class name of 'B4' change the class name here to 'amixauto', 'empty8' and 'max with excel' and add an 'h1' with class name, text-large and 'hello' world.

[02:07 - 02:10] This is the Chatsie and UI 'hello' world. You can remove the imports.

[02:11 - 02:35] And then let's validate it, run npm run dev in your favorite terminal, and then open 'cut' and then open the local URL in your browser. If everything was successful, you should see this page and a 'hello' world card rendered inside the browser.

[02:36 - 02:50] The div command allows viewing a list of the current project installed component that have been updated in the registry. Let's run the following command, 'npeix' / Chatsie and UI at latest, 'dif'.

[02:51 - 02:57] The output should look something like the following. The following components have updates available, and then a list of them.

[02:58 - 03:05] Right now we see the button one. We call the 'dif' command with the component to see the actual changes.

[03:06 - 03:13] Here we can now see the difference between the registry run and the one that we have installed. We can update it if we want with the 'ed' command.

[03:14 - 03:24] The 'init' command is responsible for initializing Chatsie and UI inside an existing project. You can run it with the 'npeix' / Chatsie and UI at latest in it.

[03:25 - 03:32] We created a new 'next' application in my terminal. Then I'm running the Chatsie and UI at latest in its command.

[03:33 - 03:39] Running the command will present a list of questions. The CLI will add Chatsie and UI to the project based on the responses.

[03:40 - 03:44] Which style would you like to use? Which color would you like to use? CSS variables?

[03:45 - 03:55] Then it will install the required dependencies like 'radix UI', 'next themes' and 'tailwindcss'. It will create the configuration files for tailwindcss and Chatsie and UI.

[03:56 - 04:13] You can see them here. It will add a 'cnu' till inside 'lib/utils' like we have in the template and the required CSS variables in the global.css file.

[04:14 - 04:21] The 'init' command creates a 'combonents.json' file. And it is the 'de facto' Chatsie and UI configuration file.

[04:22 - 04:33] Under the 'wood', Chatsie and UI uses the file to determine the project setup based on the 'init' command answers. As Chatsie and UI uses, it can be used to configure and tweak the library behavior.

[04:34 - 04:45] It probably won't need to be changed very often, but just in case, it also has some properties that you can control using the 'combonent.json' file. The style property, which is the component styles, either default or New York.

[04:46 - 04:55] We are going to learn more about it in the first module. The tailwind, which is the configuration related to tailwind, the config, the CSS file, the base color and more.

[04:56 - 05:06] The TS6, which is whether to use the TypeScript component and RSC, whether React, Server components are supported. There are also aliases defined.

[05:07 - 05:10] In this lesson, you've learned about the Shot CNI command line tool.