Tabs

Switch between related panels.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@aspyn-io/kit";

Basic

Your workspace at a glance.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="analytics">…</TabsContent>
</Tabs>

URL-synced tabs (Next.js)

Drive the active tab from the URL so views are shareable and survive refresh.

Chart for new subscriptions (7 days).

"use client";
import { useRouter, useSearchParams } from "next/navigation";

const router = useRouter();
const tab = useSearchParams().get("tab") ?? "overview";

<Tabs value={tab} onValueChange={(v) => router.push(`?tab=${v}`)}>…</Tabs>

Notes

Arrow keys move between triggers; Home/End jump to first/last (Radix).