Tabs

import { Tabs } from "@brijbyte/agentic-ui/tabs";

import "@brijbyte/agentic-ui/tabs.css";

const ITEMS = [
  { value: "overview", label: "Overview", content: "Use tabs to organize related content into separate panels." },
  { value: "usage", label: "Usage", content: "Pass an items array with value, label, and content for each tab." },
  { value: "api", label: "API", content: "See TabsProps. All base-ui Tabs.Root props are forwarded." },
  { value: "disabled", label: "Disabled", content: "", disabled: true },
];

export default function HighLevelDemo() {
  return <Tabs items={ITEMS} />;
}

import { Tabs as BaseTabs } from "@base-ui/react/tabs";
import { TabsList, TabsTab, TabsPanel } from "@brijbyte/agentic-ui/tabs";

import "@brijbyte/agentic-ui/tabs.css";

export default function ComposedDemo() {
  return (
    <BaseTabs.Root defaultValue="a">
      <TabsList>
        <TabsTab value="a">Tab A</TabsTab>
        <TabsTab value="b">Tab B</TabsTab>
        <TabsTab value="c" disabled>
          Disabled
        </TabsTab>
      </TabsList>
      <TabsPanel value="a">
        Panel A — composed with a raw{" "}
        <code style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-xs)", color: "var(--color-code)" }}>Tabs.Root</code> from
        base-ui.
      </TabsPanel>
      <TabsPanel value="b">Panel B — styled parts applied as native base-ui components.</TabsPanel>
    </BaseTabs.Root>
  );
}