DocsDocsSDKs

Tabs

React SDK guidance for Tabs.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Tabs when a page has several related content sections that a visitor should be able to switch between without navigating away. It fits naturally on product detail pages (overview, specifications, reviews), account settings (profile, notifications, security), and any layout that needs in-place section switching.

If the sections are independent enough to warrant their own URL, use route-based navigation instead of tabs. Tabs are for content that belongs on the same page.

Slot strategy

Tabs has a small, tight composition:

  • Tabs is the root container. It manages active state and accepts defaultValue for uncontrolled usage or value + onValueChange for controlled usage.
  • TabsList is the horizontal trigger row. It has a muted background and rounded container that visually groups the triggers.
  • TabsTrigger is a single tab button. It highlights when active and needs a value string that matches a content panel.
  • TabsContent is the panel that shows when its matching trigger is active. It renders below the trigger row.

Match value strings

Each TabsTrigger must have a value that exactly matches a TabsContent value. If they do not match, the panel will not show when the trigger is clicked.

Behavior and theming guidance

The trigger row uses a muted background with rounded corners. The active trigger gets a white background and subtle shadow, creating a raised-tab effect. Triggers support full keyboard navigation with arrow keys.

Content panels have a ring-offset focus ring for accessibility when focused via keyboard. They mount lazily: only the active panel renders in the DOM, which keeps large tab sets efficient.

For controlled tabs, use value and onValueChange when you need to sync tab state with a URL hash, query parameter, or external state. This is common for deep-linking into a specific product tab from search results or emails.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Tabs.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Tabs

# Tabs > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/tabs](https://sdk.enad.io/components/base-ui/tabs). ## When to use it Use `Tabs` when a page has several related content sections that a visitor should be able to switch between without navigating away. It fits naturally on product detail pages (overview, specifications, reviews), account settings (profile, notifications, security), and any layout that needs in-place section switching. If the sections are independent enough to warrant their own URL, use route-based navigation instead of tabs. Tabs are for content that belongs on the same page. ## Slot strategy Tabs has a small, tight composition: - `Tabs` is the root container. It manages active state and accepts `defaultValue` for uncontrolled usage or `value` + `onValueChange` for controlled usage. - `TabsList` is the horizontal trigger row. It has a muted background and rounded container that visually groups the triggers. - `TabsTrigger` is a single tab button. It highlights when active and needs a `value` string that matches a content panel. - `TabsContent` is the panel that shows when its matching trigger is active. It renders below the trigger row. > **Match value strings** > > Each `TabsTrigger` must have a `value` that exactly matches a `TabsContent` value. If they do not > match, the panel will not show when the trigger is clicked. ## Behavior and theming guidance The trigger row uses a muted background with rounded corners. The active trigger gets a white background and subtle shadow, creating a raised-tab effect. Triggers support full keyboard navigation with arrow keys. Content panels have a `ring-offset` focus ring for accessibility when focused via keyboard. They mount lazily: only the active panel renders in the DOM, which keeps large tab sets efficient. For controlled tabs, use `value` and `onValueChange` when you need to sync tab state with a URL hash, query parameter, or external state. This is common for deep-linking into a specific product tab from search results or emails. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Tabs. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes