Тёмный
No video :(

They Dropped THIS And Thought Nobody Would Notice 

Josh tried coding
Подписаться 153 тыс.
Просмотров 26 тыс.
50% 1

Unstyled Component Libraries are a godsend if you ask me. Ever since I discovered 'em like a year ago (been using plain tailwindcss before) I've never used anything else. This is a great addition for us all to use.
Check out Radix themes here: www.radix-ui.com/
-- my links
My SaaS (closed beta, not public yet): www.splitter.gg/
My Discord: / discord
My GitHub: github.com/jos...

Опубликовано:

 

21 авг 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 114   
@shakapaker
@shakapaker Год назад
It would be better if they added new primitives that so many people waiting for
@yaaaayeet745
@yaaaayeet745 Год назад
new primitives like 👀❓
@philheathslegalteam
@philheathslegalteam Год назад
I wonder too
@joshtriedcoding
@joshtriedcoding Год назад
that would be awesome, I wonder how fast they'd be integrated into existing ui libraries
@MagicTheKrakening
@MagicTheKrakening Год назад
Lot of newer devs don't understand the concept of DRY. They are all waiting for the next mouse trap to be built that includes all the newer bells and whistles they read about when they should be writing them into their own code base.
@MirkoVukusic
@MirkoVukusic Год назад
Multiselect
@developerpranav
@developerpranav Год назад
I think this looks better than just black-and-white design of shadcn UI :)
@sohampatel5166
@sohampatel5166 Год назад
Shadcn ui just launched different color themes . they look pretty good
@egretfx
@egretfx Год назад
shadcn UI you can customize everything bruh
@wasd3108
@wasd3108 Год назад
​@@egretfxWhat a pathetic comment ;D. As if with radix-ui you can't. Remember, shadcn uses radix-ui for primitives. And then slaps on what any dev would do when creating reusable components. You create (or take/import in shadcn's case) a functional un-styled component (radix-ui primitives) which is the most work to create. Then you create a styled or styled composite component (these 2 are the case for shadcn) out of it, by adding styles (classes, variants...). You basically styled a headless/functional component. It is literally what Theme and variants do in radix-ui themes. Yes, if you use global css variables and style it like that, it's the most customizable way, because you're doing it the most basic way.
@davidadokuru8139
@davidadokuru8139 Год назад
They tweeted about it last week, it's cool
@thisweekinreact
@thisweekinreact Год назад
Nobody would notice? 😅 That was our newsletter headline 2 weeks ago. 😉
@Dom-zy1qy
@Dom-zy1qy Год назад
Def gonna try this out, this library being developed by the same people that actually built Radix UI makes me optimistic.
@FranFiori94
@FranFiori94 Год назад
We will probably will look in the future and say "why the f* did we thought that this shadcn thing was good?"
@charliesta.abc123
@charliesta.abc123 Год назад
It's been 2 weeks I'm searching for a solution for some weird behaviour I'm seeing with the shadcn/ radix combobox. On chrome on android, it triggers the keyboard to open an extra row of keys showing the credit card, password and location icons. This causes the layout of the combobox input to get messed up, the padding shifts around.
@NikosNtounas
@NikosNtounas Год назад
Give a try on Rewind-UI combobox component
@qodesmith520
@qodesmith520 10 месяцев назад
Always good suggestions. Thank you!
@salahiddinediouri280
@salahiddinediouri280 Год назад
Great share thank you, i'm setting my client side Sass project so i will try to use this cool librairie
@mithushanjalangan5132
@mithushanjalangan5132 Год назад
You should give Tamagui a shot too!
@neontuts5637
@neontuts5637 Год назад
Hi Josh, Thanks for the update.
@joshtriedcoding
@joshtriedcoding 11 месяцев назад
youre welcome dude
@nofeah89
@nofeah89 Год назад
Would be interesting to know how to styles these components in tailwind
@bravefastrabbit770
@bravefastrabbit770 11 месяцев назад
Bro, that's exactly what he's doing here lol
@benji_builder
@benji_builder 11 месяцев назад
I hope radix and shadcnui add color inputs, those are the worst to configure and setup to fit in.
@Ali-ei3mg
@Ali-ei3mg 11 месяцев назад
This is so similar to Chakra UI. What is the difference between radix UI and Chakra UI?
@paragateoslo
@paragateoslo 11 месяцев назад
Yeah dont really get why radix should provide a theme. Thats the whole point of radix. It being completely styleless.
@imnash21
@imnash21 11 месяцев назад
Shadcn UI doesn't have a vertical orientation on the Navigation Menu component
@mathuraditya7
@mathuraditya7 11 месяцев назад
Shadcn is just a basic wrapper on top of Radix, you can create your own
@EEBDivyanshgupta
@EEBDivyanshgupta Год назад
have you checked React Aria???????? ig its also a unstyled component library
@simpingsyndrome
@simpingsyndrome Год назад
Can you made a tutorial about how to make reusable component in nextjs 13 app router, like how can we pass a callback as a props, because in app router it won't let us to pass a callback to component(server/client), imagine we have a button, and i used it in everywhere, so when i need a event handler, we can't do like {... props} from the component, instead of doing hardcode the event handler, for example we need onClick, and that event handler will there everywhere, how terrible is that.💀
@electroheadfx
@electroheadfx Год назад
I don't understand shadcn-ui use always Radix ui
@lucifer-5ybtn
@lucifer-5ybtn Год назад
I’ve been running into an “issue” in NextJS (13.4.19). They have tailwind.config.ts (not .js) and shadcn/ui does not have support for that as of now. What could be a solution to this? Is it okay to delete the .ts file and go with tailwind.config.js or when the shadcn cli asks where the tailwind.config.js is so should I simply say tailwind.config.ts? (Tried that way and it simply overwrote the entire tailwind.config.ts with the commonjs syntax (module.exports) and I don’t know if that would work properly or if it will throw any errors at the build time). Please let me know if anyone has a solution.
@aristide_F
@aristide_F Год назад
Im using the .ts and I’ve not had an issue so far.
@lucifer-5ybtn
@lucifer-5ybtn Год назад
@@aristide_Fso in shadcn/ui’s components.json, do you have something like this? { config: “tailwind.config.ts” }
@owl3379
@owl3379 Год назад
Shadcn is working with 13.4
@aristide_F
@aristide_F Год назад
@@lucifer-5ybtn yes I do. And I’ve had no issues so far
@aristide_F
@aristide_F Год назад
@@lucifer-5ybtn Shadcn supports .ts “tailwind”: { “config” : “tailwind.config.ts” }
@aghileslounis
@aghileslounis 11 месяцев назад
Wait wait, don't you have 0 control in this case, you don't have access to the comp? You can't override styles on any component. At least, there is nothing in the documentation that shows how, you can do it manually ofc, with "style".
@DukeEmree
@DukeEmree Год назад
I don't like styles. I think shadcn-ui is better. Also has more component than radix
@eshw23
@eshw23 Год назад
Yea, both are fine, its a waste of time focusing on to many ui.libraries.
@wasd3108
@wasd3108 Год назад
terrible comment shadcn uses variants per component, radix ui uses variants and a theme to wrap it's elements around. It's basically the same thing. Just that radix has more stuff about it and can be applied at one place for all for some styling options. And for custom components, this is where the problem lies, you'd have to extend it with your own variants, and if you want to do it globally you'd have to also think of a different approach. Would be really annoying. It's all perfect if no custom stuff is required or wanted shadcn mostly uses radix-ui primitives/components and just expands them with it's own variants, and the "theme" is the global variables used for that. When we talk about shadcn components having more than radix-ui, is a uneducated statement. Shadcn components that radix doesn't have primitives for are UI components, an Input is just a basic input with variants. With radix themes, adding a normal input won't work, so they added a TextLabel theme component just for that. It has no extra logic and stuff like that. When you look at radix primitives, every component has custom logic inside it.
@SanderCokart
@SanderCokart Год назад
I am trying to create a storybook for the shadcn components by my god is it annoying that types come from the primitive and are not exported as an interface. This means I have to manually set all the argTypes for control and table or take over all props myself and wrap the primitive and hope it all works out.
@davidjesusorozcogarcia9758
@davidjesusorozcogarcia9758 Год назад
Have you tried to do some kind of reflection? I think it's possible so it will be kinda like a script that infers the type and generate the control
@SanderCokart
@SanderCokart Год назад
@@davidjesusorozcogarcia9758 example of a reflection?
@officiallydheeraj
@officiallydheeraj Год назад
Just because you didn't hear or see on Twitter. Doesn't mean it wasn't posted on it.
@joshtriedcoding
@joshtriedcoding Год назад
it's pretty recent judging by the npm history
@justsample9185
@justsample9185 Год назад
indeed, e.g. Bytes newsletter posted about it on 10.08.
@ghostlexly
@ghostlexly Год назад
What’s the difference with material ui ?? It’s looks same
@shayantriedcoding
@shayantriedcoding 11 месяцев назад
How can we use radix ui in Laravel PHP?
@mathuraditya7
@mathuraditya7 11 месяцев назад
Radix Themes === Chakra UI
@T25de
@T25de Год назад
Been hearing a lot About this
@seyadeodin
@seyadeodin 11 месяцев назад
A different flavor of shadcn. What is so exciting about it?
@joshtriedcoding
@joshtriedcoding 11 месяцев назад
you just answered your own question, it's a nice addition to a ui library many people really, really like
@yousafwazir3167
@yousafwazir3167 Год назад
Try angular and react by building two semi big apps then do a vs video
@joshtriedcoding
@joshtriedcoding Год назад
helllll nah angular???
@zzzyyyxxx
@zzzyyyxxx Год назад
@@joshtriedcoding New Angular has signals, check it out. I don't use Angular either but might be interesting to see. Maybe compare with Solid and Svelte too
@eshw23
@eshw23 Год назад
L, big L
@paragateoslo
@paragateoslo Год назад
@@joshtriedcoding Angular has had unstyled components with Angular CDK for years
@yousafwazir3167
@yousafwazir3167 11 месяцев назад
@@joshtriedcoding have you ever built anything with it ? Maybe you should try it before judging 🤔
@anuragdhote8902
@anuragdhote8902 11 месяцев назад
shift + alt + alt
@paragateoslo
@paragateoslo Год назад
Isnt Radix being unstyled the whole point of radix?
@Dom-zy1qy
@Dom-zy1qy Год назад
Well yea this isn't a replacement for radix.
@paragateoslo
@paragateoslo Год назад
@@Dom-zy1qy Sure, but I mean. What is the point of using it? What problem is it trying to solve?
@brangtoggez6363
@brangtoggez6363 Год назад
​@@paragateosloyou can use tailwindcss on shadcn, not with radix. Radix doesn't support tailwindcss, if you use tailwindcss on radix, you need to mark it as update, which is bad practises. Shadcn gives you the power of 2 worlds.
@paragateoslo
@paragateoslo 11 месяцев назад
​@@brangtoggez6363Hmm im not quite sure what you mean. Radix supports any styling method. ShadCn is styling Radix with tailwind. What do you mean with mark it as an update? Still that was not my question. The whole point of radix is that you get logic without styling, so that you have full styling control unlike MUI, Chakra or React bootstrap. If you have a fully finished styled Radix youre no better off than just using MUI.
@brangtoggez6363
@brangtoggez6363 11 месяцев назад
@@paragateoslo Sorry, I was weird at that moment, I mean the important keyword for it to work in radix UI. ShadCN uses tailwind to make it look beautiful, that means we can use tailwindcss with ease without the important keywords. that point only does make a huge differences, if you use radix UI, it will be hard to use tailwindcss ( nearly impossible ), I tried it once, I have to use the ! thing to force radix UI to follow my styles, which is bad here. Shadcn is way easier to use as well. I think shadcn is better since it inherited everything from radix ui and tailwindcss.
@oscardasilva971
@oscardasilva971 Год назад
Honestly I didn't like it. Because It doesn't use Tailwind. Also it has no support for forms yet. I will just keep using Shadcn
@owl3379
@owl3379 Год назад
Shadcn built on top of tailwind?
@oscardasilva971
@oscardasilva971 Год назад
@@owl3379 yes it is
@smileyface6837
@smileyface6837 Год назад
​@@owl3379They're talking about radix/themes
@erkikadhafi9155
@erkikadhafi9155 Год назад
​@@owl3379 yes, it used Radix for the based and Tailwind to style it
@owl3379
@owl3379 Год назад
@@erkikadhafi9155 yes ofc thats why his answer makes no sense? I‘ll keep usibg shadcn but i dont use tailwind? 😁
@JEsterCW
@JEsterCW 11 месяцев назад
watcha talking about Josh... lol they announanced it a long time ago on twitter, lel they explained incredibly deeply the whole thing, youre kinda misinformated
@aristide_F
@aristide_F Год назад
Using both shadcn and their theme in one project can be an issue hein. I like and I’m always excited about new stuffs but then I ’m still gonna stick to Shadcn. Plus he has more components
@smileyface6837
@smileyface6837 Год назад
"Plus he has more components" You realise shadcn is built on top of radix right?
@aristide_F
@aristide_F Год назад
@@smileyface6837 yeah of course I do.
@aristide_F
@aristide_F Год назад
@@smileyface6837 however, Shadcn went further and more components available out of the box.
@unrelentingpest
@unrelentingpest Год назад
@@smileyface6837 Yes, but not everything uses Radix, eg. forms (and probably other ones too)
@hyperprotagonist
@hyperprotagonist Год назад
Can’t stand my devs using this. They learn nothing other than how to copy and paste. 😂
@ajibadesokunbi1318
@ajibadesokunbi1318 Год назад
shadcn still better
@Mujahedeen_
@Mujahedeen_ 11 месяцев назад
Shadcn is far better than this
@AkashLayal
@AkashLayal Год назад
First
@LC12345
@LC12345 Год назад
Second
@caresbruh
@caresbruh 11 месяцев назад
sorry but that library is mid tbh feels plain and boring
@MagicTheKrakening
@MagicTheKrakening Год назад
just write your own components and style them based on your job. Stop using these pre-made UIs and frameworks
@ReViv4L
@ReViv4L Год назад
You meant ui libraries for sure. Plus, react even is a library. I think it's even better to start by writing your own meta framework instead of the crazy client/server next js stuff. The name is Giovanni. PS: These libraries are called headless (@headlessui / @radixui / @react area / many more) as in they mainly ship behavior. They provide default styling but they are meant to be re-styled so that the look & feel conforms to the design language of the final product still not wasting time re-writing each component's behavior.
@rortan
@rortan Год назад
You are definitely missing out on a lot of accessibility features
@MagicTheKrakening
@MagicTheKrakening Год назад
obviously they are headless, the main thing I'm getting at is to stop using these pre-built libraries when you should simply just write your own. Have worked with a plethora of front-end devs who can't simply write vanilla javascript because they are stuck in react and copying and pasting everything into their projects.
@MagicTheKrakening
@MagicTheKrakening Год назад
@@rortan What accessibility features would that be? Like the electron app I'm working on where everything can be controlled via keyboard commands? Semantic HTML? Events? What are we missing out on?
@rortan
@rortan Год назад
@@MagicTheKrakening I'm not saying you shouldn't do whatever you want, but these components have been tried and tested for *years* now to comply with WCAG standards by *hundreds* of developers that have thought about every possibility and maximized Dev Exp. Saying you can do a complex component that isn't a button yourself, and do it better is simply a fallacy and you're definitely on the peak of the curve on the Dunning Kruger effect. And I'm not only talking about RadixUI here.
Далее
Don't Use Polly in .NET Directly. Use this instead!
14:58
Let's Turn Beginner React Code Into Clean Code
16:35
Просмотров 78 тыс.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Просмотров 1,9 млн
We Need to Talk About Redis.
14:55
Просмотров 89 тыс.
UI Libraries Are Dying, Here's Why
13:28
Просмотров 299 тыс.
This CLI Changed How I Start Projects
10:34
Просмотров 22 тыс.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Просмотров 176 тыс.
Styling a Radix Dialog with Tailwind CSS
10:53
Просмотров 35 тыс.
This UI component library is mind-blowing
8:23
Просмотров 646 тыс.
No, Flexbox isn't "good enough"
9:18
Просмотров 34 тыс.
Everyone's Making Fun of Next.js 14.0
7:16
Просмотров 134 тыс.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Просмотров 1,9 млн