This might change how we build UI forever
Summary
TLDRThe 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
🚀 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.
🛠️ 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.
🌟 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.
🔍 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.
Mindmap
Keywords
💡CLI
💡Shad CN
💡UI libraries
💡Headless UI
💡Tailwind
💡Code distribution
💡Multifile components
💡AI generation
💡Component registry
💡Codebase
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
浏览更多相关视频
Front-end web development is changing, quickly
This UI component library is mind-blowing
DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!
Expo in 100 Seconds
Overview of Tailwind CSS Components with PrimeVue
Vue.js Nation 2024: PrimeVue | The Next-Gen UI Component Library by Cagatay Civici
5.0 / 5 (0 votes)