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

Learn how to set up a design system in a Next.js application, and how to build an accessible and easily customizable user interface with Tru Narla, Software Engineer at Discord.
Design at the moment of inspiration: vercel.fyi/WEI...
Speaker: / trunarla

[@bitbybit981]

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

[@JakeJJKs]

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

[@connorallen162]

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.

[@mewtru]

Thank you!!!

[@bilencekic]

bro i just move to MUI recently :D is it a bad decision ? i found it very simple and rich component library.

[@rahulpatil3942]

@@bilencekic It's not bad at all. It totally depends on your use case. If your project requires you to heavily reset your chosen framework styles then you're better off building design system from scratch.

[@norliegh]

@@bilencekic if you're more of a infrastruture (backend) core dev. stay with mui as it'll let you focus more on the backend and ui won't be much of a hassle. however, it'll limit your creativity. if you want complete control of you ui. build one from scratch.

[@bilencekic]

@@norliegh thanks man! i was thinking exactly same. I bought a MUI template from mui webpage and i can easily build all the pages i need easily including reports+ validations + day/night switch etc. Datagrid control is awesome since i deal with big size of data. Everyting is really perfect. That was the answer i need. thank you. for now product's usability is important for me :D and it gives me that much of flexibilty

[@codewithguillaume]

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

[@mewtru]

Thank you so much :)!! Means a lot

[@mewtru]

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 😎

[@enyelsequeira3619]

Hey quick question how were you able to handle responsiveness as CVA itself doesn’t provide an api for it?

[@tzlukoma]

@@enyelsequeira3619 Tailwind can help with the responsiveness

[@phucnguyen0110]

Lovely presentation! I've been playing with Tailwind a bit recently thanks to not having a project with my current company. This is super helpful actually!

[@phucnguyen0110]

@@enyelsequeira3619 there are utility classes in Tailwind that can help you with it (sm:, md:, lg:, etc.)

[@enyelsequeira3619]

I know that guys. Just wondering if it would be possible like stitches, currently under their repo, it says it doesn’t support it

[@rodz]

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 💪🏻

[@mewtru]

thank you haha :D!

[@ThomasBurleson]

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.

[@matthewbeardsley7004]

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.

[@michaelmannucci8585]

She never talked about it though... I need to figure out how it works.

[@oemeraran8183]

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

[@DisasterQ]

Try Windstitch.

[@mewtru]

Cva is so good!!

[@DavidWMiller]

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

[@facundomartin6993]

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

[@zl9o1]

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 😂

[@Gumshoe21]

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

[@mewtru]

Thank you so much :)

[@michaelavnyin9673]

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

[@snackdonw]

You basically saved my job. Thankyou 😭❣💯

[@AnindoSarker]

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

[@piyushaggarwal5207]

Really loved the content. I could understand everything properly.

[@DiegoOliveira-ow1np]

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

[@michaelflores23]

I love that you define the design system as a *bridge* between designs and code. A design “system” that only lives in the design or only lives in the code is not a design system.

[@Chris-zt4ol]

It should definitely exist in both places but bridge is just the wrong word

[@michaelflores23]

@@Chris-zt4ol what word would you choose?

[@Chris-zt4ol]

