DEVVY UI — Build once. Style freely.

Everything in one place.

Usage

import { Tabs } from "@devvy-ui/react";

<Tabs label="Project" defaultValue="general" items={[
  { value: "general", label: "General", content: <p>Details</p> },
  { value: "members", label: "Members", content: <p>Your team</p> },
]} />

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
items	readonly TabItem[]	required	Unique value, label, content and optional disabled.
label	string	required	Accessible name for the tab list.
value / defaultValue	string	first enabled	Controlled or initial selection.
onValueChange	(value: string) => void	—	Selection request callback.
activationMode	automatic \| manual	automatic	Select on focus or Enter/Space.
orientation	horizontal \| vertical	horizontal	Arrow key axis and layout.
dir	ltr \| rtl	ltr	Explicit direction; set this for RTL.

Source ownership

Add the audited implementation directly into your repository with the CLI:

node /path/to/devvy-ui/packages/cli/src/cli.mjs add tabs

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

Tabs.tsxREACT / TSX

'use client';

import { forwardRef, useId, useState, type HTMLAttributes, type ReactNode } from 'react';
import { getNavigationIndex } from '@devvy-ui/core';
import { cx } from '../lib/cx';

export interface TabItem {
  /** Unique and stable within this Tabs instance. */
  value: string;
  label: ReactNode;
  content: ReactNode;
  disabled?: boolean;
}

export interface TabsProps
  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
  items: readonly TabItem[];
  /** Accessible name of the tab list. */
  label: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  orientation?: 'horizontal' | 'vertical';
  activationMode?: 'automatic' | 'manual';
  dir?: 'ltr' | 'rtl';
}

/** Local-content tabs: panels stay mounted, preserving their form state. */
export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
  {
    items,
    label,
    value,
    defaultValue,
    onValueChange,
    orientation = 'horizontal',
    activationMode = 'automatic',
    dir = 'ltr',
    className,
    ...props
  },
  ref,
) {
  const id = useId();
  const [internal, setInternal] = useState(defaultValue);
  const [focused, setFocused] = useState<string>();
  const requested = value === undefined ? internal : value;
  const selected =
    items.find((item) => item.value === requested && !item.disabled)?.value ??
    items.find((item) => !item.disabled)?.value;
  const tabbable =
    items.find((item) => item.value === focused && !item.disabled)?.value ?? selected;
  const itemId = (kind: string, itemValue: string) =>
    `${id}-${kind}-${encodeURIComponent(itemValue)}`;
  function select(next: string) {
    if (value === undefined) setInternal(next);
    if (next !== selected) onValueChange?.(next);
  }
  return (
    <div
      {...props}
      ref={ref}
      dir={dir}
      className={cx('dvy-tabs', className)}
      data-orientation={orientation}
    >
      <div
        role="tablist"
        aria-label={label}
        aria-orientation={orientation}
        className="dvy-tab-list"
      >
        {items.map((item, index) => (
          <button
            key={item.value}
            type="button"
            role="tab"
            id={itemId('tab', item.value)}
            aria-controls={itemId('panel', item.value)}
            aria-selected={selected === item.value}
            disabled={item.disabled}
            tabIndex={tabbable === item.value ? 0 : -1}
            className="dvy-tab"
            onFocus={() => setFocused(item.value)}
            onClick={() => select(item.value)}
            onKeyDown={(event) => {
              const next = getNavigationIndex({
                key: event.key,
                currentIndex: index,
                disabled: items.map((tab) => !!tab.disabled),
                orientation,
                direction: dir,
              });
              if (next === undefined) return;
              event.preventDefault();
              event.currentTarget.parentElement
                ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
                .item(next)
                ?.focus();
              if (activationMode === 'automatic') select(items[next].value);
            }}
          >
            {item.label}
          </button>
        ))}
      </div>
      {items.map((item) => (
        <div
          key={item.value}
          role="tabpanel"
          id={itemId('panel', item.value)}
          aria-labelledby={itemId('tab', item.value)}
          hidden={selected !== item.value}
          tabIndex={0}
          className="dvy-tab-panel"
        >
          {item.content}
        </div>
      ))}
    </div>
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Tabs

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.