My Favorite UI Library Keeps Getting Better

Soo many new releases this past week. These 5 new components for shadcn's ui library are among my favorites because I use it so much. These components were available standalone before, and now have a unified style and streamlined installation w/ this update. Great work man.
Stay up to date w/ my newsletter: www.joshtriedcoding.com/
-- my links
Discord: / discord
GitHub: github.com/joschan21

[@BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's favorite UI Library.

[@NizzyABI]

😂😂😂😂

[@TheBswan]

Look at the subtle off-white typography, the tasteful border-radius. Oh my god, it even supports theming.

[@joshtriedcoding]

*sweats profusely*

[@GamingGeek9000]

here me ignoring all these UI libraries bcz I believe in pure jsx and scss supremacy

[@abdulramonlasisi3385]

​@@GamingGeek9000once you get a taste of ui libraries, you never going back, they make things move fast and easy

[@juliang3439]

This looks so clean! I am currently still deciding on what framework i will continue to study, definitely helped me making a decision, thanks bud!

[@naushadhaq2859]

Also, ShadCn is my favorite ui library of all time and now I am happy to listen that it is getting better day by day. Thank you Josh for this very helpful information about my favorite ui library. Happy New year in advance Josh! Love from Nepal ♥️

[@joshtriedcoding]

Happy new year man, appreciate ya!

[@yousifal-raheem5061]

For me the best UI library I found is DaisyUI. The real differentiating aspect is that it uses HTML standards in creating components instead of relying heavily on Div elements like all the other libraries out there. For example, a modal component uses a element. I don't think I've seen any other UI library that does that.

[@sahilverma_dev]

I've already tried the update. Really amazing

[@JRichens]

With the Carousel, do you think it would be possible to use it for a multistep form?

[@MyGeorge1964]

I completely agree Shadcn/ui is the best ui library for React/Nextjs by a long shot. I've been looking at NextUI and Daisyui as well and I have to say - and I don't say this often - I was blown away by Shadcn/ui... And, it is exactly what I like, the fact, that one can tinker around with with the code that is part of the project. Any screw up can easily be remedied by reloading the from shadcn.

[@FLasH3r]

Got your video recommended - it's great that your favorite UI library keeps getting better. Let see if we can find it's link / name in the description. none. just a brief 2 seconds name drop in the beginning of the video.

[@chinmayghule8272]

As far as I remember, the calendar component still has a problem with picking dates. There's no direct way to select a year, so if you create a "date of birth" input, the user will have to keep clicking the arrows hundreds of times to get to their date.

[@fitimbytyci345]

There is a solution to it actually, by using the goods of the calendar library itself, 1) You replace/insert those styles inside classNames caption: 'flex justify-center pt-1 relative items-center px-10', caption_label: 'flex items-center gap-2 text-sm font-medium', caption_dropdowns: 'flex gap-4 [&_.rdp-vhidden]:hidden', dropdown_month: 'relative inline-flex items-center', dropdown_year: 'relative inline-flex items-center', dropdown: 'absolute inset-0 w-full appearance-none opacity-0 z-10 cursor-pointer', 2) You add this props to component where called, fromYear={currentYear - 5} toYear={currentYear + 5} captionLayout='dropdown-buttons' Current year is just a variable that holds a new Date().getFullYear(); Happy Coding 🎉

[@matmolin]

Agree

[@topstats98]

Issue is opened in GitHub for this problem. Solution is also there. Shadcn developers accepted that solution. Pull request is sent, it's just to merge to the main branch. So in the next version I think we can select the year directly

[@captainnoyaux]

this design is horrendous

[@bassyboo]

damn they must be old for hundreds lol

[@M1a2n3o43]

As soon as i saw the update i knew bro was gonna make a video out of it 😂.

[@JakeeReacher]

shadcn/ui is definitely exceptional. I only wish there were a Shadcn/ui library available for iOS (SwiftUI). While there exists a library, it seems to receive minimal to no updates.

[@very_unique_username]

You don’t need shadcn/ui for SwiftUI.

[@antonel_rch]

@@very_unique_usernamewhy not?

[@JakeeReacher]

@@very_unique_username why do you think so?

