This might change how we build UI forever

Summary

The video introduces a new Command Line Interface (CLI) for Shad CN, a tool for adding components, themes, and more to apps. It emphasizes Shad CN's unique approach to UI development, allowing users to own their code without compromising on design. The CLI simplifies the integration of components, supports major React frameworks, and even PHP with Inertia. It enables the installation of hooks, themes, and complex blocks with ease. The video highlights the potential for streamlined code distribution and the exciting future of UI development with Shad CN.

Takeaways

• 🚀 The introduction of a new CLI tool that simplifies the installation of components, themes, hooks, functions, animations, and generated code into applications.
• 📦 Shad CN is a method of integrating UI components without relying on traditional libraries, allowing for greater ownership and control over the codebase.
• 🎨 Shad CN components can be customized and maintained directly within a project, providing flexibility and the ability to update as needed.
• 🔌 The CLI tool supports major React frameworks and can be used to integrate Shad CN components into various environments, including Next.js, Remix, and even Laravel with Inertia.
• 🛠️ The CLI streamlines the process of adding components by automatically handling dependencies and configurations, such as Tailwind setup.
• 🌐 The tool can generate UIs based on prompts, utilizing Shad CN components, making the process of UI creation more accessible and efficient.
• 🔄 The new version of Shad CN, named VOR, focuses on making it easier to add components to a codebase, improving upon previous versions.
• 📝 The CLI allows for the installation of hooks, utilities, themes, animations, routes, and complex blocks with multifile components, directly where needed.
• 🔗 The ability to install remote components using URLs opens up possibilities for private component distribution within secure networks.
• 🔄 The CLI's init command has been improved for better reliability, making it easier to start new projects with Shad CN components integrated.
• 📈 The potential for the CLI to revolutionize onboarding flows by allowing the addition of specific functionalities, like authentication forms, with a single command.

Q & A

What is the significance of the new CLI introduced in the script?

The new CLI is significant as it marks a major step forward in distributing code that both developers and their teams can access and use. It simplifies the process of adding components, themes, hooks, functions, animations, and generated code to applications.

What does Shad CN offer that sets it apart from traditional UI libraries?

Shad CN provides components without compromising ownership because it allows developers to add components directly to their project, meaning the code lives within the project rather than being part of an external library.

How does Shad CN integrate with headless UI libraries like radic?

Shad CN uses headless UI libraries like radic for behaviors, not for styling. It then integrates these with its own styles and configurations, such as adding Tailwind, to ensure they interoperate well with the developer's codebase.

What was the challenge with adding Shad CN components to a codebase before the CLI was introduced?

Before the CLI, adding Shad CN components required having all the right dependencies, versions, and configurations, such as Tailwind setup, which made the process complex and not user-friendly.

What does the CLI command 'npx v0 add' do in the context of the script?

The CLI command 'npx v0 add' is used to add specific components to a codebase by generating the necessary code and ensuring that all dependent Shad CN components are also added, making the integration process simple and reliable.

What is the purpose of the 'vzer' mentioned in the script?

Vzer is a tool for AI-generated UI components. It uses Shad CN components during the generation process, allowing for the creation of UIs based on prompts, and then uses the CLI to add the generated code to a developer's codebase.

How does the new CLI support for major React frameworks enhance the development experience?

The CLI's support for major React frameworks like Next.js, Remix, and even Laravel with Inertia, allows for easier initialization of Shad CN components in various types of applications, enhancing the developer experience by simplifying the integration process.

What is the benefit of the CLI's ability to update existing Tailwind files instead of overriding them?

Updating existing Tailwind files instead of overriding them preserves the developer's custom configurations, which is beneficial for those who have spent time tailoring their Tailwind setups.

How does the CLI facilitate the addition of new components and routes to a project?

The CLI allows developers to run commands like 'npx Shad CN add' to add new components and routes directly to their codebase, which can include logic, packages, and endpoints necessary for those components to function.

What is the potential impact of the CLI on the future of code distribution and onboarding?

The CLI has the potential to revolutionize code distribution by allowing developers to add components, hooks, themes, and more with a single command. This could simplify onboarding processes and reduce the need for extensive documentation, as developers can quickly see changes and understand how components integrate into their codebase.

Outlines

00:00

🚀 Introduction to Shaden CLI for Enhanced Code Distribution

