Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create 751 - UI Components.md #1637

Merged
merged 2 commits into from
Apr 2, 2024
Merged

Create 751 - UI Components.md #1637

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
167d358
Create 751 - UI Components.md
randyrektor Apr 2, 2024
17275c1
Title update 751 - UI Components.md
randyrektor Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
87 changes: 87 additions & 0 deletions shows/751 - UI Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
number: 751
title: "UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI"
date: 1712142000253
url: https://traffic.libsyn.com/syntax/Syntax_-_751.mp3
youtube_url: https://www.youtube.com/watch?v=9-6deom3ZdY
---

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](#t=00:00)** Welcome to Syntax!
* **[02:39](#t=02:39)** We're on YouTube.
* **[03:14](#t=03:14)** The four categories of UI libraries or frameworks.
* **[03:46](#t=03:46)** What does a UI component need to do?
* **[04:14](#t=04:14)** Must be functional.
* **[06:20](#t=06:20)** They must fit styling.
* **[06:33](#t=06:33)** They must be accessible.
* **[08:09](#t=08:09)** "Internationalizationable."
* **[09:29](#t=09:29)** They must handle theming and variants.
* **[10:05](#t=10:05)** A few common UI components.
* **[10:14](#t=10:14)** Date Pickers.
* **[12:10](#t=12:10)** Dropdowns.
* **[13:21](#t=13:21)** Toast message.
* [Svelte French Toast](https://svelte-french-toast.com/)
* **[15:11](#t=15:11)** Some honorable mentions.
* **[16:10](#t=16:10)** Headless components.
* **[18:54](#t=18:54)** [React Aria](https://react-spectrum.adobe.com/react-aria/).
* [Behavior](https://react-spectrum.adobe.com/react-aria/interactions.html), [Accessibility](https://react-spectrum.adobe.com/react-aria/accessibility.html), [Internationalization](https://react-spectrum.adobe.com/react-aria/internationalization.html)
* **[19:34](#t=19:34)** [Radix UI Primitives](https://www.radix-ui.com/primitives).
* **[20:16](#t=20:16)** [Downshift JS](https://github.com/downshift-js/downshift).
* **[21:29](#t=21:29)** [Tanstack Table and Forms](https://tanstack.com/table/latest).
* **[26:00](#t=26:00)** Unstyled components.
* **[28:04](#t=28:04)** [Shoelace](https://shoelace.style/).
* **[32:47](#t=32:47)** [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html).
* **[33:00](#t=33:00)** [Headless UI](https://headlessui.com/).
* **[33:04](#t=33:04)** [Radix UI](https://www.radix-ui.com/).
* **[37:12](#t=37:12)** [Base UI](https://mui.com/base-ui/getting-started/).
* **[38:23](#t=38:23)** What's up with Google's design?
* **[40:22](#t=40:22)** Styled Starters.
* [React Aria Components Starter](https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits)
* [ShadCN](https://ui.shadcn.com/)
* [Tailwind Catalyst](https://tailwindcss.com/blog/introducing-catalyst)
* [MeltUI](https://melt-ui.com/)
* **[47:50](#t=47:50)** What is the process for overriding with custom elements.
* **[51:10](#t=51:10)** UI Kits and Design Systems.
* **[53:06](#t=53:06)** Some things to consider.
* [JS Nation](https://jsnation.com/)
* **[55:41](#t=55:41)** A few more options to consider.
* [Pigment CSS](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react)
* [Base UI](https://mui.com/base-ui/getting-started/)
* [Shoelace](https://shoelace.style/)
* [BaseLayer](https://www.baselayer.dev/)
* [JollyUI](https://www.jollyui.dev/)
* [DraftUI](https://draft-ui.com/)
* [Radix UI](https://www.radix-ui.com/)
* [PenguinUI](https://www.penguinui.com/)
* [Tailwind CSS](https://tailwindcss.com/blog/introducing-catalyst)
* [TailwindUI](https://tailwindui.com/)
* [VerveUI](https://verveui.pro/)
* [DaisyUI](https://daisyui.com/)
* [ChakraUI](https://chakra-ui.com/)
* [Flowbite](https://flowbite.com/)
* [FloatingUI](https://floating-ui.com/)
* [Downshift JS](https://github.com/downshift-js/downshift)
* [Mantine](https://mantine.dev/)
* **[59:02](#t=59:02)** Sick Picks & Shameless Plugs.

### Sick Picks

- Wes: [Battery Daddy](https://www.costco.ca/ontel-battery-daddy-180-battery-organizer-and-storage-case-with-tester.product.4000032542.html)
- Scott: [Lazy Susan](https://amzn.to/49XFo3n), [Rechargeable Batteries](https://amzn.to/4akUWxW), [Charger](https://amzn.to/3vgX6zI)

### Shameless Plugs

- Scott: [Syntax on YouTube](www.youtube.com/@syntaxfm)

### Hit us up on Socials!

Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)

Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)

Scott:[X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)

Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)