[@theDanielJLewis]

The cool thing with the new Sonner toast component is how it layers multiple notifications over each other. The normal Toast component doesn't do that.

[@ecosse31]

It's incredible and so easy to work with! I wish they had a Masonry component like @mui/lab has.

[@codingzen869]

How do you do photo gallery pop out UI, multi-file upload UI etc. with ShadCN? I feel like it is missing some really necessary components, or am I wrong?

[@eshuyaleo6268]

Hey guys quick question i saw in other videos about shadcn that they could view the code of the examples on shadcn‘s page but I cant did he take it down or can i view them somewhere else?

[@AayushShastri]

How do you get responsive navbar with shadcn? I just couldn't figure that out.

[@optimbro]

That was an amazing video

[@EyupKantaCanbudak]

Looks cool 😎 Thank you 🎉

[@joshtriedcoding]

cheers man!

[@shourav006]

I need this resizable component. I am using react resizable but this looks so clean and customizable❤

[@tunoajohnson256]

Damn, I spent about 8 hours debugging my own custom carousel just last week 😭 and it's nowhere near as clean as this. Super keen to use this instead.

[@david_yt099]

This's exactly what I'm looking for

[@zohaibakber3056]

and guess what a new style with framer animations coming next year too

[@MBrunoS]

Cool, the carousel has similar api to a custom library i've built

[@tarikogic9313]

Does anyone know how to make the carousel fit the content of the current slide?

[@HSGG_]

wow looks pretty nice, how does it perform though

[@wilsonmela6343]

This is awesome.

[@killerpopholly4054]

Mine is Mantine for many reasons. First is I don’t use TW but that’s personnal

[@jamesdenmark1396]

Even the author doesn't really use Shadcn, you would only use it when you really need too much customization, this would be enterprise applications. In most project you would only need to customize the colors, and some radius, size of the buttons etc. My favorit is mantine.

[@goldyguy9151]

second, shadcn it's just wrapper around headless libs with some initial styling

[@srsjuliano]

Still ready only for TS? Last time I tried to use it with JS, it didn't work well.

[@AndromedaSir]

what headphones are you using?

[@owdx8984]

What app does he use for text animations?

[@waleedsharif618]

Can you drag those carousels using touch and not just mouse ?

[@HorizonHuntxr]

Yup you can

[@rajatkinlekar627]

Ngl, the carousel is kinda cool 🤧

[@sinkie420]

Carousels are exactly what I needed and was just searching for some ui library just for them. This timing was just perfect

[@joshtriedcoding]

I always used swiperjs in the past, works super well but having it look like the rest out of the box is just awesome

[@goldyguy9151]

use embla carousel

[@alexfelker2361]

@@goldyguy9151 this is what shadcn's carousel uses under the hood

[@leroviten]

That's so neat. Gr8. The only thing that I still wait is multi selector. Like a dropdown with options with the ability to choose multiple that will be shown as chips... This has been in their feature request alongside with custom implementations via Combobox, but it's yet there...

[@gyash21]

Hey Josh, how about a project where we build a component library of our own?

[@joshtriedcoding]

ooh interesting thought

[@owolabioluwatobi4439]

​@@joshtriedcodingyes....I second this😊

[@isipisiml4546]

hello josh, this is not video related but i hope you create simple tutorial on creating a full-stack app in nextjs + nextauth with external api.

[@UIExpertAyyaj]

Navigating the Future of User Interfaces

[@fardelian]

You should put a link in the video description. It's a bit difficult to understand the name of the library from hearing it and you only wrote it once in the video. It would help a lot if you put a direct link for everyone to click. Thanks!

[@GuthixCss]

But then we´re no longer forced to actually watch the video.

[@99kr2]

its literally on the screen in the first second

[@maheenkabeer4323]

If shadcn ui supports for react native, it will be great

[@rishabh1S]

Next Ui is better

[@pizzabossxd]

I knew he was gonna say shadcn/ui before I even clicked on the notification.

[@sujeet4410]

`react-resiable-panels` is 903KB unpacked 💀

[@NeoWordpress]

Can we use tailwind css and shacn together.use tailwind style and shadcn ui?

[@alexfelker2361]

