Adobe's UI Library is Finally Out

I'm pretty skeptical when it comes to large corporations releasing their own tech. This one is kind of a banger though
-- my links
Newsletter: www.joshtriedcoding.com/
Discord: / discord
GitHub: github.com/joschan21

[@michael.knight]

Wouldn't a better comparison be Radix? Isn't ShadCN essentially a modified version of that?

[@user-sh5qp6uu1e]

This!

[@gradientO]

Radix really is underrated! Not everyone wanna copy paste

[@joshtriedcoding]

I figured more people know what shadcn is over radix, yep radix would be the more direct comparison

[@djblast101]

I hate shdcn for stealing the recognition of the actual hard working open source libraries who power the actual so called "library"

[@clamentjohn]

Its react-aria-components vs radix-ui, not shadcn. Radix UI is what powers shadcn and it is also focused on accessibility.

[@xastralmars]

shadcn/ui uses Radix UI mostly, but it also uses components created by shadcn himself along with other ones like Sonner. The only main difference is that all of them are styled with Tailwind and have the same aesthetic.

[@jyuviolegrace8144]

Came here to say this as well. Feel like the video is crediting Shadcn where it should be radix. ​@@xastralmarsthe example where he says "Shadcn" is mostly radix tho.

[@pelazas1]

Congrats on 100k, hard work pays off. 200 videos and really good content. Keep up the good work!

[@joshtriedcoding]

That means a lot man. Cheers

[@tmczs_o8429]

@@joshtriedcoding I found your content maybe a week ago and I love how professional is your presentation of content

[@dMDzn]

I've been using React Aria for nearly a year now and love it. The new RAC library is just awesome. Especially love the button component - as simple as it is.

[@nikhilsnayak3473]

We use RAC at work. And I must say it is far better than what we think. The integration with tailwind is just awesome

[@CommunityAllSeasons]

What everyone misses about this library is that is breaks everything down into hooks for interaction, state and accessibility. The components are awesome but if you need a component to act a different way in your design system it's hard in most UI libraries to alter it. This one gets around that issue by making so that you can build your own with their hooks and alter it in anyway with your own state. It's roll your own + use ours. Truly one of the best react specific libraries out there. Definitely needs better docs as they don't do it justice.

[@rayyanabdulwajid7681]

This Library is so lame inspite of being backed by a big company like Adobe, nobody has ever heard of it before 😂😂

[@IStMl]

You haven't heard of it because you're incompetent ​@@rayyanabdulwajid7681

[@user-sj2pg7tz7i]

Josh you are a star! Thank you for the vids, really appreciate what you are doing here 😊👌

[@jmula1963]

the hit for bad contrast came from their choice of Gray text on black background

[@_nikeee]

This is the component version of react-aria, which has existed long before, am I right?

[@rli09]

hey Josh, what do you use for screen recording with facial video capture?

[@rjwhite4424]

bro I stay following your channel cause you always posting the hottest new packages and component libraries.

[@jexxiewoo8390]

I wonder how to select multiple days in the calander component at 3:41? Are you holding some key?

[@cameronkffn]

Could you add the link to the adobe library in the description

[@gauravmandall]

At 2:52 how did you make that code representation video??

[@freeyourmind7538]

Im a learning coder, i have decent knowledge in html/css/JavaScript and looking to get into React, what does this Adobe UI have to do with React?

[@paw565]

I would love to see your take on styled components sir. Great content! 😊

[@CoryTheSimmons]

It's bad 😂

[@joshtriedcoding]

AW HELL NAH

[@SogMosee]

Panda css is better than tailwind. Props are better than classes

[@mazlumog]

Jo this looks dope!

[@TheBlackManMythLegend]

the goal is to delight the user. that's what matter in a product not the biggest technical score on google light board when you have a product that people love people come back to it

[@user-hf2uf6qy5s]

Where I can find code for demo table from adobe aria homepage?

[@21Maxim]

can someone explain why he said to not use styled components?

[@nunograca2779]

I'm no react expert, but I think it's because of the runtime overhead. Just research about the pros and cos of StyledComponents.

