Add Variants and Loading to your Button! Build a React Component Library with Tailwind CSS & Next.js

Create a button that can be used across your entire SaaS app by adding a loading state and variants. I also cover forwarding the React reference so the button plays nicely with other components. This video is exactly what you need to build out the look and feel of your SaaS app.

["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]

⚡️ Demo ⚡️

📰 Newsletter 📰
Signup for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.

🔖 Chapters 🔖
00:00 - Intro
00:43 - Forward Ref
03:41 - Loading State
07:08 - Variants
15:35 - Outro

📜 Code 📜

👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.

[ethan_mick]

Keep your Tailwind CSS code hinting with this snippet. Add it to your VS Code `settings.json`:

[
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]

Sorry, I totally forgot to mention this!! Shame on me, lol.

[TheGaoNan]

Another great video, you are bringing a lot of value, can't wait to see the channel grow and grow!
Thank you!

[mkroven]

thank you, at last I got how typescript deals with forwardRef.

[raivikas]

Great tutorial, that the thing which I was waiting for 🔥🔥.

Can you also try to make more components maybe which are more commonly used like input fields, modals alert, toast notification .

[Showmatic]

Great video. For accessibility, I use react-aria and it works fantastic.

[shakhruzrakhmatov]

Hey Ethan huge thanks for all these tutorials!
Since you do you tutorials with App Directory it would be really useful if you could demonstrate Routing features of App router like parallel routing, intercepting routing and all that staff along with role based access to these routes if possible!
Anyways, Huge thanks, and love your tutorials!

[ekchills]

Please Ethan I'm having issues publishing the package. I bundled with rollup but whenever i install it my styles don't work and i don't get any other props asides the default button one's is there something I'm not doing right?

[ronaldpaek]

Can you make a tutorial teaching people how to set up an initial style guide for a project based of a Figma design / spec?

[learner]

Are there specific meaning to Primary / Secondary ?

[codernerd]

Part 2 is finally here, but doesn't this break Tailwind code hinting 😢

[StevenOrtiz-gr]

hello friend, do you have a tutorial on how to create a saaS from scratch with roles in Next.js

[nickwoodward]

Obviously American, but there's an accent creeping in here. Secret Brit? :)

[DanteMishima]

No. Show us the code where you use the variants