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

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 3 April 2024

⏱️ 66 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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 YouTube. 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. Svelte French Toast 15:11 Some honorable mentions. 16:10 Headless components. 18:54 React Aria. Behavior, Accessibility, Internationalization 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. React Aria Components Starter ShadCN Tailwind Catalyst MeltUI 47:50 What is the process for overriding with custom elements. 51:10 UI Kits and Design Systems. 53:06 Some things to consider. JS Nation 55:41 A few more options to consider. Pigment CSS Base UI Shoelace BaseLayer JollyUI DraftUI Radix UI PenguinUI Tailwind CSS TailwindUI VerveUI DaisyUI ChakraUI Flowbite FloatingUI Downshift JS Mantine 59:02 Sick Picks & Shameless Plugs. Sick Picks Wes: Battery Daddy Scott: Lazy Susan, Rechargeable Batteries, Charger Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Transcript

Click on a timestamp to play from that location

0:00.0	Welcome to Syntax. Today we have a show on UI component libraries and
0:05.4	framework. So if you're building a website or you're building an application
0:09.0	and you want to use something that will help you either with the functionality or how it looks.
0:15.2	We're going to be talking all about the different UI components out there and breaking them down into
0:20.4	the different areas because it seems like there's a there's a million
0:23.8	different things you could do and they don't all overlap with each other so we're
0:27.9	going to attempt to explain it break it down and make some recommendations as
0:31.6	to what you should be using.
0:33.7	My name is Wes.
0:34.5	I'm a developer from Canada with me as always.
0:36.5	This is Scott Tolinsky.
0:37.6	How you doing today, Scott?
0:39.0	Hey, I'm doing good, man.
0:41.6	We had a massive snowstorm right, just we got like a foot and a half
0:45.3	of snow. Yeah. Yeah and like two days. Kids went sledding all day and a couple
0:50.6	days off school with a long weekend the week before spring break which is going to be another long time
0:56.2	and then today 60 and sunny everything's melting who knows Denver is weird man yeah. You know that snowstorm was so wild it
1:05.0	it brought down a coax cable into my yard. ripped it right out of the the side of
1:09.4	the house. That's crazy that luckily wasn't your internet, eh? Hey, no, yeah, we had fiber, and it's funny, I tried to get the cable company to remove the coax cable when they installed the fiber and they're like, you might want it. like no please I don't want it I don't I don't want this
1:24.8	extra cable coming to my house they're like yeah you never know you never know like someone
1:29.6	chops your fiber and they're gonna they're telling you it's gonna be a week before or
1:33.8	whatever you might want to have a backup internet in place because that would be a
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.