The video introduces the new Shaden CLI, a tool that revolutionizes code distribution by allowing users to install components, themes, hooks, functions, animations, and generated code directly into their applications. The presenter expresses excitement about Shaden, a UI library that provides components without compromising ownership, as the code lives within the user's project. Shaden integrates with headless UI libraries like Radic, adding styles and Tailwind to ensure components fit seamlessly into the user's codebase. The CLI simplifies the process of adding Shaden components by handling dependencies and configurations, making it easier to maintain and update the code.

05:01

🛠️ Enhancing Developer Experience with Shaden CLI

The video discusses the evolution of Shaden, from a library to a CLI tool that streamlines the addition of UI components to a codebase. The presenter highlights the CLI's ability to generate UIs based on prompts and the convenience of adding components with a single command. The new version of Shaden, dubbed 'v0', introduces support for major React frameworks and even Laravel with Inertia, demonstrating a commitment to improving user experience across different platforms. The presenter also notes improvements in the CLI's ability to modify specific files based on needs, reducing the manual effort required to integrate Shaden components.

10:04

🌟 Empowering Developers with Advanced Code Distribution Features

The video explores the advanced features of Shaden's CLI, which allows developers to install hooks, utils, themes, animations, routes, and complex blocks with multifile components. The presenter is particularly excited about the potential to use the CLI for onboarding flows, such as adding login forms with a single command. The video also touches on the ability to distribute private components via URLs, which could be useful for companies with internal design libraries. The presenter envisions a future where the CLI can be used to add generated code to existing projects or to start new ones with ease.

15:05

🔍 The Future of Code Distribution and Learning from Code Changes

The video concludes with a look at how Shaden's CLI can change the way developers learn and understand codebases. The presenter suggests that instead of reading through documentation, developers can run a single command to see a component in action and then review the changes made to their codebase. This approach allows for a deeper understanding of how components work and how they integrate with existing code. The video also mentions the importance of reviewing pull requests and diffs to truly grasp the workings of a codebase, and the presenter expresses excitement about the potential of Shaden's CLI to improve developer workflows.

Keywords

💡CLI

CLI stands for Command Line Interface, which is a text-based interface used to interact with computer programs. In the context of the video, the CLI is used to install and manage components, themes, and other elements in a software project. The script mentions 'Shad CN CLI', which is a tool for adding components to a codebase, showcasing how CLI tools can streamline development processes.

💡Shad CN

Shad CN is a UI component library that is highlighted in the video as a way to add components to a project without compromising ownership of the code. The video emphasizes that Shad CN is not a traditional library but rather a collection of components that developers can integrate into their projects. This is exemplified when the script discusses how Shad CN components are used in the 'Pi thing' service and how they can be added via the CLI.

💡UI libraries

UI libraries are collections of pre-built user interface components that can be used in software development to speed up the design and development process. The video discusses how Shad CN fits into the landscape of UI libraries, emphasizing its unique approach to component ownership and customization. The script contrasts Shad CN with traditional UI libraries by highlighting its integration with headless UI libraries like 'radic'.

💡Headless UI

Headless UI refers to UI components that provide functionality without predefined styles or themes. The video mentions 'radic', a headless UI library, which provides the underlying behavior for components that Shad CN then styles and integrates into projects. This approach allows developers to use the functional aspects of UI components while customizing the appearance to fit their project's design.

💡Tailwind

Tailwind is a utility-first CSS framework used for building custom designs without writing CSS from scratch. The video discusses how Shad CN integrates with Tailwind, allowing components to have their own Tailwind configurations and keyframes. This integration is significant as it allows developers to maintain consistent styling across their projects without overriding existing Tailwind configurations.

💡Code distribution

Code distribution in the video refers to the process of sharing and integrating code across different projects and platforms. The script highlights the advancements in Shad CN's CLI tool, which simplifies the process of adding components to a codebase, making code distribution more efficient. The video also touches on the potential for the CLI to revolutionize how developers add and manage code in their projects.

💡Multifile components

Multifile components are a way of structuring code where a single component is defined across multiple files. The video discusses how the Shad CN CLI supports multifile components, allowing for more organized and maintainable code. This is significant as it enables developers to work with complex components that may have multiple parts, such as styles, templates, and logic, all defined in separate files.

💡AI generation

AI generation in the context of the video refers to the use of artificial intelligence to create code or UI elements. The script mentions 'vzer', which is an AI tool that can generate UIs based on prompts. This demonstrates how AI can be used to automate parts of the development process, such as creating UI components or pages, which can then be integrated into a project using the Shad CN CLI.

💡Component registry

A component registry is a system for managing and distributing UI components. The video discusses the new schema in Shad CN that allows for the creation of a custom component registry, which can be used to distribute private components. This is particularly useful for organizations that want to maintain control over their component libraries while still benefiting from the ease of distribution that a registry provides.