@@michaelflores23 Well what Tru defines as a design system is actually a ui kit. A ui kit exist of reusable components, icons, colors, etc. A design systems is a framework for how to use those components and defines rules what is allowed and what is not. For example radix ui is a ui kit because it has a bunch of components that can be reused everywhere but material design is a design system because it describes how each element behaves, for example every element is made out of solid material (that's why its called like that) and cannot pass through each other nor behaves like a liquid and has it's own elevation usually represented with it's shadow (more = higher up)

[@michaelflores23]

@@Chris-zt4ol right, a kit with rules about how to use it maybe become a system. Still curious what analogy you might use in place of the bridge (agreeing with your point btw)

[@wlockuz4467]

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

[@faahkoo]

I still don't love it ahhaah but I can see the benefit in certain use cases!

[@RyuuuGamingUnlimited]

Still hate it. Ugly markup. Non contextual classes. Need to configure a lot of shit just to have granular control of a custom figma design, which already have most of the CSS given to you.

[@GeorgeArthurjoe]

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

[@james.restall]

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

[@jearthman]

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.

[@killerdroid99]

I really like your way of teaching

[@CaryKelnhofer]

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

[@aliarslanansari]

@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

[@demiann4160]

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.

[@8497715]

Like for CVA, great library 🔥

[@maxpower7735]

Great intro to CVA, thank you so much!

[@diegocamera898]

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

[@xavier9556]

Really nice to see your content. I was just trying to enable tailwind in a project and with this tutorial i learned alot on how to do define your stylings.

[@Rantalytics]

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

[@japarradog]

🎯 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

[@jugalkumarseth7675]

Thanks for video. Really informative.

[@geekofia]

This girl is a professional ❤️ She knows what's she is doing. Good to see her. I am currently designing my own design system and I learnt new things. Very helpful 👍

Awesome! Thanks! This taught me a lot!

[@mihir5846]

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

[@andrewwilkin1611]

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

[@ThingEngineer]

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

[@bessimboujebli1076]

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

[@minma02262]

My gawd. I serious need this.

[@TomNook.]

This is not vim

[@swig.]

this is true

[@fawwazmamin4346]

@@swig. *tru

[@raqibnur]

Amazing presentation ❤❤

[@oleksandrfomin326]

Top notch content. Thank you so much!

[@charles_hacks]

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.

[@oussamasethoum1665]

Beautiful explanation.

[@renaud689]

I learned a lot of cool tips, thanks

[@faahkoo]

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.

[@paultnewsam8737]

This is so money. Thanks for sharing!

[@user-vr9jq5xk3m]

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?

[@chiragsingla.]

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

[@ps__9979]

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

[@shamil1]

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

[@SREERAJM]

Thank you

[@soumya_495]

Helpful video 🚀

[@jboxy]

Very helpful ty

[@Otomega1]

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

[@bun_bon_bon_1204]

thank you so much

[@taunado]

Great. Thanks for sharing.

[@phordan]

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.

[@rahulpatil3942]

ButtonOrLinkProps are basically types for a normal button which are then extended by Varient props.

[@stevesango4855]

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

[@davidkawogo3681]

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

[@tastymuffinmm]

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

[@rodz]

Yes, you can find a regex on the README

[@tastymuffinmm]

@@rodz what regex would you use? the variants don’t have any pattern to them

[@VKD007]

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.

[@bramreinold]

Hi, what chair are you using?

[@returnZeroo]

Learned a lot

[@yusuphh.kajabukama4029]

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

[@semiloreidowu4601]

Excellent talk

[@fieryscorpion]

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

[@luizakataoka7501]

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

[@fernandosalcedo1400]

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

[@ramsundararaman6615]

That’s a great question. Did you try anything?

[@Balance-8]

is the repo available to the public?

[@ste-fa-no]

Storywhaaat? 🤯 very cool!

[@abenjamin13]

OMG 😳 I need this thank you 🙏.

[@igrb]

Banger talk

[@BearkFearGamer]

cva is the same as vinpac/windstitch

[@t3ntube357]

The video title should be "why I like Tailwind more", I thought she will show us how to structure a design system / best practices or something like that with Next.js

[@null_spacex]

Did you not listen for more than 2 mins?

[@mewtru]

There’s more here than just tailwind

[@im_parth]

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

[@anmol_dot_ninja]

WHY HAVE I NOT HEARD ABOUT CLSX

[@IcedCupcakes]

whats the diff between Tailwind Variants and CVA?

[@farhan-app]

MORE MORE MORE!!

[@damiantriebl1747]

Tailwind is now supported in turbopack?

[@alexandrumaioru748]

Thank you 🤩

[@brayancuenca6925]

how do you add nextjs font api to my variants?

[@mr.random8447]

Why use this cva over stitchesjs?

[@technicalanalysisbyblockem9964]

Where can I read more about cva?

[@ignacioarriagadairiarte4338]

Veré very good video What is tour vscode theme?

[@amsterdamtinus8456]

With next.js?

[@CaliburPANDAs]

Just use CSS modules

[@jshstuff]

I’m trying to be convinced that there’s a better pattern than CSS Modules but haven’t found anything better yet. I’m someone who likes going easy on the utility classes so I’m biased.

[@a89529294]

Vim?

[@muzammilsyed2339]

Repo?

[@tllong124]

At face value, Storybook seems like a lot of extra effort to make your web app design system micromanage-able for non-coders.. Value seems questionable.

[@mewtru]

So I’m building some components out in the discord codebase right now and it’s a huge monorepo. Changing a little bit of code and having it rerender takes soooo long. It would be so nice to have storybook to just test it out quickly and then use it in the actual project.

[@abel090713]

damn no link to creator in description

[@shantanu_kumar]

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

[@runonce]

7:04 Actual demo of CVA.

[@supafast1314]

Source code ?

[@SR-ti6jj]

Wow!

[@lenguajesdeprogramacionson5050]

Awesome, thanks.

[@danvilela]

Where is the git for this??