Build a Reusable Component in React (Shadcn/ui, Tailwind)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video we will be building a component in React that is similar to shadcn/ui. We will be using tailwind, cva (class-variance-authority), and clsx for this. The component will be reusable, customizable, and will be a simpler version of what shadcn/ui offers. Through this video you will learn how to build production ready UI components that you can use in your projects. You'll also be able to easily understand shadcn/ui's components and integrate them in your own project!

[Mobilemaniaplays]

Your teaching method is very good. Love from india sir

[design-with-hannah]

Great video with a ton of free value on React. And being in the design space, I love Tailwind. I can tell you'll be at 100k subscribers soon, the helpful content and production is on point🚀👏

[Farruh_]

Please make a video demonstrating how to animate components on mounting and unmounting without any animation library, like shadcn ui does. Shadcn ui animates components with tailwindcss-animate plugin, by using data attributes.

[utibeabasiekpenyong]

If I keep watching your video I bet it I would be a senior developer soon, You teaching procedure is top rated

[Grimz]

What a quality video! It is great to show how to make reusable components built on top of base html elements. I like the little things like the smooth mouse movement.

[medas]

Instead of copying the buttonVariant type to the props, you could infer it with the help of VariantProps like this: VariantProps<typeof buttonVariants> and you won't need to touch props ever again, even if you later decide to add an additional variant or a new class.

[ahmedabdelrahman]

it will also be more beneficial to enable component to accept ref using forwardRef

[demicoderr]

I'm really anticipating Project React! I really pray it is affordable.

[ronaldos]

Great job dude, new subs, thanks for the knowledge

[mohammadkhosrotabar]

I really needed this, thank you so much!

[EnesKab]

Hey Darius ! That's a great one as usual ! Can we also make a video combining this with an headless UI like Radix? So we can fully understand how to develop our very own library and components from scratch with primitives. I know you already explained the tricky part here, but you know newbies like me, we all ask for more... 😄

Btw I have checked Project React and it seems really promising. What kept me back for that course is the lack of NextJS. I know the importance of a good React knowledge to work comfortably with NextJS, but also we all know that NextJS is something else. It has it's own interesting and tricky parts like caching for example. So, if you could add NextJS into the pack as an extension, that would be great ! On the other hand it is a great decision to keep the TypeScript out in the course ! Thank you for that

[nemeziz_prime]

This amazing 🔥 Could you also do a video where you show how one can make their custom production ready UI component library using Storybook, Tailwind and say Shad CN UI?

[eca]

amazing explanation
thank you so much

[leonscander]

What if I want to make <a> as an underlying type of a button?

[psrs]

why cant we use clsx directly instead of cva

[nurpaisorozulbaev]

Great! Thank you! Do you have any typescript tutorials?

[heysahilsingh]

I was expecting something different, as this component is too easy to create. I think a dialogue box, a card or something would be better.

But still, m gonna like this ❤️

[julienheng]

can you achieve this without typescript?

[kaswanpradeep]

Can you do one for input element, as it has different types, it would be really awesome if you do it.

[antsii]

Should've used forwardRef to be able to pass ref?