yes, all shadcn components are styled via tailwind and classes are merged with twmerge, so can you simply add your own classes and override existing classes in each component

[@chadcummings4600]

The toast component is better that you showed. Esp. when there are multiple!!!! Theo showed it on his channel.

[@mohieddinealhariri665]

I was wait for your review on this update 😂. Very great ui lib Thx for showing it for us 👌 I would like you to upload a video on freelancing tips and how to start + become better...

[@azizkira7505]

Pls talk about next server action with orm like Prisma or drizzle because I used it but it return that same data over and over again and I can add no-cache because it's not a fetch

[@heracraft5526]

Import {headers} from next/headers then call headers in your server action Function omeAction(){ headers() .... } That should work until you find a proper solution, worked for me with the clerk api.

[@azizkira7505]

@@heracraft5526 I will try it right now thanks

[@azizkira7505]

@@heracraft5526 that way awsome it works thx a lot

[@quarzasiphix]

insane

[@sebastiancastillo3560]

Do you think shadcn can cover the UX of an accounting system? thanks Josh!!

[@joshtriedcoding]

I think so, as long as you don't go too overboard with colors it looks super clean

[@nonefvnfvnjnjnjevjenjvonej3384]

shad cn is what everyone is using. so what is another one which looks different but still has the quality of shad cn and radix ui etc.

[@sangdonlee7440]

cool!

[@robinsedeqi2535]

I couldn't make the carousel autoplay though

[@dantr4n]

found the glazer

[@jejeexd]

Hey Josh, any new projects coming up? haha

[@rajeepthapa5426]

shadcn is becoming chadcn

[@NizzyABI]

Shadcn is the best!! I don’t use anything else.

[@AbhiShake-pl3cf]

I didn't like sonner. There are 2 things for similar result, and we have to import sonner to use toast. Also, i couldnt turn it to red for ex, toast.error still has no color

[@Joseph_ebuka]

U should pass a prop called rich color it would handle all of that for you take a pout 5 minutes to go through thier doc simmer has everything you need

[@AbhiShake-pl3cf]

@@Joseph_ebuka OMG its there. Thanks alot man. I didnt read docs coz i thought its just a toast library what could it have

[@matthewmurnaghan4473]

+1 subscriber

[@user-zr9ix5eb7u]

when I use t3stack and shadcn，the shadcn's style don't work anymore😢😢😢

[@user-zr9ix5eb7u]

does anyone know why

[@zakidzz]

hey do us a vedio of how define and the best way way to define variants :completly diffrent variants: for component like accordion :multi part component:

[@AlexJamesDean]

Yo bro i understand you're spitting straight facts here but jesus the velocity of your words is madness.. I mean you only gave one second to the name of the library you are using talk about r/whoosh

[@aeronwolfe7072]

bro, i have tried (virtually) LITERALLY EVERY component library, and shadcn is the best... absolutely LOVE shadcn.

[@pablovillarroel6582]

What do you think of Radix? I’m starting a project for work and I’m deciding between the 2

[@lyrical6852]

shadcn is only working with typescript? I tried to use but it's looking for ts.config.js. I'm only using plain/vanilla react vite

[@bdotexe]

Dont use the install command, you can go to the component you want and use the "Manual Instalation" it should be in the bottom part of the shadcn component you want.

[@salihyil2]

Can you make video how to make my own ui library?

[@matiasperessutti6443]

What’s this library’s name?

[@Sorkstryparen]

I rly like NextUI better.. 😅 How would you compare these two?

[@313PH4N7]

I believe he kind of did already. Compare the two, that is. Or, at least he has a video on using the two together. shadcn/ui is fast as it uses CSS animations whereas NextUI uses framer/motion for its animations and could therefore be detrimental in regards to the performance of your application. However, using them in conjunction will allow you to mitigate the risk of your application's performance tanking, by only using NextUI components where it is absolutely necessary and then using shadcn/ui components everywhere else. Hope this helps.

[@codyt_arsis6698]

NEXTUI IS THE BEST

[@erickmoya1401]

