Skip to content

Tabs

Basic Usage

import { Tabs } from "@ronin-nexus/atomic";
 
<Tabs defaultValue="tab-1" variant="basic">
  <Tabs.List >
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab-1">Content 1</Tabs.Content>
  <Tabs.Content value="tab-2">Content 2</Tabs.Content>
  <Tabs.Content value="tab-3">Content 3</Tabs.Content>
</Tabs>;

Tabs Props

Follow the radix component's props Tabs

PropsType
TabsTabsProps & TabsVariant
Tabs.ListTabsListProps
Tabs.TriggerTabsTriggerProps
Tabs.ContentTabsContentProps

TabsVariant: card | basic

Default: card

Tabs Basic

Portfolio Content

Tabs card

Portfolio Content