Shadcn UI with Next.js | Personal Finance Dashboard App

[@YasierAnsari]

great content buddy, really liked your "Color Theme" pun you did at the end section 😂😂😂

[@muhammadnoman6513]

great work !

[@codewithosvaldas]

Thanks a lot!

[@zunaidahammed6761]

Nice video i learn some new things thanks to you

[@MK-xl5yo]

nice video, at some point we'll reach shadcn fatigue.. almost every web/saas app has same style..

[@codewithosvaldas]

That's a good point. The same as at some point most web apps were built with material UI.

[@Gaamaa-oz5ef2lf3n]

NOTE: When ever you do videos for KZbin, please never exceed 1080 display resolution. Since you have 4K res on your display, our eyes straning...

[@codewithosvaldas]

Thanks for the comment. Yes, I’m improving on this part :)

[@loveboat]

I don't understand shadcn. It says this: "This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps. What do you mean by not a component library? I mean you do not install it as a dependency. It is not available or distributed via npm." But it IS installed via npm. It IS literally a component library. I prefer copy and paste so I don't have to import a lot of shit everytime I want to style something.

[@codewithosvaldas]

It's not installed via npm. Well, almost... as there are cases when some radix-ui primitives are installed like @radix-ui/react-hover-card because shadcn/ui is built on it. 'I prefer copy and paste so I don't have to import a lot of shit everytime I want to style something.' - this is exactly what shadcn/ui allows you to do as when you 'install' a button via cli with 'npx shadcn-ui@latest add button' it will actually create button.tsx in your codebase without any npm dependency. Therefore, you can modify that button the way you like without a need to fork a library or some other ways.

[@lollol-il2vz]

First of all, you do not install any of their components with npm or any other package manager. The npm scripts they provide just helps to "copy" the code into your project, the components come with some styling out of the box but it is meant for you to edit them to your needs. You're not supposed to treat the primitives as components, but rather a headless skeleton that you put your styling on top of. The accessibility is handled for you by the radix primitives. You cannot compare shadcn to component libraries such as bootstrap. With shadcn YOU own the sourcecode, its literally there in your src folder or whatever. The benefits of such headless component libraries are many and the fact that shadcn uses tailwind out of the box just makes it so enjoyable to use.

[@codewithosvaldas]

@@lollol-il2vz exactly, that's what I was saying and you are 100% right