Tabs

Navigation

About

An accessible horizontal or vertical tab list with roving keyboard focus (arrow keys, Home/End) for switching between panels of content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs to your project and fits it to your theme.

Code

How Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}