Navigation

Tabs

Switches between related panels while keeping the surrounding layout stable.

Overview content

1import { Tabs } from "@hyzrui/core";
2 
3export function Example() {
4  return <Tabs items={[{ label: "Overview", value: "overview", content: "Overview content" }, { label: "Usage", value: "usage", content: "Usage content" }]} />;
5}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

1pnpm dlx hyzrui add tabs

Usage

Import the component from the generated source folder and compose it with normal React props.

1import { Tabs } from "@hyzrui/core";

1<Tabs className="my-tabs" />

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

Overview content

Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.

Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.

Surface--hui-surfaceControls card, dialog, popover, and input surfaces.

Border--hui-borderControls separators, input strokes, card outlines, and menu edges.

Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.

Font--hui-font-familyControls the font stack used by every primitive inside the provider.

Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.

Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.

Control height--hui-control-heightControls the default field and trigger height across forms and navigation.

Button height--hui-button-heightControls button height independently from form fields.

Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.

Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.

Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.

Focus width--hui-focus-widthControls keyboard focus outline thickness.

Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.

Hover lift--hui-hover-liftControls subtle hover lift for raised styles.

Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.

Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.

Source fileEdit src/lib/hyzrui/components/tabs.tsx directly once the primitive is installed in your app.

Local classTarget .hui-tabs for local refinements that should not become global theme tokens.

1import { defineHyzrTheme } from "@hyzrui/core";
2 
3export const theme = defineHyzrTheme({
4  id: "product",
5  density: "comfortable",
6  radius: 10,
7  shadow: 0.08,
8  colors: {
9    background: "#fbfbfc",
10    foreground: "#09090b",
11    surface: "#ffffff",
12    border: "#e4e4e7",
13    primary: "#18181b",
14    primaryForeground: "#ffffff",
15  },
16  typography: {
17    controlSize: 14,
18    controlWeight: 500,
19    headingWeight: 680,
20  },
21  sizing: {
22    controlHeight: 38,
23    buttonHeight: 34,
24    buttonPadding: 14,
25    cardPadding: 18,
26  },
27  borders: {
28    radius: 10,
29    radiusSm: 7,
30    radiusLg: 16,
31    width: 1,
32    focusWidth: 2,
33  },
34  motion: {
35    duration: 150,
36    hoverLift: 0,
37    hoverMix: 5,
38  },
39});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Page sections

Tabs work well for top-level page sections where switching does not require a navigation event.

Project summary, recent activity, and team members.

1import { Badge, Tabs } from "@hyzrui/core";
2 
3export function TabsNavigation() {
4  return (
5    <Tabs
6      items={[
7        {
8          label: "Overview",
9          value: "overview",
10          content: (
11            <div style={{ padding: "16px 0", fontSize: "0.875rem", color: "var(--hui-muted)" }}>
12              Project summary, recent activity, and team members.
13            </div>
14          ),
15        },
16        {
17          label: "Deployments",
18          value: "deployments",
19          content: (
20            <div style={{ padding: "16px 0", fontSize: "0.875rem", color: "var(--hui-muted)" }}>
21              All deployment runs, rollback controls, and environment status.
22            </div>
23          ),
24        },
25        {
26          label: "Settings",
27          value: "settings",
28          content: (
29            <div style={{ padding: "16px 0", fontSize: "0.875rem", color: "var(--hui-muted)" }}>
30              Project configuration, secrets, and team access.
31            </div>
32          ),
33        },
34      ]}
35    />
36  );
37}

Filtered list

Append counts to tab labels so users can prioritize before clicking through.

Login timeout on mobile
Webhook retry failed
Invoice email missing

1import { Tabs } from "@hyzrui/core";
2 
3export function TabsFilter() {
4  const tickets = {
5    open: ["Login timeout on mobile", "Webhook retry failed", "Invoice email missing"],
6    closed: ["CSV export malformed", "2FA bypass bug"],
7    snoozed: ["Rate limit documentation"],
8  };
9 
10  return (
11    <Tabs
12      items={[
13        {
14          label: `Open (${tickets.open.length})`,
15          value: "open",
16          content: (
17            <ul style={{ padding: 0, margin: "12px 0 0", listStyle: "none", display: "grid", gap: 8 }}>
18              {tickets.open.map((t) => <li key={t} style={{ fontSize: "0.875rem", padding: "8px 0", borderBottom: "1px solid var(--hui-border)" }}>{t}</li>)}
19            </ul>
20          ),
21        },
22        {
23          label: `Closed (${tickets.closed.length})`,
24          value: "closed",
25          content: (
26            <ul style={{ padding: 0, margin: "12px 0 0", listStyle: "none", display: "grid", gap: 8 }}>
27              {tickets.closed.map((t) => <li key={t} style={{ fontSize: "0.875rem", padding: "8px 0", borderBottom: "1px solid var(--hui-border)", color: "var(--hui-muted)" }}>{t}</li>)}
28            </ul>
29          ),
30        },
31        {
32          label: "Snoozed",
33          value: "snoozed",
34          content: (
35            <ul style={{ padding: 0, margin: "12px 0 0", listStyle: "none", display: "grid", gap: 8 }}>
36              {tickets.snoozed.map((t) => <li key={t} style={{ fontSize: "0.875rem", padding: "8px 0", color: "var(--hui-muted)" }}>{t}</li>)}
37            </ul>
38          ),
39        },
40      ]}
41    />
42  );
43}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

Prop	Type	Default	Description
`className`	string	-	Adds classes to the copied component without replacing the default structure.
`children`	React.ReactNode	-	The rendered content for compound or wrapper components.
`...props`	HTMLAttributes	-	Forwards native element props such as id, aria attributes, and event handlers.
`items`	TabItem[]	-	Tab items with value, label, and content.
`value`	string	-	Controlled active tab.
`onValueChange`	(value: string) => void	-	Called when the active tab changes.