Tru Narla: Building a design system in Next.js with Tailwind 

cva was exactly the missing piece i was looking for when building components with tailwind. I was building something like this myself.

The ButtonOrLink component is seriously the best takeaway from this video! Thanks so much, I was banging my head on the desk for ages trying to come up with the best way of solving this.

I watched your video... double-blined over clsx, gasped at cva and said 'oh daaaamn' at the Zod usages. Really great video. Love your energy, insight, style, and tutorial. Super job.

Really loved the content. I could understand everything properly.

You basically saved my job. Thankyou 😭❣💯

Bruh, you all are trying hard to make her feel smaller. Try gifting our community by mentoring instead of BSing in the comments. Why would your 9yo career inflate your ego so much when you aren’t mentoring others with your senior knowledge? Great job Mewtru 💪🏻

Finally chanced on your videos... I've been following you on Twitter. I really had a wide smile on when I saw you here...

love these videos, thx for the great content!!!

Beautiful explanation.

Can you please share a link to this codebase?

Whoa…. You deserve a statue to be raised in every ui engineer’s backyard! Omg, this was great.

Hi I see on your storybook that you have null value for button variants under controls. I'm also having it in my storybook, but example button doesn't have that. This comes from inferring CVA props into button. How can I either remove that null value from Storybook controls, or when clicked to fallback to default value? An shouldn't those inferred types be strict, not involving null and undefined? Thank you

Helpful video 🚀

I use this path alias { "paths": { "@/*": ["src/*"] } } So i don't have to care about path alias when renaming, making or deleting a directory

Amazing video! Is there any way to use cva for disabled/loading button states?

cva looks nice, but is there a way to get tailwindcss intellisense working with it?

can someone help me where i can i find a select input in tailwind, this is so much easier with tools like select2 with jquery, i really like to use tailwind, but the overwhelming of creating everything from scratch is killing me

Vim?

can i get your repo pls.. then it will be easy to make our own from the base of yours

I feel so outdated when people use Typescript nowadays.

Nice one just I think it's over engineering, but the typescript @path tip is a golden buzzer for me!

Thank you sooooooooooo much!! I've literally spent the last month thinking and researching ways to use tailwind as the foundation for a component library. The mention of CVA is worth the price of admission alone. Please upload a repo for this

I'm almost upset I haven't come across your work and online presence earlier! So much good information packed into a short span of time! Kudos

This is not vim

Coming up with a component library that I'm happy with has been a HUGE pain, this video would have been SO helpful like 3 months ago when I decided to move off MUI. This is a great overview of the component library problem.

Hi everyone! It’s Tru from the video! I’ll have a repo up soon so you can take a look at the code :). Thank you all for watching! And for those who are opposed to tailwind, this is just one solution, and for those who are mad at the intro, what can I say I’m a popular person 😎

Not sure if I hate this or not yet, but this is a damn good talk, good shit.

Great video! I'm always struggling into decide if using a well testes open source UI components library like Chakra, Mantine, Mui, or to develop one from scrath. What's stand in front to go from the scratch solution is a lot of UI components library are not giving you styles but sometimes accesibility, community approved UX patterns, accesibility, hooks (if React) and help you in building complex components (for eg, a calendar picker). Even with this drawbacks would you consider going scratch? I like the mix approach of RadixUI plus Tailwind but I heard from people having problems integrating Tailwind with Radix. Another mix choice would be using TailwindUI components which is kind of a rich extension of what Headless UI is. This is topic for me that I don't have a definitive choice fir sure.

Hello Tru! I didn’t know you but as a senior FE Engineer I clearly recognized your expertise and knowledge. Will follow you for sure ! Best

Very good talk, Could we have the URL for the repo?

Would love to see this with NextJs13’s new app folder structure. Also link to this codebase please.

🎯 Key Takeaways for quick navigation: 00:08 🌟 *Introducción a Design Systems en Next.js con Tailwind* - Definición de un sistema de diseño. - Opciones para implementar sistemas de diseño: bibliotecas preconstruidas vs. crear uno propio. 02:03 🎨 *Personalización de Tailwind CSS para el sistema de diseño* - La flexibilidad de Tailwind CSS para personalizar estilos. - Ejemplo de personalización del color de la marca en Tailwind. 03:28 ♿ *Consideraciones de accesibilidad en el diseño del sistema* - Uso de bibliotecas de accesibilidad como Headless UI. - Importancia de la accesibilidad en el desarrollo de componentes de diseño. 05:25 🔗 *Integración de TypeScript, Alias de Ruta y Storybook* - Uso de TypeScript con alias de ruta para componentes de diseño. - Implementación de Storybook para probar componentes de diseño de manera aislada. 06:52 🚀 *Demostración práctica del sistema de diseño en Next.js* - Visualización y personalización de botones con Class Variants Authority (CVA) y Tailwind CSS. - Uso de componentes accesibles con Headless UI en la demo. 13:17 👋 *Cierre y recursos adicionales* - Información de contacto y redes sociales del presentador. - Finalización de la conferencia sobre sistemas de diseño en Next.js con Tailwind. Made with HARPA AI

