- [Instructor] This is v0 Chat,
and it's just so much better than the normal v0 interface.
There are some key differences between the two,
which I'm going to explain,
but first of all,
let me show you the result of what I'm able to build
with just nine prompts.
As you can see, this is a full UI,
a dashboard with a menu
with states and fully functional and adaptive layout.
Look at that,
and I was able to use the Shadcn library.
And here, they have a lot of these charts
that you can use for your UI,
and I think they're absolutely beautiful.
You can even customize the theming for each of them.
And I think if you follow this UI,
which is insanely popular,
especially if you work with Next.js,
and you have so many options, so many components,
you iterate that with v0 Chat,
then you can create something far more compelling
than, let's say, if you go with the normal route of doing it
with cloud artifacts and maybe Galileo.
So the key difference is
that we are more focused on UI
versus cloud AI can definitely take it all the way
to a full app.
So what I would do is to use this
to kind of ironing the concept,
and I want to walk you through
some of the elements that I'm using.
And as usual, we have the code,
so we can always get into the code.
You can see that it's actually far better
than the one that we had in the normal v0.
It's actually using, you know, more compact code.
It doesn't have these useless super long SVGs.
And when I iterate, especially,
I'm going to show you right here,
when I iterate,
and I go to the ones that I created using the normal v0,
it makes a ton of mistakes.
So for example,
I asked for, like, a different menu with labels.
It's also much slower,
and it has a lot of these mistakes.
And the UI is not as adaptive,
and you can see that it breaks quite easily,
and on top of the fact that it's slow.
So for iteration, it's just not very good.
But the new v0, which you can see here,
when you click Get Started,
you're asked to basically chat with it,
just like artifacts in Claude.
And you can also input an image.
You can say, you know, "I want to create a dashboard UI."
You have some suggestions here,
and you do have a certain limit, just like Claude,
but enough to get to a point
where you're pretty satisfied with the result.
So let me walk you through how I'm using it.
First of all, create a dashboard UI,
and this is what we started with.
It's not as pretty,
but it's a good skeleton of what we want to achieve.
And if you look at the code,
it's pretty compact.
And then let's go to the second one.
I want to add a new chart for daily revenue.
So it was able to do that by adding this right here.
As you can see, it's all animated
because it's using Shadcn
and Shadcn has an amazing library of charts,
all animated and functional.
So you can see when I hover, it has all of this data,
which is super useful
to turn it into a real functional dashboard.
And then I kind of go on,
and it really helps to understand Tailwind and Shadcn
So my suggestion is to kind of browse
through the documentation
and the different components that you can use
and kind of reference them by name.
If you don't reference them,
you will probably get the default,
or maybe, you know, you're going to get something
that you didn't know existed.
But otherwise, if you browse it,
and you know that it exists,
then you can use it in your app.
So for example, if you didn't know
that you can have these kind of like Apple Watch Rings,
but now you know,
and so you can sort of say,
"Yeah, I want this UI right here,
and I want this UI right here."
And it's also helpful
to know the names of those UI components.
So going back to the chat,
I referenced the name of the area chart,
and when I did that, it gave me this one,
so it's a little bit better.
And then design in the style of the Shadcn website.
I do like the minimalist style
a little bit better than the default style given by v0,
even though it is using Shadcn.
But you can see that there's a bit of a difference,
a very subtle difference,
but still the subtlety of the colors,
the subtlety of the sizing of the fonts
and you know, you want to get as close as possible.
And as you can see,
after this one, I think it's a little bit better.
I think it's important to keep iterating.
And then we went into using the charts and having gradients.
So let's see.
Now we have a gradient.
And then I wanted to make the font a little bit smaller,
again, similar to the Shadcn website.
So I think this looks more like a dashboard.
Typically dashboard websites have smaller fonts
because it holds a lot of information.
You know, the density of the information is much higher.
Versus a landing page, you want to have bigger fonts.
So it does explain what it does.
And then we are going to get into sort of like a detail.
I want to use the the Tailwind Shadow.
So if you're familiar with Tailwind,
you kind of know a little bit
about the system of the shadow,
so small, medium, large.
And it's really helpful to know the colors as well
so we can reference them.
And so here I'm saying,
"Okay, I want the shadow
and I also want the outline
to be a little bit more subtle using a certain opacity."
And then I want to add a pie chart.
So this is coming.
Some of the charts that I really like,
the pie chart right here.
This gradient here I think is really nice.
And you know, it depends
what kind of app that you're making,
but you can definitely reference
these charts that you can use.
I really like the pie chart right here.
And I also really like this radar chart,
as well as this radial chart.
So going back here, let's see what it does.
So it added these two charts.
It was able to identify that,
you know, maybe it fits better that I have H distribution,
even though I didn't mention about that.
So it kind of knows the context
of perhaps the app that I'm building.
So it was able to improvise that
maybe user device is relevant.
So AI is smart like that.
And we're going to take a look here.
I'm saying, "Okay,
so I want to use a smaller shadow,
kind of like going back and forth between large and small.
I want to use the gray Tailwind colors,
which is kind of a little bit blue, purple-ish desaturated,
and then I want to use the charts to look
as similar as possible as the one on the Shadcn website."
I didn't like this one
because it seems a little bit broken.
The text seems to be rotated and unreadable,
so I decided to go with a different one,
and going with the radar chart instead.
So now it fits a little bit better for the H distribution,
and that's where I am.
And you can see that I can keep iterating
just like that by referencing.
And I think this is a really powerful way
to turn an idea into an app.
And I can definitely go into the logo
and the icons that I want to use.
So I want to change the text of the menu
and you know, the different charts
that I want to use for my page.
I can add, like, a user menu at the bottom left
or at the top right.
I can have maybe a filter search.
I can, you know, have different pages laid out.
And once I'm done with this,
I can essentially copy the code,
and then bring that to Cursor and Cloud AI
and then turn that into a real website.
So this is the power of Shadcn and using v0 Chat
instead of the normal v0
and kind of getting familiar with Tailwind
and working into a real app.