Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Layout·@exepert/ui / Tabs

Tabs

A set of related views that share context while keeping navigation close.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Workspace tabs

A small set of sibling views with an interactive default.

Open in Playground ↗
Starting preview…
import { Tabs } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <Tabs tabs={[{ value: "overview", label: "Overview" }, { value: "activity", label: "Activity" }]} defaultValue="overview" onValueChange={() => {}}><p>Trace summary</p></Tabs>
  );
}

Usage

Use tabs for sibling content at the same hierarchy level.

Props

  • tabs: array
  • defaultValue: string
  • value: string
  • onValueChange: function
  • children: ReactNode

Accessibility

  • Uses a tablist and panel relationship.
  • Arrow keys move between tabs.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { Tabs } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.