[@iLiran]

That's really cool that they are aiming for React-native Pressable like experience.

[@rand0mtv660]

1:44 I'm suprised the contrast issue doesn't point to a certain HTML element because Lighthouse usually does show that to easily be able to see what elements are causing trouble. 2:50 I do think shad cn is a nice concept and looks great, but please stop talking about it like it invented how to build component libraries. People have been building component libraries with these patterns for a long time. Only difference is that they didn't share their source code for others to copy paste.

[@PraiseYeezus]

"Only difference is that they didn't share their source code for others to copy paste." well yeah...that's the point? to have the source code and to be able to easily style things with a top-level utility class is huge

[@rand0mtv660]

@@PraiseYeezus I'm not saying that isn't a good thing, I'm just saying that people behave like shad cn invented these patterns.

[@majordandotnet]

I think the contrast failure in PageSpeed Insights is a false positive. The error in PageSpeed Insights seem to be a runtime failure in axe-core: "axe-core Error: wf[r] is not a function." If you test the page within the browser using Lighthouse, aXe DevTools, or Accessibility Insights, all of which use axe-core under the hood, no contrast errors are reported.

[@jgoon3]

Can you explain the obvious reasons styled components shouldn’t be used?

[@jaspreetmaan121]

probably because of performance,since all the styles are calculated at runtime

[@ionelCristianLupu_]

it's good? Not sure. I am honestly disappointed by it. But it's understandable for a v1.0.0. I've been using it in the past two weeks and I saw two big issues with it: 1. in a Nextjs 13/14 app server components, it loads the entire 40+ components even if you use only a simple button. In client components, it doesn't split correctly the modules per page. 2. The onPress even is pressing twice on mobile Android devices if you have a button under the button you press (using conditional rendering to render the 2nd button after the first one is pressed. This like a show/hide component).

[@solomonakinbiyi]

Can you use Vanilla CSS in Shadcn UI?

[@nachete9752]

Whats the difference between this and chakra ui?

[@jatul28]

Why did you mention not using styled-component 😢

[@rudzkygen]

to be honest, I had huge expectations from this lib, but when I wanted to use some of these components I found that it's not that easy to do it. Maybe it's just me, but the lack of well explained examples is a big issue here

[@ahmad1734]

I used react-aria hooks to build my company's design system just like NextUI and it's been great. Hooks are more powerful than components but will take more time!

[@rjwhite4424]

I feel like once Nextui comes out with a date/time picker it'll surpass MUI bc who doesn't love tailwind integration

[@robertm4934]

As a full time video editor who deals with Adobe’s inefficiencies in basically every program they have on a daily basis, I want nothing to do with this library no matter what 😂

[@Tushar.Sharma]

I can relate. We were recently asked to build an app with AEM for content management and working with it sucked - a lot.

[@DeepTitanic]

I bet you have to rent it for £20 a month

[@davidsiewert8649]

800kb of bundle size for a ui library is a very rough pill to swallow through....

[@multiwebinc]

It's actually 164.6 kB minified and gzipped according to bundlephobia. But I'm assuming that's the whole library and if you're only using one component it would be much lighter.

[@hyperprotagonist]

Every time you start a video, you open your arms. I feel like you want a hug 😊

[@rariber]

he is german though 😂

[@Thassalocracy]

And also when he ends the video 😅

[@joshtriedcoding]

lol good catch

[@bennydieudonnetenezeuvoufo247]

Please can you a tutorial on how to do a multi tenant app in next js , with custum domain and sub domain, it will be very helpful

[@Hellbending]

“Become a UI dev” -> uses comic sans. THIS GUYYYYY 😂 I f’ing love you man hahahaha

[@joshtriedcoding]

haha cheers man

[@muhammadwahyuramadhan7730]

yo josh! i feel you looks thinner bro, is everything is fine broww.?

[@alexandruciobotaru6424]

2:22 what are the obvious reasons?

[@videoponder4673]

Just generally asking: What is the advantage of a UI Library over HTML and a good CSS framework? I somehow feel, that UI libraries (not just this one) somehow re-invent the wheel.

