Skip to main content
Browse docs

Marwes documentation

Tab

Coordinated tabs family with a low-level tab component, a canonical TabGroup path, and thin purpose-tab wrappers.

What this family solves

Coordinated tabs family with a low-level tab component, a canonical TabGroup path, and thin purpose-tab wrappers.

Use when

  • The UI needs a named tablist with built-in keyboard movement and tab-to-panel wiring.
  • The product flow maps clearly to NavigationTabs, ContentTabs, or SettingsTabs and benefits from self-documenting purpose metadata.
  • The team wants React and Vue tabs behavior to stay aligned through shared core helpers and one contract file.

Avoid when

  • A different navigation or disclosure pattern such as accordion, switch, or plain links is the more honest interaction model.
  • The implementation cannot own the tabpanel relationship and only needs a visual segmented control treatment.
  • The team expects advanced features such as vertical orientation, lazy panel mounting, or overflow management that this family does not currently define.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

ContentTabs, NavigationTabs, SettingsTabs, Tab, TabGroup, TabPanel

Types

ContentTabsProps, NavigationTabsProps, SettingsTabsProps, TabGroupItem, TabGroupProps, TabPanelProps, TabProps

Vue — @marwes-ui/vue

Components

ContentTabs, NavigationTabs, SettingsTabs, Tab, TabGroup, TabPanel

Types

ContentTabsProps, NavigationTabsProps, SettingsTabsProps, TabGroupItem, TabGroupProps, TabPanelProps, TabProps

Svelte — @marwes-ui/svelte

Components

ContentTabs, NavigationTabs, SettingsTabs, Tab, TabGroup, TabPanel

Types

ContentTabsProps, NavigationTabsProps, SettingsTabsProps, TabGroupItem, TabGroupProps, TabPanelProps, TabProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { NavigationTabs } from "@marwes-ui/react"

const tabs = [
  { value: "overview", label: "Overview", panel: "Account overview" },
  { value: "activity", label: "Activity", panel: "Recent account activity" },
]

export function Example() {
  return <NavigationTabs label="Account" tabs={tabs} defaultActiveTab="overview" />
}

Vue

<script setup lang="ts">
import { NavigationTabs } from "@marwes-ui/vue"

const tabs = [
  { value: "overview", label: "Overview", panel: "Account overview" },
  { value: "activity", label: "Activity", panel: "Recent account activity" },
]
</script>

<template>
  <NavigationTabs label="Account" :tabs="tabs" default-active-tab="overview" />
</template>

Svelte

<script lang="ts">
  import { NavigationTabs } from "@marwes-ui/svelte"

  const tabs = [
    { value: "overview", label: "Overview", panel: "Account overview" },
    { value: "activity", label: "Activity", panel: "Recent account activity" },
  ]
</script>

<NavigationTabs label="Account" {tabs} defaultActiveTab="overview" />

Accessibility requirements

  • Connected tab and panel ids: Keep the active tab and its panel connected through matching ids, not just visual position.
  • Keyboard tab navigation: Verify arrow-key navigation between tabs follows the roving-tabindex pattern.
  • Manual review boundary: Real browser and assistive-technology validation for keyboard feel, focus visibility, and tabpanel reading flow.
  • Manual review 2: Policy clarification for the no-enabled-tabs edge case if the family should define it explicitly later.
  • Manual review 3: Any future expansion beyond the current horizontal automatic-activation tabs model.

Theming

Tab uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources