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

@NizzyABI

5 ай бұрын

😂😂😂😂

@TheBswan

5 ай бұрын

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

@joshtriedcoding

5 ай бұрын

*sweats profusely*

@GamingGeek9000

5 ай бұрын

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

@abdulramonlasisi3385

5 ай бұрын

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

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!

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

5 ай бұрын

Happy new year man, appreciate ya!

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.

I've already tried the update. Really amazing

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.

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

5 ай бұрын

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

5 ай бұрын

Agree

@topstats98

5 ай бұрын

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

5 ай бұрын

this design is horrendous

@bassyboo

5 ай бұрын

damn they must be old for hundreds lol

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

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.

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.

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

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

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

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?

This's exactly what I'm looking for

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

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

5 ай бұрын

You don’t need shadcn/ui for SwiftUI.

@antonel_rch

5 ай бұрын

@@very_unique_usernamewhy not?

@JakeeReacher

4 ай бұрын

@@very_unique_username why do you think so?

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?

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

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.

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

@jamesdenmark1396

5 ай бұрын

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

5 ай бұрын

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

wow looks pretty nice, how does it perform though

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

Looks cool 😎 Thank you 🎉

@joshtriedcoding

5 ай бұрын

cheers man!

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

That was an amazing video

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

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...

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

@HorizonHuntxr

5 ай бұрын

Yup you can

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

@joshtriedcoding

5 ай бұрын

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

5 ай бұрын

use embla carousel

@alexfelker2361

5 ай бұрын

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

This is awesome.

Navigating the Future of User Interfaces

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

what headphones are you using?

Ngl, the carousel is kinda cool 🤧

What app does he use for text animations?

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

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

@alexfelker2361

5 ай бұрын

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

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

Next Ui is better

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

@joshtriedcoding

5 ай бұрын

ooh interesting thought

@owolabioluwatobi4439

5 ай бұрын

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

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.

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

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

5 ай бұрын

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

@99kr2

4 ай бұрын

its literally on the screen in the first second

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...

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

5 ай бұрын

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

5 ай бұрын

@@heracraft5526 I will try it right now thanks

@azizkira7505

5 ай бұрын

@@heracraft5526 that way awsome it works thx a lot

Hey Josh, any new projects coming up? haha

found the glazer

I couldn't make the carousel autoplay though

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

@user-zr9ix5eb7u

4 ай бұрын

does anyone know why

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

@pablovillarroel6582

4 ай бұрын

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

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

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.

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

@joshtriedcoding

5 ай бұрын

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

shadcn is becoming chadcn

What’s this library’s name?

insane

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

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:

cool!

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

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.

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

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

5 ай бұрын

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.

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

5 ай бұрын

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

5 ай бұрын

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

NEXTUI IS THE BEST

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

@313PH4N7

5 ай бұрын

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.

Mantine gang

+1 subscriber

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

@user-fr2fm3ri3w

5 ай бұрын

Just google Shadcn

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

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

@amiruladli8057

4 ай бұрын

what u talking? u can use react with laravel?

Waaaouw

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

shadcn is the best

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

@goldyguy9151

5 ай бұрын

XD

It is game changer

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

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

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

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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

@joshtriedcoding

5 ай бұрын

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

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

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

4 ай бұрын

Seek counseling, this is deranged.

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

4 ай бұрын

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

@Chuygbg

4 ай бұрын

@@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

4 ай бұрын

@@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

4 ай бұрын

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

Not a UI library

How much you being paid for this?

@joshtriedcoding

5 ай бұрын

bruh are you serious

overhyped "ui lib"

ummm i have seen better ui libraries than this

React sucks