💡Codebase

A codebase is the collection of all the source code for a software project. The video emphasizes the importance of owning and managing one's codebase, which is why Shad CN's approach to adding components without compromising code ownership is highlighted. The script also discusses how the Shad CN CLI can be used to add new components, routes, and even entire pages to a codebase with ease.

Highlights

Introduction of a new CLI tool that simplifies the installation of components, themes, hooks, functions, animations, and generated code into applications.

Shad CN is a component library that allows developers to add components to their projects without compromising ownership of the code.

Shad CN components are integrated with headless UI libraries like radic, providing behaviors and styles that can be easily customized.

The CLI tool streamlines the process of adding Shad CN components by automatically handling dependencies and configurations.

Shad CN's approach ensures that the added components are fully integrated into the project's codebase, allowing for easy maintenance and updates.

The CLI supports the initialization of Shad CN components in various frameworks, including Next.js, Remix, and even Laravel with Inertia.

The new CLI updates Tailwind configurations without overriding existing settings, respecting the developer's custom configurations.

Components can now ship with their own dependencies and Tailwind keyframes, enhancing the customization and integration capabilities.

The CLI can introspect and modify specific files based on the needs of the components being added, making the integration process more reliable.

The CLI allows for the installation of hooks, utils, themes, animations, routes, and complex blocks with multifile components.

Remote components can be installed using URLs, enabling the use of private components accessible only on private networks.

The CLI's init command has been improved for better reliability and supports the creation of new projects with pre-configured components.

The new schema allows for the distribution of private components through a URL, useful for companies with internal design libraries.

The CLI's ability to add components and routes with a single command is a significant step forward in code distribution and onboarding workflows.

The CLI facilitates a workflow where developers can quickly try out components by running a command and then reviewing the changes made to their codebase.

The potential for the CLI to replace traditional documentation with a more interactive and hands-on approach to learning and understanding codebases.

The future of installing components and codebases is bright with the CLI's capabilities, making it easier to adopt and integrate Shad CN into projects.

Transcripts

introducing the new CLI install anything

from anywhere add components themes

hooks functions animations and generated

code to your apps this marks a major

step forward in distributing code that

both you and your llms can access and

use let's take a look oh boy am I

excited to take a look if you don't

already know Shad Shad CNU is a thing

I've talked about quite a bit and used

even more it's the the perfect

combination like if you've seen my old

video about how to think about UI

libraries shadow almost feels like it is

the natural conclusion of all the things

I talked about there where it provides

the useful components without

compromising on the ownership because

with Shaden is not a library you're

installing it is components that you're

adding to your project and that code

lives in the project you might already

know about all this but just in case for

those who don't if I hop into Pi thing

the service I actually just released

today believe it or not we can hop into

components slui and all of these are the

buttons that were generated for me by

Shaden the dialogue box generated for me

drop down menu I have the source code

here so if I want to change things I

want to maintain things I want to update

things it is all code I

own and there is no compromise there and

that's why I like Shad CN so much not

because it's a beautiful designed

Library not because it works really well

in typescript I love it because it is

writing the the right code and putting

it in your code base without

compromising the ownership that doesn't

mean that it doesn't use packages it

still uses packages for things that make

sense to like in here the react dialogue

the react dropdown menu slot and switch

these are all provided by radic which is

a headless UI library is the term

because these provide behaviors not ways

things look and then Shad integrates it

gives it Styles adds Tailwind all of

that to make it look and interop with

your code base really well it's just a

set of really well-designed components

but adding them to your code base has

been a weird thing because it required

that you had all the right dependencies

all the right versions of things

Tailwind already set up and configured

and all of that and then you put it in

the right place so it could interface

with other things like if the accordion

needed to use the carrot which was a

different component that they provided

getting all of that to interface

together was not easy which is why

Shaden created the CLI where you can run

the command to add something directly

over time the stuff you could do with

shad Cen grew v0 created by versel and

Chad who works at versel now was built

to make it easier to generate uis and

when you generate a uui with this it is

actually using a lot of Chad CN

components in the process so if I have

like gallery of pictures with a drop-

down menu on top to select a tag and it

will now generate different uis based on

the prompt that I gave it so now we have

this fake UI with profile images in the

filter by tag and I can click and drop

down but if we look at the code this

where things get interesting see that

this code that they gave me is importing

dropdown menu drop down menu trigger all

these things from at component UI

dropdown menu I could go just copy this

code and drop it in my code base but if

I don't have all of these components

already in my code base it's not going

