Tabs
A set of layered sections of content, known as tab panels.
Make changes to your account here. Click save when you're done.
Change your password here. After saving, you'll be logged out.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/tabs.tsx — driven by the island (data-ui="tab-trigger"/"tab-content")
export function Tabs(o) {
const tl = o.tabs.map((t, i) => \`<button data-ui="tab-trigger" data-tab="\${t.value}" data-state="\${i ? "inactive" : "active"}"
class="inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium \${i ? "text-muted-foreground" : "bg-background text-foreground shadow"}">\${t.label}</button>\`).join("");
const tp = o.tabs.map((t, i) => \`<div data-ui="tab-content" data-tab="\${t.value}" \${i ? "hidden" : ""} class="mt-2">\${t.content}</div>\`).join("");
return \`<div data-ui="tabs" class="\${o.class || ""}"><div role="tablist" class="inline-flex h-9 items-center rounded-lg bg-muted p-1 text-muted-foreground">\${tl}</div>\${tp}</div>\`;
}
Installation
$ bext ui add tabs
Copy and paste the following into src/components/ui/tabs.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/tabs.tsx — driven by the island (data-ui="tab-trigger"/"tab-content")
export function Tabs(o) {
const tl = o.tabs.map((t, i) => \`<button data-ui="tab-trigger" data-tab="\${t.value}" data-state="\${i ? "inactive" : "active"}"
class="inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium \${i ? "text-muted-foreground" : "bg-background text-foreground shadow"}">\${t.label}</button>\`).join("");
const tp = o.tabs.map((t, i) => \`<div data-ui="tab-content" data-tab="\${t.value}" \${i ? "hidden" : ""} class="mt-2">\${t.content}</div>\`).join("");
return \`<div data-ui="tabs" class="\${o.class || ""}"><div role="tablist" class="inline-flex h-9 items-center rounded-lg bg-muted p-1 text-muted-foreground">\${tl}</div>\${tp}</div>\`;
}
This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="tabs" hooks.
On This Page