Tabs
Three tabs. The content of each one comes from the server when you click it. Alpine remembers which tab is active.
Astro renders HTML on the server. Pages are files, components are files, and an API route that returns a fragment is just another .astro file with `export const partial = true`. It runs on Node, Cloudflare, Netlify, Vercel, Deno.
What to look at
Each tab button carries both libraries. hx-get fetches the panel from /api/tabs/astro and swaps it into #panel. @click sets tab in Alpine, which drives the active class and aria-selected.
They don't talk to each other. Alpine does not know a request happened. htmx does not know which tab is active. Each does its one job.
hx-indicator="#panel" puts the htmx-request class on the panel while loading. The CSS fades it a little. The 200ms delay on the server is there so you can see it.
The first panel is rendered on the server with the page, using the same TabPanel component the API returns.