[@GlarkOn7]

Big thing is accessibility baked in - screen-readers , keyboard navigation etc.

[@videoponder4673]

@@GlarkOn7 thank you!

[@CoryTheSimmons]

I don't want to make a data grid from scratch ever again 😭

[@johan.mp4]

@@GlarkOn7 most (all?) native html controls are already accessible. It's when you start inventing your own controls they become inaccessible.

[@rand0mtv660]

Advantage is that someone spent hundreds/thousands of hours programming all UX, accessibility and workarounds for bugs on certain platforms like iOS Safari for example. They can also offer utilities for handling gestures which can be tricky for something like drag and drop maybe because that API sucks in HTML5. That way you don't have to think about that and can use a component that works great, but can apply your styles to it to align it with the "brand design" for example. I love this trend of unstyled components because it means I can stop re-inventing the wheel by re-implementing some common components each time I work on a new project, but can adapt the components to visually fit with the design of the app.

[@actioN1337]

Did you read my email regarding Shopify Hydrogen a few weeks ago?

[@gabriels6485]

why not use styled ?

[@alexg7282]

Thank you

[@darelbvcr687]

Is shadcn better?

[@akarikev]

this is awesome but shadcn still rocks!

[@Slinky]

How long until they start charging $49.99 a month for this?

[@bioburden]

Dont sleep on Panda, nice that they support that too.

[@ernestogonzalez9897]

Wait why not use styled components?

[@ernestogonzalez9897]

Nevermind, found the answer. For styled-components, the browser downloads the CSS first and then deduces it using javascript before inserting it into a page. This means a user must download all the javascript before opening the application, which hampers the performance of your application.

[@pullapoohi]

Why not styled components? Because they do not work server side? or because you have to import a another library? Would love to learn the reason :)

[@NadjibSamsung]

Because they have shitty performance

[@Hellbending]

4:23

[@pullapoohi]

But styled components does not hide any CSS? For example, tailwind abstracts the styling in my opinion but styled-components you write "pure CSS almost"@@Hellbending

[@joshtriedcoding]

umm no you can totally use it, I'm just passionate anti-styled-components

[@rand0mtv660]

TL;DR Comment is super long, but please don't use styled-components on new projects. There are just better solutions out there these days. If you have to use it on an existing project, then just keep using them. I know I'm not Josh, but I can give my reasons why not to use SCs. They have a runtime cost because they run JS at runtime for their styles. This means there is an additional cost to run styled-components on user's machines and as far as I know can also invalidate a lot of work browsers do regarding optimizing and caching CSS. But don't quote me on that CSS browser engine stuff because that is really complicated. Now as far as server side rendering and react server components are considered, styled-components also complicate things there. css-in-js solutions that have a runtime cost are generally not recommended by the React team ever since public talk about React 18 were started. Those are objective reasons. Why inject your styles through JS when we have CSS files already that browsers can optimize and that we can cache independently of JS logic. Now for my subjective reasons, I think SCs have horrible DX. I've worked with styled-components about 6 months and personally it was the worst experience I had writing CSS and I've been working as a frontend dev roughly for 7 years now so I tried a decent number of CSS styling solutions so far. I worked with SCs about a year ago. With SCs, every little style needs to be a component. You need to center some text? Well create a component and add text-align: center. Oh you need to center an element? Create a component and add flex and items center to it. It's just exhausting that you cannot easily see styling and it took me a lot of effort to parse multiple styled components to wrap my head around what is actually going on in styles, especially if dynamic values were done through props. And don't even get me started on parsing styles in your head if there is inheritance involved where one component extends some other. I know some of the reason for this complexity was just many devs working on the project at the same time and you inevitably do end up with some spaghetti code, but some of it was just the API of the library. I did like the fact styles are scoped and also Typescript and autocomplete for all tokens we had in the design system. I think that was phenomenal, but everything else sucked, at least for me. Could you create a Flex component and use that when you need flex? Yes. Could you do it for a text-align center component? Yes, but it's tedious compared to writing div className="flex items-center". Using Tailwind for this example, but this could be some custom utility classes if you want that. Or even if you had a custom class here, you can just open a CSS file and look at style there without too much abstraction. If starting a new project, I wouldn't recommend styled-component just out of objective reasons listed in my comment and especially because of my experience with it, but I do know some people like using them. As with everything, someone will love using it, someone not. To be honest, if you want scoped styles in your components, just rather use CSS Modules with your design tokens defined as CSS variables and just write modern CSS like that. You will at least be writing regular CSS and not camelCase properties all the time and you will stick closer to "native" solution. If you don't mind Tailwind, just use that because that has a well defined API and onboarding devs is definitely easier for Tailwind compared to any custom CSS that is written either with vanilla CSS or something like styled-components. If you don't like Tailwind, just use CSS then with some good CSS methodology for structuring your CSS. Era of runtime css in js solutions is on the decline (which I think is good) and we have realized what mistake that actually was. There are better solutions out there so please explore them! Or just use native features and write vanilla CSS because native features always outlive abstractions such as SCs. I didn't jump heavily on the css in js hype train and I'm really happy about that because all projects I've worked on that use regular CSS or CSS Modules are just CSS in the end. Anyone can jump into them and if they know CSS can work on them. I also don't need to potentially rewrite them or refactor them to work with newer features like Nextjs App Router because they are just using regular old CSS. Many times, it's just better to stick with what's "boring" and tested and not just jump on every hype train. One less dependency to worry about in the end is also just nice. This comment was super long, but hopefully it gives you some perspective from a fellow dev.

