UI Libraries Are Dying, Here's Why

UI libraries have been an essential part of the history and progress of the web if it wasn't for the hard work of the developers who created things like bootstrap and material UI it's hard to imagine that front-end experiences that are good would be as prolific as they are today things like Twitter Youtube and so many more built with these awesome libraries to make surprisingly good applications and as such most developers who build user experiences on the web are building with component libraries which is why I'm here to tell you that they're dying the future is not one of big popular UI libraries that everybody is npm installing and building within their code bases actually looks quite a bit different I've been thinking a lot about this and I wanted to share my conclusions after thinking about it for too long and where I think things are going in the future of the web I want to be clear this is a very speculative video based on Trends I have been seeing and experiences that I've been impressed with as things change over time but I really do see a trend happening here and I wanted to take the time to document it and share my thoughts so let's talk about Shad CN and shad UI if you're not already familiar with Shaden UI it's an awesome open source project by Shaden a prolific open source contributor in recent addition to the team at for sell he helped a lot with VZ and a lot of the other cool stuff going on there but what is Shaden UI isn't this a UI Library well kind of not really it's the pieces for you to build the perfect UI library for yourself as it says here build your component Library what Shad UI provides isn't a package that you install they do have a CI to help you set things up but the way C CN works is it installs things in your code base as actual code you can edit when you set up any of the elements in here you can either manually grab the files that you need and copy paste them into your app set up the tail and set up all these things or as of recently you can run this command so let's go add the Shaden accordion oh look at that they have options for all these different run times I just copy the bun command four times the charm Tailwind doc config.sys protect the stuff I don't want to change the Alias I want to change where these actually go but that's fine if it's putting it in this at slash thing I don't want to with it too much yeah it should work but it'll be a pain to manage later move it now I will trust you cool we'll move this where I want it because again like the magic of this is that it's actual code I own I think they are smart enough to update this they're not so I'll add SL star to be/ Source SL cool so now I've done that I should be able to install components so if I want that accordion thing scroll down here yoink and now I have in my own code an accordion. TSX file and if I want to make any changes to this I can because it's my code and my code base using Tailwind the way I personally would like to use it it's also built on top of radx UI which makes it way easier to have accessible components and all the components in Shad UI are incredibly accessible there's a lot of contributors making sure it stays that way so if I wanted to go in here and just delete a bunch of this code I hate how scroll Works in VSS code sometimes when you're selecting things import accordion not from react accordion at SL components UI accordian it's going to need some props I'm sure what does it want type equals single cool we can also look at how they actually use it in here this is a code example accordian type single collapsible and has accordian items in it that's just grab this first item obviously a lot of these need to be imported a little Annoying that it's confusing the radx UI Imports with the Shad CN ones I almost wish there was a way to tell typescript to never use the rad UI ones but now we have what should be a totally functioning nice looking accordion oh it's not going to work cuz I don't have environment variables I'll just go make a nonsense one there we go now we have a fully functioning collapsible accordion and our code base that behaves the way we want it to and I know that was a bit of work to set up but it wasn't that bad and it's mostly because of where I'm putting things and again the CLI that they just added is very new and will smooth out those parts but now if I ever want to add new elements it's trivial to I can scroll and find collapsible here's a collapsible repo selector who isn't had to build one of these before or a combo box where you select multiple things at the same time with a search built in too or a data table or a hover card all these types of things are very annoying to build and now we have code we can rip immediately you can always grab the code directly it's one of the options when you set up but you don't have to you can use the CLI or you can use the manual copy pasting of Parts because all of this code is meant for you to run in your own code base that's what's so different about this for me is I don't think about installing one specific package or one specific UI library and hope it has the solution and if it doesn't I'm screwed it's very easy now to just run this command and add a hover card now if I go to my source you'll see I have hover card. TSX which is a complex component Library file in my code base that I can change however I want that's an incredibly powerful path for developers of all types of UI stuff where a lot of the Simplicity of a provided component library is there but more importantly the ownership you normally lose that exchange didn't happen so if you're building a UI library for your company this is one of the best starting points imaginable and if you're just starting a side project and want a couple buttons or accordion like elements or all the different complex accessible uis that many of us need to build all the time just hopping in here clicking the one you want clicking the copy button and running this command lets you in your code base have whatever UI elements you need where this gets much crazier is v.d which if you're not familiar it's a new project by versel that lets you generate components built on top of Shaden with AI so if I wanted to generate video player element with a comment section now it's generating four different potential uis for a video player with a comment section I didn't mean to hit regenerate now it's going to rerun all of that oops momentarily after it doesn't rerun cuz I accidentally hit the wrong button I do kind of hate that regenerate is here next to all of these because the ones I had before looked much better okay this one looks fine add your comment here's some comments underneath let's ask it to make changes can you move the comments to the right as a scrollable sidebar move the add a comment input to the bottom of the comments sidebar at a title section below the video player while this is generating I'll take the time time to point out that versell does sponsor the channel they have not told me to talk about VZ or any of this stuff I just like it and genuinely use it and think it fits the theme of this video so no they're not sponsoring this video I'm just doing this cuz I want it to so yeah and now one last request extend the comment section sidebar to be full height and now through just a handful of requests to an AI generator theoretically once this runs seems like they're getting lot more traffic lately okay I didn't like doing that part but thankfully it is just generating code that we can rip into our code base I click this little code button we can see the exact react Source it generated as well as the HTML if we wanted to just use the HTML in any other framework more importantly though I can copy the command run this name the component video View and now the same way we would add any other UI component we have video view. TSX is a component I can mount just like that and here is this basic component again we have our own CSS on the page and that's going to affect things we have a really good starting point with code and layout and everything else we would need in order to make this look great I even add a quick background here just BG gray 800 make it darker there we go if I wanted to have a background for the video player uh BG gray 500 so it's clear that like this is where the video would go and having this in my source code again this isn't something that just came from the external World in some package that's installed if we look at my package Json the stuff that's been added is rx's helpers for doing good accessible react code as well as things like class variance Authority and clsx which are just there to make sure the right class names are being applied and Tailwind merge and Tailwind animate so you can have your tailing classes merge appropriately and do custom animations on them too if you've ever built a UI Library your head's probably spinning right now because this makes all the pieces you need to build a good UI significantly more accessible and the same way you would have built a package that your company is sharing across things you can use these pieces to build that same package or even just a folder in your existing application this has lowered the bar for building a UI Library so low that it's just as good as adopting something like material UI or like bootstrap and since Tailwind is the base piece that assembles all these parts it's really easy if you've used Tailwind before to make changes to the code that you're getting be it from v0 or from Shad UI itself and this isn't the only project that's going in this direction Tailwind UI is also very similar Tailwind itself is a CSS library that is just a way to write CSS slightly faster but if you want actual components like buttons comment sections audio players and all these types of things they actually have a bunch of components they've made for you to use and if you want them you go to the page that has the code you want on it this might look familar if you've seen the Ping or upload thing specifically websites you hop to code and here's the source for all of that just there for free free to use as you please and for the more interactive parts that have like drop downs and things they have a little react button too so you can get all the react code oh look it's right there react here's the react code and it even has the mobile menu built for you as well all of these things are just there for you to use I will say tail and UI is paid for a lot of it a handful of the components are free but they do charge if you want everything thing it's actually a very reasonable pricing scheme where you pay 300 bucks once ever for just yourself or you pay 800 bucks once ever for your team pretty dope I'm very happy as a tail and UI customer and it's really cool seeing things like this especially Shad CN and Shad UI pushing it way further I wouldn't be doing all of this work Justice if I didn't also talk about the underlying pieces that make it possible obviously Tail's really big but I mentioned radx a bunch what even is radx radx is a really really powerful set of pieces to build accessible react applications The Primitives it provides are incredible they provide a bunch of hooks and components to do accessible things and this list might look pretty familiar having a drop down example labels all these types of things these base components and base hooks are the parts that allow for developers to make really accessible applications and really accessible user interfaces quickly in react and things like it and it's really cool seeing radics find success seeing headless UI find success headless is the equivalent of this from the tailin team where they have all of these different components and the hooks and things you would need to run it or render it correctly it's not just components it's Hooks and behaviors and all of these other complex things that are hard to get just right and that's why I'm so excited when I see these new Solutions because getting accessibility right is hard getting your component architecture right is hard getting the different states in race conditions and edge cases is obnoxiously difficult and we've been Reinventing the same work over and over again and even if you were using a UI Library like a material UI as soon as you had something slightly different from what that provides it was really hard to build better Solutions on top of it you end up with a jarring difference between the material UI components and the custom things you write outside of them this blurring of the line between library and code you own where it is always code you own but a lot of the faster movement and Agility you normally get from using a component Library you're just in a much better starting point and that's why I see this transition going as aggressive as it is and that's why I see so many developers hyped on stuff like shadu versell hired him for a reason this is very much a bet on the future of how we author applications in user interfaces and I think I'm making that same bet I really don't see a future where component libraries are the thing that we're installing in our projects the future seems like something where we run scripts to generate the best component library for ourselves in our applications and this solution won't compromise on the flexibility we need to build the right UI for our users this is a very exciting future and I'm so hyped that we're moving towards it as as fast as we are what about you what do you think have you played with shad CN yet what are your thoughts on this future where we're not installing user interface libraries anymore I think it's exciting and I don't think component libraries are going to be around the way that we're used to very much longer you want to hear my thoughts on the state of CSS as a whole video pinned in the corner there where I break down all the different CSS Solutions it's one of my best I'm really proud of it even if things have changed since and YouTube seems to think you're going to like the video there so maybe check that out too appreciate you guys as always thank you again peace nerds

Channel: Theo - t3․gg

Views: 224,017

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: 2Q0mWH6g8Fo

Length: 13min 27sec (807 seconds)

Published: Sat Jan 13 2024