The idea is really cool, but tailwind has really bad readability x_x. I use it just for small stuff, but for a whole Design System, I still prefer to use a lib that keeps closer to CSS syntax.

Like for CVA, great library 🔥

Seems like a okaish way, i would prefer to build the components with scss or postcss with classname and variant utility function predefined in my utils file. Why to junk up the js bundle for this simple thing. Keep in mind ive use material, chakra etc too. I can use tailwind if i dont wanna spend time on creating the design system.

WHY HAVE I NOT HEARD ABOUT CLSX

CSV looks amazing. I’m always in trouble handle all the props and style variations. Thanks for sharing! I’m chillin on my couch but now I have to try this things out 😂

There are two types of people - Those who love Tailwind - Those who hated Tailwind but now love it

Really cool, definitely going to try CVA, is there an example project you can share?

Great content 💯. BTW does anyone know what font is that ?

Hi, what chair are you using?

Thank you

Thanks for video. Really informative.

What developers wants isn't features, they want order and neatness

This is awesome, I never thought about organizing my Tailwind work this way. Thanks! 🤟

Very helpful ty

thank you so much

Cringe intro

I know I’m a little late, I’ve been busy, but this is amazing!

not gonna lie, the whole tsx/react code makes tailwind seem way more over-complex than it is.

Just use CSS modules

Source code ?

This is a truly cool video) Do you use the "tailwind-merge" package?

jump cuts, jump cuts, jump cuts. Informative video though :)

shadcn, hah?

great video this offers some nice tools for working with tailwindcss that i missed from theme-ui. thanks for sharing.

So good. Trying to study and get into frontend devrel. Had no idea about Storybook and that would help so much with large, data-dependent apps.

I really like your way of teaching

Repo?

whats the diff between Tailwind Variants and CVA?

Thank you @Narla for this amazing content, very helpful, I really liked the vscode theme you are using, very pleasing, what's it name if you dont mind

that was awesome thanks shed some good light on how tailwind could really help, it just seems so convoluted for writing just css but I guess you get use to it

Veré very good video What is tour vscode theme?

Amazing presentation ❤❤

How does the bundling work as a library (monorepo or independent repo)? Does it include all the components not required for the page, or only load components required for that page?

Thank you Tru! Is it possible to fork this project?

how do you add nextjs font api to my variants?

Tailwind is now supported in turbopack?

Amazing content! I loved how much you can do with Tailwind and cva integrated with Typescript autocomplete.

is the repo available to the public?

cva is the same as vinpac/windstitch

Banger talk

Please give us more info on this. I have been looking for such for a long time. BIG THANK YOU!!!

Awesome! Thanks! This taught me a lot!

I learned a lot of cool tips, thanks

Can you please do a demo on setting up Tailwind on Blazor?

This is so money. Thanks for sharing!

thank you so much. between you and lee you guys are giving out incredible information. so greatful

This content is insane! After watching this I feel like I've been living under a rock...

Where is the git for this??

Anyone know the vscode theme name?

With next.js?

Why use this cva over stitchesjs?

This is a so influential video for me. I'll use these for every project now

Great intro to CVA, thank you so much!

This is great! Is it possible to make it a NPM package?

My gawd. I serious need this.

Storywhaaat? 🤯 very cool!

Learned a lot

@mewtru I was facing issues with variants when I tried building components with tailwindcss few months back, this video was helpful, will be following up your work

Great. Thanks for sharing.

7:04 Actual demo of CVA.

Great presentation, cva is a game changer for keeping the design system maintainable.

can you provide github repo for it?

Top notch content. Thank you so much!

Where can I read more about cva?

damn no link to creator in description

OMG 😳 I need this thank you 🙏.

Why nit scss or sass😭

Do you know what concept I can study to understand how your 'ButtonOrLinkProps' are just "basic button props" (mentioned at 8:39 )? I'm not too learned in typescript and props, so getting 'className' to apply to the button (not throw errors) is proving beyond my declarative capabilities in my own speculative version of your "ButtonOrLink.tsx" import and what it contains. Thanks for this great overview it really tied a lot of things together for me, and storybook is great.