to work CU it's expecting those so what

they added is the ability to run the CLI

command npx v0 ad and then the hash for

this specific instance and not only will

it create this particular component it

will also grab the Shad CN components

that it depends on to make it as simple

and reliable as possible to grab this AI

generated code and drop it in your code

base and that's why the CLI is so

interesting because the first version of

Shaden was copy paste the code in your

code base make sure you install the

right things V1 was the CLI V2 is

arguably funny enough named vzer it's

the AI generation thing that we just

showed with that special CLI to add that

specific generated version and now we're

on VOR which is the Shaden overhaul to

make it way easier to add anything to

your code base what do I mean by

anything let's dig in because what we

have now is way further than we were

before but what's coming is even more

exciting the CLI now has support for all

major react Frameworks out of the box

next remix V and even laravel yes if

you're using laravel with inertia you

can now use the Shad CN CLI to

initialize Shad cn's components in your

PHP apps at least somebody in the PHP

World cares about user experience that's

a joke they're actually pretty good

about that that's why inertia exists

yeah as I said here when you initialize

a new app we update your existing

Tailwind files instead of overriding

them that's huge as someone who spends a

lot of time putting crazy things in my

Tailwind configs the fact that chaden

and knit would override that pissed me

off a lot so fixing that is huge a

component now can ship its own

dependencies take the accordion for

example it can Define its own Tailwind

key frames that's huge if the accordion

has its own animations and it's using

Tailwind for it it no longer has to ship

that as custom CSS it can just add that

to the Tailwind config and that's kind

of the magic of what they're doing here

no longer does the Shaden template just

run a pnpm install and then add these

files to your code base now it can

actually introspect and modify specific

files based on specific needs and that's

why I'm getting excited because I see a

future where I could run npx Shad CN add

upload thing and it will add upload

thing to your codebase and put the right

files in the right place and add the

right layers in the right spots using

this CLI as the way to do it I almost

made this CLI myself I actually snagged

the T3 npm package and my original plan

was to build something like this to make

it easier to just add things to your

code base I might still do it I have to

use that package for something it's so

cool but like that was a specific goal

and seeing them achieve it here is

really cool as Shad said this means we

can now install hooks utils themes

animations routes and complex blocks

with multifile components everything is

added right where you need it this is a

huge unlock for code distribution yes

abs absolutely this is and I am so

excited for what we could potentially do

with this this example npx Shaden login1

it grabs it from the registry it creates

those and now the new login page just

exists in your code base how cool is

that that you can run a command and it

creates new routes and new experiences

in your app based on their Syntax for

defining it it's so cool it's so cool

you can also install remote components

that are using URLs so if we have a VZ

block so something we chat it with VZ

about you can add it that way someone

just dropped an example in chat too uh

that doesn't have anything in it but you

could point it at a Json file and it

will parse the right things from it if

it's formatted correctly and it will

just add that to your code base that's

so cool they also prove the init command

which is huge because the init command

was not reliable before it's a small

thing but like I hate the at slash

syntax just it's a personal thing I like

the till the slash AAR ly there's

something else that's better I forgot

what it was but there's a thing that

like exists in JS natively that you can

use here instead I have a thing saved

about it that somebody shared but I have

a personal preference and it did not

like my personal preference in the past

I'm thankful that they fixed it so this

example they init a Shaden project

sidebar 01 login 01 so it's adding those

as well you can create a new next

project with this pick your

theme and now just running the npx Shad

a knit command with a couple of those

like the things you want to add you just

created a new next project that has the

login page and the other route the

dashboard all just by running those two

command or that one command that's

really cool the ability to like use this

to add something that you quickly

generated to your existing project or

even to start something new if I was one

of those startups that's trying to do

like prompt-based

generation of like apps I'd be shaking

in my boots right now yeah we

created a new schema that you can use to

ship your own component registry and

since it supports URLs you can use it to

distribute private components that's

actually really cool if you had a URL

that's only accessible on like a VPN you

could use this to hit that as a way to

like if you're spinning up a new project

and you need your company's like design

Library this will let you hit that on a

private Network and get it directly

that's so cool there's a whole

change log for us to dig into as well

here okay so components that Json will

now exist in your

project apparently you can look they

called out my weird case here you can

use different import aases by specifying

it there that's really cool shall we

init one I'm curious enough let's do

it start a new next

project and gu this double nested

whatever now we have this why did it use

bun if I did pnpm is it defaulting to

bun when you run pnpm the whatever

small thing I remember this happening in

the past with um the create T3 app

template funny enough let's go to

