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 ">00:00 Welcome to Syntax!
• 02:39 ">02:39 We’re on YouTube.
• 03:14 ">03:14 The four categories of UI libraries or frameworks.
• 03:46 ">03:46 What does a UI component need to do?
  • 04:14 ">04:14 Must be functional.
  • 06:20 ">06:20 They must fit styling.
  • 06:33 ">06:33 They must be accessible.
  • 08:09 ">08:09 “Internationalizationable.”
  • 09:29 ">09:29 They must handle theming and variants.
• 10:05 ">10:05 A few common UI components.
  • 10:14 ">10:14 Date Pickers.
  • 12:10 ">12:10 Dropdowns.
  • 13:21 ">13:21 Toast message.
  • Svelte French Toast
  • 15:11 ">15:11 Some honorable mentions.
• 16:10 ">16:10 Headless components.
  • 18:54 ">18:54 React Aria.
  • Behavior, Accessibility, Internationalization
  • 19:34 ">19:34 Radix UI Primitives.
  • 20:16 ">20:16 Downshift JS.
  • 21:29 ">21:29 Tanstack Table and Forms.
• 26:00 ">26:00 Unstyled components.
  • 28:04 ">28:04 Shoelace.
  • 32:47 ">32:47 React Aria Components.
  • 33:00 ">33:00 Headless UI.
  • 33:04 ">33:04 Radix UI.
  • 37:12 ">37:12 Base UI.
• 38:23 ">38:23 What’s up with Google’s design?
• 40:22 ">40:22 Styled Starters.
  • React Aria Components Starter
  • ShadCN
  • Tailwind Catalyst
  • MeltUI
• 47:50 ">47:50 What is the process for overriding with custom elements.
• 51:10 ">51:10 UI Kits and Design Systems.
• 53:06 ">53:06 Some things to consider.
• JS Nation
• 55:41 ">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 ">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 <a href= "https: