Islands

Interactive bext/ui components are rendered as static HTML on the server, then made interactive by a single shared island — a small vanilla-JS file loaded once per page.

What is an island?

An island is a plain .js file under public/islands/. It runs in the browser, attaches delegated event listeners, and never re-renders the page. Because it's shared, adding ten interactive components doesn't add ten scripts.

data-ui hooks

Components expose behaviour through data-ui attributes. The island routes events by that attribute:

1
2
3
4
5
6
7// the island reacts to these hooks, among others:
data-ui="tab-trigger"      // tabs
data-ui="accordion-trigger" // accordion
data-ui="switch"           // switch / checkbox / radio
data-ui="select-trigger"    // select
data-ui="open" data-target  // dialog / sheet / popover / dropdown
data-ui="copy"             // copy-to-clipboard buttons