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