I built this idea with my company ui design system before knowing about shadcn. After I saw shadcn idea implemented (ofc better) and how much people loved it I knew I was in the right path and I pushed further. I would really like to have time to build a generalist solution for sync components (as shadcn feels really tied to their implementation). Golang people started this "ownership" trend, and I feel that UI libraries in js are of the painpoints that can benefits of this going further.

[@meslzy]

Mantine gang

[@64-bit63]

Waaaouw

[@threepe0]

"no abstraction philosophy" ...."look how simple this is." I'm speechless. You do know why it's so simple looking correct?

[@slluxxx]

why do you talk about it but put no link to it in the description?

[@rankala]

and if you now link this library, it your be super awesome

[@user-fr2fm3ri3w]

Just google Shadcn

[@khasanshadiyarov]

I haven't been impressed by a ui library for a while

[@Zwifs]

Big problem: React. Nothing for something like Laravel / HTML

[@amiruladli8057]

what u talking? u can use react with laravel?

[@youneshenni5417]

shadcn is the best

[@MrLazyleader]

I don't understand. Which projects are compatible with this? Can I use this for my c# Xamarin forms App?

[@arson5304]

shadcn ui docs says that it isn't a ui library 🤣

[@goldyguy9151]

XD

[@Englishmusic-qi9fp]

It is game changer

[@jamesgphillips91]

Carousel click through rates are terrible. It’s bad ux. Clients don’t know that tho

[@cotyhamilton]

Why did all the influencer webdevs make this same video with this same title 🙄

[@Chuygbg]

I've made my own components including a carousel. If you cant do a carousel on your own im sorry but you should probably reconsider being a developer. I know it saves time to use UI libraries but this is just so basic that if you cant do it you shoudnt be doing projects for other people

[@FrankyDeMeyer]

Exactly. I just wrote my own OS, and my web browser is nearly finished 😃😌

[@Chuygbg]

@@FrankyDeMeyer thats not the pont dude. Im building my own web builder do you think i got to that level by using libraries? Its important to know how to do the hard stuff or else you will eventually get stuck. That is the point. Not that you shoudnt use libraries, but remember that if you do your code may become something you no longer understand nor can maintain

[@FrankyDeMeyer]

@@Chuygbg Those are 2 different things. I'm not saying you shouldn't learn to do the hard stuff and become a better developer, I believe most of us do. That's what brings us together in these types of comment sections. We're the ones who want to learn. What I meant was: this doesn't mean you should write things where you could use a library instead. There's a time of learning and there's a time of using the tools that exist to move faster and have some expert maintain them.

[@Chuygbg]

@@FrankyDeMeyer yes I do agree with you in that. My comment was more for those people who are library junkies instead of actual programmers

[@mokhtariabdelmadjid2977]

every web dev should be able to create his own light weight UI components without relying on any UI library and trying to learn how to implement and how to customize is just waste of time, just plain CSS or tailwind and prepare in advance all your components that you will use for every project

[@chinmayghule8272]

You can try to do that but NEVER use them in production since you would never, by yourself, be able to cover all possible accessibility caveats and cross-browser problems. It's always better to use UI library which a team of experts have created and has been tested by many, many developers.

[@theyreMineralsMarie]

I'm sorry but this is an outdated mindset. We as developers should build upon the work of others. If I created all this from scratch I'd probably get fired from my job.

[@pkgamer7860]

@@theyreMineralsMarie Exactly If we try to reinvent the wheel everytime, then its the only thing that we are goona do

[@joshtriedcoding]

does knowing how to build this yourself help tremendously in gaining a great foundational dev understanding? yes. should you do this in prod? I don't think so, unless you REALLY put effort into it, but by then you might as well publish it as a standalone ui library

[@aleksd286]

How much you being paid for this?

[@joshtriedcoding]

bruh are you serious

[@OnlyGamerNerd]

Not a UI library

[@CookerSingh]

You look like a kid who just dropped out of college from nowhere and learnt typescript to review others code in javascript with the hope that one day you'll grew up mature like tom Holland in his childish Spiderman movies.

[@hb-robo]

Seek counseling, this is deranged.

[@goldyguy9151]

overhyped "ui lib"

[@pragyanyadav5539]

ummm i have seen better ui libraries than this

[@np5855]

React sucks