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

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