Keyboard Accessible Tabs

Component

About

A tab list for switching between related panels of content, with full arrow-key/Home/End keyboard navigation and a pill or underline visual style.

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

Code

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

Usage.tsx

"use client";

import { Tabs, type TabItem } from "@/components/ui/tabs";
import { useState } from "react";

type Filter = "all" | "incoming" | "outgoing" | "flagged";

function CountBadge({ count }: { count: number }) {
  return (
    <span className="ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-ink/10 px-1 text-[11px] font-bold text-accent-ink">
      {count}
    </span>
  );
}

const items: TabItem<Filter>[] = [
  {
    value: "all",
    label: "All",
    badge: <CountBadge count={27} />,
    content: (
      <p className="text-sm text-ink-soft">
        Every transaction on this account.
      </p>
    ),
  },
  {
    value: "incoming",
    label: "Incoming",
    content: (
      <p className="text-sm text-ink-soft">Deposits and transfers in.</p>
    ),
  },
  {
    value: "outgoing",
    label: "Outgoing",
    content: (
      <p className="text-sm text-ink-soft">Payments and transfers out.</p>
    ),
  },
  {
    value: "flagged",
    label: "Flagged",
    content: (
      <p className="text-sm text-ink-soft">Transactions that need review.</p>
    ),
  },
];

export default function TabsDemo() {
  const [value, setValue] = useState<Filter>("all");

  return (
    <div className="flex w-full max-w-sm flex-col gap-3 bg-canvas p-6 text-ink">
      <Tabs
        items={items}
        value={value}
        onValueChange={setValue}
        label="Transactions"
        variant="pill"
      />
    </div>
  );
}