Skip to component
GGamma

Tabs

A keyboard-aware way to switch between related panels.

Stable

Overview

The essentials, collected in one place.

Live previewUse keyboard to interact

Implementation

1"use client";2import { useState } from "react";3 4const sections = [5  {6    id: "overview",7    title: "Overview",8    copy: "The essentials, collected in one place.",9  },10  {11    id: "activity",12    title: "Activity",13    copy: "Recent changes appear here as your library grows.",14  },15  {16    id: "settings",17    title: "Settings",18    copy: "Tune the details to match your product.",19  },20] as const;21 22export function GammaTabs() {23  const [active, setActive] = useState<string>("overview");24  return (25    <div className="sample-tabs">26      <div role="tablist" aria-label="Example sections">27        {sections.map((section) => (28          <button