[@pranavgoel29]

Why not to use styled-component, can anyone provide some context for this?

[@versaleyoutubevanced8647]

styled components build their css in runtime, the react is moving to a server side direction, you'd prefer using 0 runtime style solutions like tailwind or CSS modules

[@JlNGLEZ]

There's almost no overhead in most applications using styled components, it's a silly argument, minuscule performance differences, time to paint is completely unnoticeable

[@versaleyoutubevanced8647]

@@JlNGLEZ the 0 js to the browser drama is such a bullshit, most of the people never had these kind of problems but i prefer tailwind over styled components

[@rand0mtv660]

Runtime css in js solutions are on the decline and as far as I know React team advised against using them when they started talking about React 18 and streaming features in their public React 18 working group repo. There is just no reason to use styled-components anymore, at least not on new projects when there are better solutions. If you are using then on a big existing project, of course you aren't going to rewrite everything so just continue using them, but for new projects there are better options.

[@pranavgoel29]

Hmm, interesting thanks for the replies everyone 😊 What solution are you using and why, is there any guide or blog to dive deeper into this?

[@TimMattison]

"Please don't use styled components for obvious reasons" ... what are the obvious reasons? I'm not a UI guy.

[@reed6514]

Idk i think its pretty obvious

[@TimMattison]

@@reed6514good call, thanks!

[@StephenRayner]

Decent library

[@owenwexler7214]

Almost all React UI component libraries have at least one thing terribly wrong with them (including ShadCN)..... hopefully Adobe can pull off one that doesn't.

[@davidsiewert8649]

Josh, missed the elephant in the room -> you switch yourself? Otherwise its just empty hype

[@a4cfee]

V good i like it

[@AlwayzJarvin]

2:22, what are the obvious reasons?

[@MohamedElguarir]

the only annoying thing about it, is the documentation it's so complicated and hard to follow.

[@ataractic]

yes

[@Eiusmodeuvelinmi]

$10 per month

[@AvivTupac]

Yeah but it’s adobe .. and the price tag will follow . Chad is the library of the future

[@JlNGLEZ]

"Please don't use styled components for obvious reasons" - pushing people in a direction purely based on personal preference isn't what any good mentor should be saying, a developer should be adaptive to all situations and should be taught this way.

[@IStMl]

First time I see this guy, he doesn't seem competent. Said quite some wrong stuff in the video.

[@JlNGLEZ]

