Tabs

A row of tab buttons that switches between layered panels of content.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Tabs } from "@aile.sh/elia";

const TABS = [
  { key: "overview", label: "Overview" },
  { key: "activity", label: "Activity" },
  { key: "settings", label: "Settings" },
];

const COPY: Record<string, string> = {
  overview: "Twelve suppliers verified, seven SKUs queued for reorder.",
  activity: "Last sync ran 4 minutes ago; no failures recorded.",
  settings: "Notifications are sent to the shared inbox each morning.",
};

export function Example() {
  const [tab, setTab] = useState("overview");
  return (
    <div className="w-full max-w-sm">
      <Tabs tabs={TABS} value={tab} onChange={setTab} />
      <p className="pt-3 text-[12.5px] leading-relaxed text-ink-2">{COPY[tab]}</p>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia