Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkTabs

A styled, accessible tab list detached from its content panels by a small gap. It supports controlled or uncontrolled selection, disabled tabs, horizontal or vertical layout, and keyboard navigation.

Default

A quick overview of your next mission.

With background

A quick overview of your next mission.

Usage

React / TSX

import { WelkTabs } from "@welkui/react";

const items = [
  { label: "Overview", value: "overview", content: "Mission overview." },
  { label: "Objectives", value: "objectives", content: "Mission objectives." },
];

<WelkTabs label="Mission information" items={items} />
<WelkTabs label="Mission information with background"
  variant="withBg" items={items} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

Default detached tabs or withBg toggle-style tabs on a shared background.
Both variants support horizontal (default) or vertical orientation and automatic activation.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

With background

Toggle-style tabs share a background and stay detached from the content panel.

A quick overview of your next mission.

Key propsvariant="withBg" orientation="horizontal"

With background vertical

Toggle-style tabs share a background and stay detached from the content panel.

A quick overview of your next mission.

Key propsvariant="withBg" orientation="vertical"

Horizontal

The default layout for switching related panels.

A quick overview of your next mission.

Key propsorientation="horizontal"

Vertical

A side-by-side layout for longer tab labels or panels.

A quick overview of your next mission.

Key propsorientation="vertical"

Disabled tab

Disabled tabs are skipped during keyboard navigation.

Complete the mission and return safely.

Key propsdisabled

Usage notes and accessibility

Use tabs to switch between related panels in the same context. For navigation between different pages, use links or WelkMenu instead.
The tab list is separated from the panel by a small gap. Use variant=withBg for toggle-style tabs grouped on a shared background; both variants support vertical orientation.
Give the tab list an informative label and each tab a unique value. Use value/onValueChange for controlled selection or defaultValue for local state.
Arrow keys move between enabled tabs, Home and End jump to the first and last enabled tab, and selection follows focus. Vertical tabs use Up and Down.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkTabs prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`items`	`readonly WelkTabItem[]`	Required	Items: { label: ReactNode, value: string, content: ReactNode, disabled?: boolean }.
`value`	`string`	Uncontrolled	Controlled selected tab value.
`defaultValue`	`string`	First enabled tab	Initially selected tab.
`onValueChange`	`(value: string) => void`	Unset	Called when a tab is selected.
`variant`	`"default" \| "withBg"`	"default"	Detached buttons or toggle-style buttons on a shared background.
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Sets the tab layout and corresponding arrow-key direction.
`className`	`string`	Unset	Additional CSS class on the component root.

Native props and refs

Inherits div props except children, defaultValue and onChange; forwards a div ref. The required label names the tab list.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.