What are Headless Components?

In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them.

Show Notes

00:07 Welcome
02:33 Tailwind Connect
Tailwind Connect 2023 | Tailwind CSS Live Event
04:37 Headless component overview
Downshift
Headless UI
06:57 A country dropdown component
12:52 Possibly like Svelte actions?
18:46 What do headless components provide?
19:13 Examples of headless component projects
Microsoft Edge Demo
24:24 How does this compare to web components?
Tanstack Table
Tanstack Virtual
26:29 Checking out Shoelace
Shoelace
28:42 Figma announcements
What's New in Figma
31:21 What does headless mean?
36:24 SIIIIICK ××× PIIIICKS ×××
41:20 AI Voices

××× SIIIIICK ××× PIIIICKS ×××

Scott: Hacker News Recap / Hacker News Recap on Apple Podcasts
Wes: Calipers

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Tutorials

Tweet us your tasty treats

Scott's Instagram
LevelUpTutorials Instagram
Wes' Instagram
Wes' Twitter
Wes' Facebook
Scott's Twitter
Make sure to include @SyntaxFM in your tweets
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Playing: 636: What are Headless Components?

Tauri Vs Electron - Desktop Apps with Web Tech

Anxiety and Uncertainty with Dr. Courtney Tolinski

The Svelte + SvelteKit Show

Hacking the Tonal - Proxying, Intercepting + Debugging Traffic?

Supper Club × How To Get Your First Dev Job With Stuart Bloxham

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

CSS Nesting is Here!

Supper Club × What's New With Astro with Fred Schott

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

JavaScript Closures & Scope Explained

Supper Club × Shipping ESM with Mark Erikson

Anything but Coding - Landscaping, Fitness, and more!

OG Image Options

Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai

Rust for JS Devs — Part 2

8 Tricks When Using the Fetch() API

Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski

6 or so New Approved and Proposed JavaScript APIs

JS Fundamentals - Decorators

Supper Club × Flightcontrol with Brandon Bayer

Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits

Why is Facebook’s HTML + CSS Such a Mess?

Supper Club × Ryan Florence of Remix

Standard Server JavaScript - Deno, Workers, Bun and More

Rust for JavaScript Developers - Node vs Rust Concepts

Supper Club × Email Sending, Spam, DMARC, SPF, Styling, and more with Andris Reinman

Polyfills, Transpiling and Monkey Patching

User Feedback UI - Toasts, Flash, Validation

Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion

Potluck × CSS Variables in React × JS Notebooks × Selling a Domain

Help Me Help You - How To Ask For Help

Supper Club × val.town with Steve Krouse

Stump’d × JavaScript × GraphQL × Memory Safety × Web History

Roundup - Sick AI Tools For Developers

Supper Club × Cloudinary with Colby Fayock

What are Headless Components?

Lightning CSS

Supper Club × Messaging Queues and Workers with Armin Ronacher

WTF is an ORM

Where to Register a Domain

Supper Club × Why Netlify bought Gatsby, GraphQL Data Layer, and Headless CMS with Dustin Schau

Potluck × Warp × Skeleton UI × Edge Functions × Donut Scoping

AsyncLocalStorage + AsyncContext API

Supper Club × JavaScript on Hardware, Micro Controllers, ESP32 with Nick Hehr

Electronics for Beginners

GitHub Projects, Milestones, Labels, and Actions

Supper Club × OpenAI, Future of programming, LLMs, and Math with Andrey Mishchenko

Is JSDoc Better than TypeScript?

Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

Supper Club × Matt Rothenberg and Idan Gazit on Github Next

The New Syntax Site × Ingest, Stack, AI and more

JavaScript.exe - Standalone Executables

Supper Club × Bramus Van Damme on CSS

Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

Why Is node_modules So Big?

Supper Club × Adam Argyle on What's New in CSS

Where Should You Host Your App? Hosting Providers Compared

WTF Are Signals And Why Is Everyone So Hot On Them All Of The Sudden?

Supper Club × Dylan Jhaveri - Video for the Web and MUX

UI Elements - Basics, Best Practice, and Built Ins

Bluesky + AT Protocol

Supper Club × Zach Lloyd from Warp

The Syntax Giveaway Site - Codes, Bots, Tech Stack and More!

RPC in JavaScript!

Supper Club × Privacy, Cookie Banners, GDPR with Donata and Hans Skillrud

Potluck × Crypto × SEO × Status Pages × Learning Tools

CSS Color Functions

Supper Club × ESLint with Nicholas Zakas

Can Vanilla CSS Replace Sass Yet?

Modals, Popups, Popovers, Lightboxes

Supper Club × Nate Weinert and Tamagui

600th Episode! Major Announcement and Swag Giveaway!

oAuth APIs Explained

Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields

Stump’d Gameshow! Answering Coding Interview Questions from AI

The New Import Map Standard

Supper Club × Web Components and Lit with Justin Fagnani of Google

Potluck × Testing Animations × Tools for Learning × Coding Related Injuries

Coding with the Open AI / Chat GPT API