Tabs

Tabs organizes content into multiple tabbed panels.

Usage

TabsExample.tsx

import { useState } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent, Text } from '@masumdev/rn-ui';

export function TabsExample() {
  const [tab, setTab] = useState('account');

  return (
    <Tabs value={tab} onValueChange={setTab}>
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Text>Account Panel Content</Text>
      </TabsContent>
      <TabsContent value="settings">
        <Text>Settings Panel Content</Text>
      </TabsContent>
    </Tabs>
  );
}

Props API

Prop	Type	Default	Description
value	string	—	Active tab value.
onValueChange	(value: string) => void	—	Callback on tab change.
children	ReactNode	—	Tab triggers and content panels.