ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 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
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 💪🏻
thank you haha :D!
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 😎
Hey quick question how were you able to handle responsiveness as CVA itself doesn’t provide an api for it?
@@enyelsequeira3619 Tailwind can help with the responsiveness
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!
@@enyelsequeira3619 there are utility classes in Tailwind that can help you with it (sm:, md:, lg:, etc.)
I know that guys. Just wondering if it would be possible like stitches, currently under their repo, it says it doesn’t support it
cva was exactly the missing piece i was looking for when building components with tailwind. I was building something like this myself.
Try Windstitch.
Cva is so good!!
This is not vim
this is true
@@swig. *tru
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
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.
Thank you!!!
bro i just move to MUI recently :D is it a bad decision ? i found it very simple and rich component library.
@@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.
@@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.
@@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
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
Thank you so much :)!! Means a lot
Not sure if I hate this or not yet, but this is a damn good talk, good shit.
Very good talk, Could we have the URL for the repo?
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.
Can you please share a link to this codebase?
I use this path alias
{
"paths": {
"@/*": ["src/*"]
}
}
So i don't have to care about path alias when renaming, making or deleting a directory
Would love to see this with NextJs13’s new app folder structure. Also link to this codebase please.
Cringe intro
@@PhilippBlum Or, you know, it could be an attempt at humor. Turns out women like irony just as much as us.
Bruh I’m just having fun over here 😂
@@PhilippBlum don’t be cringe 😂
Like for CVA, great library 🔥
WHY HAVE I NOT HEARD ABOUT CLSX
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.
Really loved the content. I could understand everything properly.
🎯 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
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.
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
I still don't love it ahhaah but I can see the benefit in certain use cases!
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.
You basically saved my job. Thankyou 😭❣💯
What developers wants isn't features, they want order and neatness
Vim?
Thank you
Very helpful ty
Really cool, definitely going to try CVA, is there an example project you can share?
Just use CSS modules
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.
Thanks for video. Really informative.
Great content 💯. BTW does anyone know what font is that ?
This is awesome, I never thought about organizing my Tailwind work this way. Thanks! 🤟
Thank you so much :)
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
Hi, what chair are you using?
cva is the same as vinpac/windstitch
Source code ?
jump cuts, jump cuts, jump cuts. Informative video though :)
I know I’m a little late, I’ve been busy, but this is amazing!
shadcn, hah?
thank you so much
not gonna lie, the whole tsx/react code makes tailwind seem way more over-complex than it is.
Amazing presentation ❤❤
This is a truly cool video)
Do you use the "tailwind-merge" package?
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
Finally chanced on your videos... I've been following you on Twitter. I really had a wide smile on when I saw you here...
Helpful video 🚀
Repo?
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
Amazing content! I loved how much you can do with Tailwind and cva integrated with Typescript autocomplete.
love these videos, thx for the great content!!!
cva looks nice, but is there a way to get tailwindcss intellisense working with it?
Yes, you can find a regex on the README
@@rodz what regex would you use? the variants don’t have any pattern to them
whats the diff between Tailwind Variants and CVA?
is the repo available to the public?
Veré very good video
What is tour vscode theme?
Awesome! Thanks! This taught me a lot!
Banger talk
Thank you Tru! Is it possible to fork this project?
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
Learned a lot
Tailwind is now supported in turbopack?
With next.js?
how do you add nextjs font api to my variants?
Please give us more info on this. I have been looking for such for a long time. BIG THANK YOU!!!
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?
This is a so influential video for me. I'll use these for every project now
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
thank you so much. between you and lee you guys are giving out incredible information. so greatful
Anyone know the vscode theme name?
can i get your repo pls.. then it will be easy to make our own from the base of yours
I learned a lot of cool tips, thanks
Why use this cva over stitchesjs?
This content is insane! After watching this I feel like I've been living under a rock...
Can you please do a demo on setting up Tailwind on Blazor?
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.
This is so money. Thanks for sharing!
Great intro to CVA, thank you so much!
Storywhaaat? 🤯 very cool!
My gawd. I serious need this.
@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
7:04 Actual demo of CVA.
Great. Thanks for sharing.
This is great! Is it possible to make it a NPM package?
Where is the git for this??
can you provide github repo for it?
I feel so outdated when people use Typescript nowadays.
I feel so outdated when people use JavaScript nowadays.
Where can I read more about cva?
Top notch content. Thank you so much!
Amazing video! Is there any way to use cva for disabled/loading button states?
That’s a great question. Did you try anything?
damn no link to creator in description
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
Did you not listen for more than 2 mins?
There’s more here than just tailwind
Beautiful explanation.
Wow!
Why nit scss or sass😭
Great presentation, cva is a game changer for keeping the design system maintainable.
Excellent talk
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.
She never talked about it though... I need to figure out how it works.
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.
ButtonOrLinkProps are basically types for a normal button which are then extended by Varient props.