Podknife - 751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI by Syntax

Help
Help

Suggested Topics
- What is Podknife?
  
  Podknife is a curated podcast information and review site designed to be accessible in your browser from any device. We’re working to build the most useful podcast information source available by providing you with as much publicly available information about each podcast in our database as we can find and keeping it as up to date as possible.
- Can I listen to podcasts on Podknife?
  
  Yeah! There's a player at the bottom of the page.
- How can I get my podcast on Podknife?
  
  We’d love to hear about your podcast and consider it for addition. You can suggest your own by logging in and selecting the “Suggest a Podcast” link from the menu. Fill out the form and we’ll take it from there.
- How can I submit a review of a podcast?
  
  To submit a review of a podcast, go to the page of the podcast you want to review and click the "Submit Review" button below the image associated with the podcast. Clicking that button brings you to a new page where you can select a rating between 1 and 5 stars and write a brief review.
- How can I submit a review of a podcast episode?
  
  To submit a review of a podcast episode, go to the page of the podcast whose episode you want to review and find the specific episode you're looking for. Clicking on any episode reveals a "View Episode" button and clicking on that brings you to an episode-specific page where you can find more information displayed about the episode along with a "Submit Review" button. Clicking that brings you to a new page where you can select a rating between 1 and 5 stars and write a brief review of the episode.
- Is there a Podknife app?
  
  Not yet - we're keeping it in the browser at least for now. No app download required to access anything on the site.
- How can I change my display name?
  
  To change your display name, log in to Podknife and select "Account Settings" in the dropdown menu. From the Account Settings page, enter your desired new display name and press the "Save" button to confirm the change.
- How can I change my password?
  
  To change your password, log in to Podknife and select "Account Settings" in the dropdown menu. From the Account Settings page, enter your desired new password in the two fields below "Update Password" and press the "Save" button to confirm the change.
- How can I keep track of all my reviews?
  
  Within the menu, click on "My Profile", you will then be able to check all your reviews for both podcast & episode. You can also check all your favorite podcasts.
- How can I keep track of all my favorited podcasts?
  
  You can find podcasts you’ve favorited displayed on the My Profile page associated with your account (https://podknife.com/profile).
  You can share your My Profile page displaying your favorite podcasts as well as any reviews you’ve written publicly with a link in the form https://podknife.com/users/[displayname] where [displayname] is replaced by your Display Name.
- How can I favorite a podcast?
  
  On each podcast page you’ll find the outline of a star above the podcast title. Clicking this star fills it in and designates the podcast as a favorite (for logged in users) or invites the user to log in or register for an account (for users who are not logged in). You can find favorited podcasts displayed on the My Profile page associated with your account (https://podknife.com/profile).
- How can I register for a Podknife account?
  
  To register, click on the “Register” button in the top right of your browser window (or visit https://podknife.com/users/sign_up). Enter a Display Name to be associated with your account on the site (alongside any reviews you contribute, for example), an Email address to associate with the account and your password (twice for confirmation). Press the “Confirm” button and you should be all set, logged in and ready to review and favorite podcasts as you wish.
- How can I get in touch?
  
  We’d love to hear from you. You can reach us using the Feedback form (https://podknife.com/feedbacks/new) which can be found either in the footer on each page (for users who are not logged in) or in the dropdown menu (for logged in users).
  
  You can also reach us on Twitter by tweeting us @podknife (https://twitter.com/podknife) or on Facebook by messaging us from our page (https://www.facebook.com/podknife/).
- Log In
- Register
- Feedback
- Help
- Privacy Policy
- Terms of Use
© Podknife 2024

This episode currently has no reviews.

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

Podcast |: Syntax - Tasty Web Development Treats
Publisher |: Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
Media Type |: audio
Podknife tags |: Business,; Careers,; Tech News,; Technology,; Web Development
Categories Via RSS |: News,; Tech News,; Technology
Publication Date |: Apr 03, 2024
Episode Duration |: 01:06:02

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.
- french-toast.com/">Svelte French Toast
- 15:11 Some honorable mentions.
16:10 Headless components.
- 18:54 spectrum.adobe.com/react-aria/">React Aria.
- spectrum.adobe.com/react-aria/interactions.html">Behavior, spectrum.adobe.com/react-aria/accessibility.html">Accessibility, spectrum.adobe.com/react-aria/internationalization.html"> Internationalization
- 19:34 ui.com/primitives">Radix UI Primitives.
- 20:16 Downshift JS.
- 21:29 Tanstack Table and Forms.
26:00 Unstyled components.
- 28:04 Shoelace.
- 32:47 spectrum.adobe.com/react-aria/components.html">React Aria Components.
- 33:00 Headless UI.
- 33:04 ui.com/">Radix UI.
- 37:12 Base UI.
38:23 What’s up with Google’s design?
40:22 Styled Starters.
- spectrum.adobe.com/react-aria/getting-started.html#starter-kits"> React Aria Components Starter
- ShadCN
- Tailwind Catalyst
- ui.com/">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
- ui.com/">DraftUI
- ui.com/">Radix UI
- PenguinUI
- Tailwind CSS
- TailwindUI
- VerveUI
- DaisyUI
- ui.com/">ChakraUI
- Flowbite
- ui.com/">FloatingUI
- Downshift JS
- Mantine
59:02 Sick Picks & Shameless Plugs.

This episode currently has no reviews.

Submit Review

This episode could use a review!

This episode could use a review! Have anything to say about it? Share your thoughts using the button below.

Submit Review

Show Notes

Sick Picks

Shameless Plugs

Hit us up on Socials!