Native horizontal world-setting tabs with accessible panels.
Preview
Example source could not be loaded: tabs-example. Reload this page to retry.Usage
Use matching stable values on TabsTrigger and TabsContent. The example controls value through onValueChange and selects Game initially; the root does not invent a default selection. Only horizontal orientation and the default TabsList variant are supported. activateOnFocus lets arrow-key focus select a panel.
Composition
TabsList measures available width, caps the native layout at 400 logical pixels, and distributes trigger widths. Give the root usable width; do not force arbitrary fractional native geometry. Trigger/Panel associations and Base UI keyboard behavior are retained. Rich children and different glyph-loading contexts are outside the fixed label matrix.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { minecraftGlyphs } from "./minecraft-font";
import {
isMinecraftRefCallback,
isMinecraftRefCleanup,
isMinecraftTextContent,Interactive playground
For the inherited interaction contract, see Base UI Tabs. The restrictions above describe the installed Grasscn implementation.