import { Tabs, TabsList, TabsTrigger, TabsContent } from "@combric/react";
Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Project sections
Overview panel
Activity panel
import type { CSSProperties } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@combric/react";
export function Example() {
return <Tabs defaultValue="overview"><TabsList aria-label="Project sections" style={{ "--combric-radius-control": "0" } as CSSProperties}><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger><TabsTrigger value="settings" disabled>Settings</TabsTrigger></TabsList><TabsContent value="overview">Overview panel</TabsContent><TabsContent value="activity">Activity panel</TabsContent></Tabs>;
}
Public API
Public exports
Name
Tabs
TabsList
TabsTrigger
TabsContent
Documented contracts
Property / capability
Published contract
Contract
value/defaultValue
Contract
onValueChange
Contract
disabled triggers
Accessibility
Stable IDs connect tab, tablist, and tabpanel roles and state.
Keyboard
Left/Right wrap through enabled tabs; Home/End select boundaries.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.