dashboard yeah that just worked am I

running my project locally is that why

the CSS is wrong no it's not okay seems

like there are some issues with the CSS

and the coloring here because a lot of

that is not following contrast rules

it's possible as using the dark mode

because of my computer yeah this this

looks like the dark mode is being

handled properly this looks like it's

not so they have the separate dark rules

here all applied as variables by the way

which makes it a lot easier to change

these things and have them persist

everywhere heavy use of CSS variables to

make life a lot better but the really

cool thing is it's giving you the code

it's not like it's generating this code

or grabbing it from somewhere else you

never get to touch it login form is a

file in my codebase that is using all of

these components that are from Shad CN

and I can go in here and change it and

use it however I want that's really cool

and the exciting future that I see here

is the ability to have this be your

onboarding flow so imagine if instead of

login form being this generic thing with

no functionality that gets added what if

you could add clerk login form or stack

off login form or Luchia login form and

it will add this code and the logic and

the package necessary and the endpoints

of those are necessary too the thing I'm

excited about here is that this isn't

just like Shaden being easier to adopt

to do UI things this is a step forward

in how these init things work the

classic docs page everyone's had to

write at some point point of all the

steps to add this thing to your project

could be replaced with a single command

and then you can just read the diff and

that's as silly as it sounds one of the

things I'm most excited about to run the

command see the thing working and then

understand it after because right now

the order of events is the opposite is I

have to go through the upload thing docs

I have to understand what each of the

pieces is add them all to my code base

and then I could see it working and know

if it's for me or not what if I could

run one command see the thing quickly

determine if it's for me or not and then

read the diff afterwards being able to

use this to add things to existing code

bases in that way is genuinely really

exciting for that reason I am hyped to

see what it will look like to just read

the diff and even here since it inited a

normal next project first we can still

read the

diff here we see it adding the CSS there

because it didn't already have it here

we see all the packages that were added

with the command that we ran because

that command needs all the radx UI stuff

for all those different pieces we can

see the way it changed the config for

our Tailwind config and all the things

it added

there and we can see these new

components here too we can see it

created the app sidebar component all

the things importing from luced which is

a ton but it's using all those icons for

things the nav menu the nav pieces all

from our component Library the sidebar

and it's so easy to dig through this and

see what actually changed and now if I

put up for code review others can see it

too being able to understand a thing not

through the docs not through the getting

started not through all of those as

blockers to try it but being able to

just run a command to try it and then

look at how it affected your code base

this is the thing I've said for a while

like if you want to learn a code base

like if you want to learn how upload

thing works the intuition might be to

start here but if your goal is to deeply

understand upload thing and to really

understand like if you wanted to

contribute to upload thing you don't get

there by reading through every line of

code starting at the top the code tab

this tab here is not the tab you want to

start with if you want to understand

code bases you need to start with the

pole request Tab and in here is where

you'll start to really learn and

understand how this codebase works

especially if you look at the closed PRS

that merged here you'll see what code is

actually changing how it's changing and

why we changed it you'll get a lot more

out of this tab and that's why I'm

excited here because this makes it

easier to get to that part where you can

really understand how these things work

on the topic of

diffs every once in a while someone

smart like you know gear Mar Ro and then

my CTO it gives you this piece of useful

info see kit config really helpful thing

you can put in here undo reset D- soft

now you have a get undo that for the

most part works also on push Auto setup

remote true life Cher oh that was so

necessary I wish I had that years ago

cool now we have that theoretically get

diff

okay

yeah

yeah that's a lot

better I now have syntax highlighting

when I'm diffing

locally did not think I would

significantly change how I do Cod riew

locally while filming this there we go

you can also add line numbers ooh only

catch there is it makes copy paste break

but copy paste is already broken it's a

diff who cares okay yeah

yeah in my new CLI tools video it goes

also LG by the way lazy G similarly

dope doesn't have syntax

highlighting though and now that I've

seen that there I need to find a way to

add syntax highlighting here or even

just change the diff VI in it but uh

yeah more for me to deal with later hope

this is good info for you guys now the

future of installing things is bright

anything Shaden does is magical oh this

one's great somebody is using VZ and

like the Shad CLI to create Minecraft

writing as little code as possible

because all this supports 3D stuff

now too which is nuts yeah here's just a

vzero

chat that is resulted in a Minecraft

clone in the browser written primarily

by you or AI

this shit's like starting to advance in

ways that it can actually meaningfully

improve our workflows and that's very

fun speaking of which this stuff's

interesting to you cursor video coming

soon as well that's all until next time

peace nerds