Local navigation for related views.
Tabs defines how EnterUI handles local navigation for related views, including default structure, accessible states, and token-driven styling.
Selected state uses surface contrast, not heavy brand fill.
Preview content stays close to its control.
Tabs map visual state to CSS variables.
Keyboard and focus states are included.
<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>import { Tabs, TabsContent, TabsList, TabsTrigger } from "@froggdesign/enter-ui-react";Tabs implement tablist, tab, and tabpanel semantics. Arrow keys move between triggers, and panels are connected with aria attributes.
Tabs: value, defaultValue, onValueChange, and orientation.TabsTrigger requires a value.TabsContent requires the matching value.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.