Tabs

Tabs switches between panels from a row of pixel tabs on a dithered baseline. Arrow keys move between tabs, Home and End jump to the ends, and disabled tabs are skipped. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Tabs } from "@/components/dithercharts/tabs"

<Tabs
  label="Revenue views"
  defaultValue="month"
  onValueChange={setView}
  items={[
    { value: "week", label: "Week", content: <BarChart data={week} /> },
    { value: "month", label: "Month", content: <BarChart data={month} /> },
    { value: "year", label: "Year", content: <BarChart data={year} />, disabled: true },
  ]}
/>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add tabs

Props

It renders a native element, so every other attribute that element takes passes through.