UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Рет қаралды 6,143

Күн бұрын

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.
Show Notes
00:00 Welcome to Syntax!
02:39 We're on KZfaq.
03:14 The four categories of UI libraries or frameworks.
03:46 What does a UI component need to do?
04:14 Must be functional.
06:20 They must fit styling.
06:33 They must be accessible.
08:09 "Internationalizationable."
09:29 They must handle theming and variants.
10:05 A few common UI components.
10:14 Date Pickers.
12:10 Dropdowns.
13:21 Toast message.
15:11 Some honorable mentions.
16:10 Headless components.
18:54 React Aria.
19:34 Radix UI Primitives.
20:16 Downshift JS.
21:29 Tanstack Table and Forms.
26:00 Unstyled components.
28:04 Shoelace.
32:47 React Aria Components.
33:00 Headless UI.
33:04 Radix UI.
37:12 Base UI.
38:23 What's up with Google's design?
40:22 Styled Starters.
47:50 What is the process for overriding with custom elements.
51:10 UI Kits and Design Systems.
53:06 Some things to consider.
55:41 A few more options to consider.
59:02 Sick Picks & Shameless Plugs.
All links available at syntax.fm/751
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript

Пікірлер: 26

@MyBaBB 21 күн бұрын

“Thank you very much for sharing your insights. Over the past year and a half, I’ve been diligently coding and creating my own components from scratch. This methodical approach has helped me gain a solid understanding of the underlying principles. Now, I feel confident discussing the topics you’ve covered, and it’s incredibly satisfying. The instructional video you provided played a crucial role in advancing my expertise. I’m truly grateful for this valuable learning resource, and I’m excited to explore more complex subjects. Once again, thank you for helping me progress on my learning journey.” 😊

2 ай бұрын

Thanks for the mention to VerveUI guys ✨

@studiousllama4776 2 ай бұрын

Are we sure that's actually Scott? I barely recognize him without a hat. Also big fan of Radix for headless components

@Ahheck01 2 ай бұрын

Oh is it a hat that's different? I thought "wow, Scott looking super sharp" but couldn't place the change. In any case, very positive initial impression over past videos FWIW!

@zisra 2 ай бұрын

Wonderful! Thanks for this podcast from Singapore

@noccer 2 ай бұрын

This is cool, I've listened for years but never saw video. You've done it very well with the camera angles. Do you also have a forward facing camera so it feels like you're looking directly at each other, it sure looks that way. Cheers ☘️

@patricknelson 2 ай бұрын

28:07 - Why I love web components and custom elements so much. They essentially work everywhere. You really don’t even need to build things in web components per se, but maybe wrap in a WC (like I do with svelte-retag) to get the full power of both worlds, i.e.: Your favorite framework (Svelte in my case) and pluggable as little islands anywhere that WC’s are used, which these days with browser standards, is basically anywhere. It’s a great for very basic components, but also awesome as a “portal” to bridge the gap between all sorts of technologies. ♥️

@stefansdev 2 ай бұрын

There is shadcn svelte version too, done by the same dev behind meltUI.

@abdellahcodes 2 ай бұрын

he's not the same, but they work together Svelte slots make very confusing though. Svelte 5 should improve that a lot

@sueaustin6261 2 ай бұрын

i could use a whole episode just on Scott's fridge system

@syntaxfm 2 ай бұрын

🫡 I’ll snap some photos

@patricknelson 2 ай бұрын

Accessibility is such a huge part of it though, too (even with those easy toast pop-ups). Blind users need a way to know that the message just came up and to easily dismiss it!

@rrd_webmania 2 ай бұрын

Datalist is the HTML standard for select with filtering

@abdellahcodes 2 ай бұрын

Just in time as I'm building the redesign of Sentry docs 😅

@MatthewKennedyUK 2 ай бұрын

It’s not that frightening folks, it’s just some html and css.

@brokeloser 2 ай бұрын

Damnnnnnn no hat Scott. So glad he decided to join the receding hairline gang.

@syntaxfm 2 ай бұрын

I’ve always had a big forehead but age certainly isn’t helping here - Scott

@MatthewKennedyUK 2 ай бұрын

This is what happens when you spend too much time in react, you become afraid of the basics.

@syntaxfm 2 ай бұрын

We talked quite a bit about standards based solutions in this episode too, ie Web Component based systems

@patricknelson 2 ай бұрын

@@syntaxfm at eBay I’m known as “the web component” guy, I keep bringing it up. We’re big on Marko, React and Svelte but I’m out there pushing web components since my particular site is very PHP heavy 😅. I’m glad you guys touched so much on WC’s and custom elements for sure, since it allows for so much more reuse (at least at the library level, particularly UI libraries) across whatever framework you happen to be using… if any!

@patricknelson 2 ай бұрын

@@syntaxfm … especially with Enhance WASM coming out, looking to optimize SSR of _web components_ using web assembly, which would make it far easier to do it in PHP, Ruby, Java, etc. Exciting times.