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. <a id= "Show_Notes_2"></a>Show Notes <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> <a id="Sick_Picks_61"></a>Sick Picks <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> <a id="Shameless_Plugs_66"></a>Shameless Plugs <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> <a id="Hit_us_up_on_Socials_70"></a>Hit us up on Socials! 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>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

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

Syntax - Tasty Web Development Treats