Tabs - EnterUI

Core ComponentsUpdated May 3, 2026

#Default usage

Preview content stays close to its control.

#Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@froggdesign/enter-ui";

export function Example() {
  return (
    <Tabs defaultValue="preview">
      <TabsList>
        <TabsTrigger value="preview">Preview</TabsTrigger>
        <TabsTrigger value="tokens">Tokens</TabsTrigger>
        <TabsTrigger value="states">States</TabsTrigger>
      </TabsList>
      <TabsContent value="preview"><p className="docs-preview-muted">Preview content stays close to its control.</p></TabsContent>
      <TabsContent value="tokens"><p className="docs-preview-muted">Tabs map visual state to CSS variables.</p></TabsContent>
      <TabsContent value="states"><p className="docs-preview-muted">Keyboard and focus states are included.</p></TabsContent>
    </Tabs>
  );
}

#Accessibility

Tabs implement tablist, tab, and tabpanel semantics. Arrow keys move between triggers, and panels are connected with aria attributes.

#API

Tabs: value, defaultValue, onValueChange, and orientation.
TabsTrigger requires a value.
TabsContent requires the matching value.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page