An accessible horizontal or vertical tab list with roving keyboard focus (arrow keys, Home/End) for switching between panels of content.
"use client";
import Tabs from "@/components/ui/tabs";
import { useState } from "react";
export default function TabsVerticalDemo() {
const [selected, setSelected] = useState<
"overview" | "activity" | "settings"
>("overview");
return (
<div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
<div className="flex w-full max-w-sm gap-6">
<Tabs
ariaLabel="Section"
orientation="vertical"
value={selected}
onChange={setSelected}
className="w-40"
items={[
{
value: "overview",
label: "Overview",
icon: "lucide:layout-dashboard",
id: "demo-vtab-overview",
panelId: "demo-vpanel-overview",
},
{
value: "activity",
label: "Activity",
icon: "lucide:activity",
id: "demo-vtab-activity",
panelId: "demo-vpanel-activity",
},
{
value: "settings",
label: "Settings",
icon: "lucide:settings",
id: "demo-vtab-settings",
panelId: "demo-vpanel-settings",
},
]}
/>
<div
role="tabpanel"
id={`demo-vpanel-${selected}`}
aria-labelledby={`demo-vtab-${selected}`}
tabIndex={0}
className="flex-1 text-sm text-foreground"
>
{selected === "overview" && "Overview content goes here."}
{selected === "activity" && "Recent activity goes here."}
{selected === "settings" && "Settings panel goes here."}
</div>
</div>
</div>
);
}
