Loading video player...
Shatsen UI is an amazing component
library, but if your app is starting to
look exactly the same like many other
apps out there, here's exactly why. It's
not because Shatsen is bad. It's really
not. It's because you're probably using
it the wrong way. And honestly, we've
seen this pattern before. It happened
with Bootstrap that you could instantly
spot a Bootstrap site. Then it happened
with Tailwind. Even today, a lot of
sites look exactly like Tailwind. Now,
Shhatsen is meant to be different. It's
meant to be customizable. It's meant to
help you build your own design system.
And yet a lot of shadian apps end up
looking exactly the same. After seeing
this pattern repeatedly, I've come to
realize that there are a few common
mistakes that a lot of you are making.
In case you're wondering, yes, I did
take a look at the latest Shad CN UI
update and these mistakes are still
applicable because they're not just
about features or tools, but they're
something more fundamental. So, if you
want your Shad CN UI app to look
beautiful and not boring, then keep
watching. Hey, my name is Ankita. I
teach concepts around web development,
AI, and SAS by building real projects
and focusing on practical decisions that
truly matter in production. I'm also
creating a video every single day until
Christmas. If there's a topic that
you're interested in, then definitely
comment below and let me know. I may
create a video on that. So, let's dive
in. The real mistake isn't the lack of
customization, it's delayed
customization. Your app has started to
look generic because you did not think
about customizing it at all. Now for
example the latest update of SHTN UI is
amazing. It exactly fixes this problem.
A lot of the shaden UI applications end
up looking the same. So with the latest
update you could simply create a new
project and then here you can build your
own shaden UI. You could pick a specific
preset that immediately changes what
component library you're going to use,
what style you're going to use, base
color, theme, icon libraries, fonts, and
so on. Now, this is intentionally done.
So, you could tweak the shadi component
library in your projects because the
challenge is that a lot of developers
just go with the defaults and never
change. As a result, our apps are
looking shateni. Now again, Shotsen is a
beautiful component library. So your
basic applications are also going to
look pretty good from the get- go.
However, if you want to stand out, you
want to create some sort of a brand,
going with the defaults isn't going to
cut it, which is why this specific
update really helps. However, that's not
all though. Here again, you're picking
the same some defaults. We're picking
the component library. We are picking
some style, icon library, radius, menu
color, and so on. However, the problem
still remains the same. Slowly people
are just going to adopt these common
customizations and suddenly your app is
going to look exactly the same just like
many other apps. So what are you going
to do then? Well, the minute you decide
what theme you want, colors you want and
so on. So once you set these defaults,
make sure you assess your entire
application and exactly how you want to
customize it. Instead of waiting later
and like maybe I'll customize it later
or pushing the decisions to tomorrow,
decide right now how exactly your your
app should look like. For example, pick
how you how you want your borders to
look like, what colors you want to go
for, what theme overall theme of your
application should be, the fonts in your
application, how would the different
headings look like, and so on. The way
chassen UI works is that once you
basically pick whatever theme you want,
it's going to add this to the URL, you
can just press create project, and now
you could simply create a project with a
specific preset. Now I have gone ahead
and created a project with a specific
preset for example. And if you go to
globals.css and this is an XJS project.
Now it has created all these different
CSS variables with different colors here
automatically because I chose lime as a
color. A lot of developers make a
mistake that they don't change these
values at all. So the key thing here is
decide early. Don't wait to theme later.
Decide early on what the overall theme
of your application is going to look
like. Be it icons, colors, border
radius, and spacing, spacing between
elements, and so on. All of these truly
matter. Now, I cannot believe that this
is something that a lot of developers
do. They end up copy pasting the
components with the shaden create
command or shaden add command to add the
components and after that they forget
about it. They don't update it. Even if
there might be a latest update in the
chat component ecosystem, they have no
idea about it. So you needed to treat
components as your source code, not just
simply snippets. You could use this
command npx shad cn at latest add all
override to override all the components
and update them and grab the latest from
shad cn registry. And this is a very
handy command and this is the best way
you can update them. You don't need to
copy paste them every single time.
That's very tedious. And in case you
just want to update one component, not
all of them. Then you could simply just
do shaden latest add card override. And
as you do, it's only going to update
that specific component. As you can see,
these are the changes here in the
background. And I'm saving it because
Shadian uses double quotes and I use
single quotes and my editor
automatically formatted it. But now you
can already see the types have changed.
It's no longer an H3. It is in fact div.
Similarly, it's no longer a P tag. It's
in fact a div. And obviously based on
the semantics of your application, this
could vary. So if you want to still keep
as a P, you could do so. But at least
you know that's a documented change and
that's how you want to build your
application. That's how you want to
build your car. Now this is the biggest
one. Many people customize chats by
adding random class name everywhere.
Let's say you want a different variant
of a button and the default variance
that chats UI gives you is not
available. Now instead what they would
do is go here type equals button and now
add a class name W full change the bg
color to be amber all of a sudden and so
on. Now, this is a huge problem because
now you're creating these one-off
components. And if you want your primary
button to change, then change it
globally. Don't just create these
one-off changes. And if you think that
you need a brand new variant, instead of
adding a class name and overriding it
like this, go to button. There are all
these variants that are displayed here.
There's a default variant, secondary,
destructive, and a link. And if you want
some other variant like custom, although
custom is not a good name, let's say a
tertiary variant that you could just
simply add that and create a different
background here or whatever you want to
provide. And then once you add this,
pick that as a variant here because now
this will be available for you and you
could use it globally everywhere versus
these one-off changes because that's on
a design system that's exceptions that
you're creating. Real customizations do
happen globally and spacing scale,
typography rhythm, different variants
add to that specific design system. If
every screen needs a one-off fix, you
don't have a system, it's going to be
super chaotic and your app is going to
start to look ugly or different. So most
app looks the same because they breed
the same. And exactly why if you want to
stick to a specific way you want to
design it, do it globally as well. Now
the new shad CN flow absolutely helps
and you can create a project you can
have different customization it does
remove a ton of friction but if you stop
there your app is still going to look
very familiar the fix isn't more
customization it's intentional imbalance
so you could for example fix spacing
typography and even how users interact
with your application and push it harder
than the defaults That's how your
application is going to stop feeling
more shad. And the most underrated
technique is the density and spacing.
Most shad and UI have the same padding,
same card spacing, the same rhythm. They
literally breathe the same way. So
instead of tweaking components later,
decide early is this app going to be
compact or it's in fact going to be more
spacious. for example, and then
accordingly adjust your spacing skills
globally. Make lists more tighter, make
layouts more denser, or intentionally
make everything more airy, for example.
And when it comes to typography, it's
not just about the font choice. Yes,
most you can change the font choice and
font choice will allow you to make the
app look a lot different because fonts
are incredibly important. However,
[snorts] it's not just about the fonts.
If you want your UI to look different,
you have to increase the contrast
between headings, the labels. Be
intentional about the line height and
the tracking in your application.
Changing the font is not going to just
simply change the hierarchy because it's
going to be cosmetic. Now, another thing
is how a user interacts with the
application. And this is something that
no one touches it because the shads and
defaults are quite polite. They have
like subtle hover states. For example,
as you can see here, the same
transitions. That's fine if you want
everything to look familiar, but two
apps can look identical until you
interact with them. So, you could make
your interactions more snappier, for
example. So, interactions could be
something you could handle. So, you
could make them more snappier. You could
have stronger hover states. So, you
could have like more of a bump. As you
can see the hover states of my two
buttons for my model for stack nextjs
course. I have in fact tweaked the
shadow here and so on. So it doesn't
look like a shatzen UI application even
though I am using shatz and UI component
library. But you could also make more
deliberate motion decisions. For
example, as you can see how the app
flows from section to section. It
completely changes how our app feels
without changing the layout at all. And
that's where also this flow can actually
fit in. So chassis and UI component
library gets you 80% of the way there by
forcing early decisions around fonts,
radius, spacing, and theme. That part is
great. But the last 20% the part that
you that will make your app unique is
exactly how you tweak these defaults as
well. So if you keep tweaking these
defaults, that's exactly how your SHA CN
app stops to look like when you shhat
CNA and it's also stops to look super
boring. It is more intentional and it is
more snappy as you can see here with
these cards too. If you take a look,
this is a card component from Shadzen UI
for instance, but the interaction here
is making it look more snappier than
before. Now, [snorts] shotsen won't
exactly same your UIs. It will only
expose how you make your decisions and
will give you strong defaults. So, you
get 80% of the way there. But if you
want to avoid making like generic sites
like Bootstrap or classic Telvin CSS,
then you should to truly customize it
and use some of the tips that I have
explained in this specific video. Now,
if this was useful, I'm posting a video
every day and Christmas. So make sure to
subscribe, hit the like button and
comment below and let me know or what
type of content I should create next.
Now having said that as next steps if
you are interested in leveling up your
next skills then definitely check out
this specific nextJS 16 crash course.
It's a 5-hour long course that teaches
you by building cuz that's the theme on
this specific YouTube channel where we
go through building a app like Product
Hunt and I also teach you all the things
you need to know about Nex.js.
Definitely check that out if you're
interested. I'll see you in the next
one. I for
Your shadcn ui app looks clean but it also looks like every other app. In this video, I break down the most common shadcn ui mistakes, why they still happen even after the shadcn create update, and how to think about shadcn ui as a real design system. If you’re using shadcn ui with React or Next.js and want your app to look intentional instead of generic, watch this before you copy another component. 🚀 Master Next.js 16 by shipping 7+ production-ready apps here: https://dub.sh/nextjscourse 🎁 Download Next.js 16 Cheatsheet: https://dub.sh/nextjs-cheatsheet What to Watch next? https://youtu.be/tI_Nt32_4wM ⏰ Timeline 00:00 - Why ShadCN Apps Look Same 01:13 - Mistake 1: Delayed Customization 02:50 - Solution 04:20 - Mistake 2: Update Components 05:55 - Mistake 3: Global Variants 07:38 - Beyond Defaults 08:15 - Density & Typography 09:25 - Interaction & Motion 11:17 - The 80/20 Rule 11:39 - Next Steps 💌 Frontend Newsletter: Frontend Snacks 🍿 https://dub.sh/frontend-snacks If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else. ✨ FREE Goodies: https://kulkarniankita.com/goodies ☎️ Book a 1:1 coaching session with me Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-ankita 🐤 Find me here Twitter: https://twitter.com/kulkarniankita9/ LinkedIn: https://www.linkedin.com/in/kulkarniankita/