@@IStMl I don't think he has anywhere near the experience to be posting these videos, good content, extremely opinionated and biased information, multiple videos he's posted now similar...

[@egretfx]

bro you always comment against him...come on now😅

[@JlNGLEZ]

@egretfx I have commened twice I'd hardly call that always, I'm a software engineer of 15 years, a mentor to many and I will always voice my opinion to someone who preaches incorrect information to vast amounts of people that's simply not correct

[@olucascardoso]

It's a trash to use styled-components in a world that has tailwind or UI library to launch something fast or something small

[@theomegamale5335]

Ugh, nothing disgusts me more than non-framework agnostic component libraries.

[@odra873]

Aria 4tw

[@ameer6168]

Imagine trusting Adobe

[@danko95bgd]

instead of creating web components ui lib, they create this abomination

[@unforgettable31]

This library doesn't look half bad, but for a fancy UI experience I'd rather use a more mature library like NextUI.

[@bangunny]

NextUI lacks alot of components, my suggestion would be Mantine UI

[@unforgettable31]

@@bangunny well yeah it lacks a ton of things but you can use a lightweight library like shadcn in conjunction. That, and the HUGE extensibility it supports with classNames. As for mantine UI, didn’t know it existed but it looks gorgeous, so thanks for that!

[@rjwhite4424]

I think the only components Nextui needs is drag/drop, date/time picker, and file input.

[@unforgettable31]

@@rjwhite4424 File input is pretty simple to implement tho (it prolly doesn’t even need to have it’s own component), and date picker is also doable (a bit tricky but still possible).

[@rjwhite4424]

for my work we use MUI for our date pickers and tables. NextUI already has a decent table component so once NextUI makes a solid date/time picker I'm gonna push my lead to swap over component libraries bc NextUI is so much cleaner.@@unforgettable31

[@FreshMedlar]

Make sure to pirate it, do your part 🙂

[@JoyShaheb]

shadcn >>>>>>>>>>>>>>>>>>>> any other library out there

[@Chooseyouruniquehandlebya]

Looks disgusting. Not suprised coming from adobe

[@kacperzmijak1462]

The way you smuggle personal opinions as facts is very irrresponsible. Josh, you are a software development influencer and probably a mentor for many beginner devs. It is VERY INADEQUATE of you to bring up such a very opinionated and far-fetched statement and refuse to elaborate. This entire "anti-styled-components" thing of yours is very immature, people are asking why it is so obvious they shouldn't use styled components, and you can't event give the simplest of an answer. Most junior devs are taking the world as it is - it is enough that you say what they should do without explaining why they should do that, and they will remember and keep it. You are harming the community with such personal endeavours, Josh.

[@76900aakhtar]

Adobe giving something for free?

[@nonefvnfvnjnjnjevjenjvonej3384]

it looks awful. designers are some of the greatest sheep on the planet. can someone innovate and make something which looks different? i swear all these libraries look the same. before this it was that tailwind look and before that bootstrap...

[@versaleyoutubevanced8647]

you would prefer using something not opinated and build your app styles on top of it instead of receiving a bunch of unuses styles, remove them, then add your app's styles...

[@nonefvnfvnjnjnjevjenjvonej3384]

@@versaleyoutubevanced8647 no i want opinionated but different

[@reed6514]

​@@nonefvnfvnjnjnjevjenjvonej3384 i think 🐑 are the best 🐑

[@reed6514]

But yeah mainstream products tend to follow mainstream trends ... it's not that big of a deal.

[@nonefvnfvnjnjnjevjenjvonej3384]

@@reed6514 yes but why though.trends shouldnt be copied blindly by designers. the lion wont eat you.

[@neobscura]

2024, the web is now perfect. It can render UI. Seriously what have we done ? Where is my simple static html+css... Javascript ruined everything.

[@awesomewow668]

who tf cares about ui

[@apteryx]

me

[@emmanuelgenga7421]

You're the team windows xp

[@STEELO-247]

What a horrendously stupid statement.

[@DeepTitanic]

Your mother needs a better UI for her OnlyFans page

[@rodjenihm]

Anyone who has users