Loading...
Loading...
> Standardized tabs component with terminal card header and consistent styling.
1import { StyledTabs, StyledTabsContent } from "@/components/ui/styled-tabs"
Overview content here
1const [activeTab, setActiveTab] = useState('tab1');23<StyledTabs4 code="0x00"5 title="NAVIGATION"6 tabs={[7 { id: 'tab1', label: 'OVERVIEW' },8 { id: 'tab2', label: 'SETTINGS', icon: Settings },9 ]}10 value={activeTab}11 onValueChange={setActiveTab}12>13 <StyledTabsContent value="tab1">14 <Card>Content 1</Card>15 </StyledTabsContent>16 <StyledTabsContent value="tab2">17 <Card>Content 2</Card>18 </StyledTabsContent>19</StyledTabs>
Overview content here
1<StyledTabs2 tabs={[3 { id: 'settings', label: 'SETTINGS', icon: Settings },4 { id: 'profile', label: 'PROFILE', icon: User },5 ]}6 ...7/>
Alerts panel
1<StyledTabs2 description={(tab) => tab === 'alerts'3 ? 'Configure alert notifications'4 : 'Manage notification settings'}5 ...6/>
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | - | Header code (e.g., "0x00"). |
| title | string | - | Header title displayed in terminal style. |
| tabs | StyledTab[] | - | Array of tab definitions with id, label, and optional icon. |
| value | string | - | Currently active tab id (controlled). |
| onValueChange | (value: string) => void | - | Callback when tab changes. |
| description | string | ((activeTab: string) => string) | - | Optional description shown below tabs. Can be dynamic function. |
| className | string | - | Additional CSS classes for the outer container. |
interface StyledTab {
id: string; // Unique identifier
label: string; // Display text (UPPERCASE)
icon?: LucideIcon; // Optional Lucide icon
}