Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

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

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

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. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:39">02:39</a> We’re on YouTube.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:14">03:14</a> The four categories of UI libraries or frameworks.</li> <li class="has-line-data" data-line-start="7" data-line-end="13"> <a href="#t=03:46">03:46</a> What does a UI component need to do? <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=04:14">04:14</a> Must be functional.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=06:20">06:20</a> They must fit styling.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=06:33">06:33</a> They must be accessible.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=08:09">08:09</a> “Internationalizationable.”</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=09:29">09:29</a> They must handle theming and variants.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="19"> <a href="#t=10:05">10:05</a> A few common UI components. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=10:14">10:14</a> Date Pickers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=12:10">12:10</a> Dropdowns.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=13:21">13:21</a> Toast message.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://svelte-french-toast.com/">Svelte French Toast</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=15:11">15:11</a> Some honorable mentions.</li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="25"> <a href="#t=16:10">16:10</a> Headless components. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=18:54">18:54</a> <a href= "https://react-spectrum.adobe.com/react-aria/">React Aria</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://react-spectrum.adobe.com/react-aria/interactions.html">Behavior</a>, <a href= "https://react-spectrum.adobe.com/react-aria/accessibility.html">Accessibility</a>, <a href= "https://react-spectrum.adobe.com/react-aria/internationalization.html"> Internationalization</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=19:34">19:34</a> <a href= "https://www.radix-ui.com/primitives">Radix UI Primitives</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=20:16">20:16</a> <a href= "https://github.com/downshift-js/downshift">Downshift JS</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=21:29">21:29</a> <a href= "https://tanstack.com/table/latest">Tanstack Table and Forms</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="31"> <a href="#t=26:00">26:00</a> Unstyled components. <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=28:04">28:04</a> <a href= "https://shoelace.style/">Shoelace</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=32:47">32:47</a> <a href= "https://react-spectrum.adobe.com/react-aria/components.html">React Aria Components</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=33:00">33:00</a> <a href= "https://headlessui.com/">Headless UI</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=33:04">33:04</a> <a href= "https://www.radix-ui.com/">Radix UI</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=37:12">37:12</a> <a href= "https://mui.com/base-ui/getting-started/">Base UI</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=38:23">38:23</a> What’s up with Google’s design?</li> <li class="has-line-data" data-line-start="32" data-line-end="37"> <a href="#t=40:22">40:22</a> Styled Starters. <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits"> React Aria Components Starter</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://ui.shadcn.com/">ShadCN</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind Catalyst</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://melt-ui.com/">MeltUI</a></li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=47:50">47:50</a> What is the process for overriding with custom elements.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=51:10">51:10</a> UI Kits and Design Systems.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=53:06">53:06</a> Some things to consider.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://jsnation.com/">JS Nation</a></li> <li class="has-line-data" data-line-start="41" data-line-end="59"> <a href="#t=55:41">55:41</a> A few more options to consider. <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react"> Pigment CSS</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://mui.com/base-ui/getting-started/">Base UI</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://shoelace.style/">Shoelace</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.baselayer.dev/">BaseLayer</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.jollyui.dev/">JollyUI</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://draft-ui.com/">DraftUI</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.radix-ui.com/">Radix UI</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.penguinui.com/">PenguinUI</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind CSS</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://tailwindui.com/">TailwindUI</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://verveui.pro/">VerveUI</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://daisyui.com/">DaisyUI</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://chakra-ui.com/">ChakraUI</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://flowbite.com/">Flowbite</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://floating-ui.com/">FloatingUI</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://github.com/downshift-js/downshift">Downshift JS</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://mantine.dev/">Mantine</a></li> </ul> </li> <li class="has-line-data" data-line-start="59" data-line-end="61"> <a href="#t=59:02">59:02</a> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="61" data-line-end="62"> <a id="Sick_Picks_61"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Wes: <a href= "https://www.costco.ca/ontel-battery-daddy-180-battery-organizer-and-storage-case-with-tester.product.4000032542.html"> Battery Daddy</a></li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Scott: <a href="https://amzn.to/49XFo3n">Lazy Susan</a>, <a href= "https://amzn.to/4akUWxW">Rechargeable Batteries</a>, <a href= "https://amzn.to/3vgX6zI">Charger</a></li> </ul> <h3 class="code-line" data-line-start="66" data-line-end="67"> <a id="Shameless_Plugs_66"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="68" data-line-end="70"> Scott: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="70" data-line-end="71"> <a id="Hit_us_up_on_Socials_70"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

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

Aplikace Youradio Talk

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

Poslechněte si podcast