import { useState } from 'react';
import { NTabs, NTabsContent } from '@nayan-ui/react';

const items = ['POSTS', 'SAVED'];

const Tabs = () => {
  const [selected, setSelected] = useState(items[0]);

  return (
    <div>
      <h1 className="text-foreground mb-3 text-lg text-left">Tabs:</h1>
      <NTabs items={items} selected={selected} onChange={setSelected}>
        <NTabsContent item={items[0]} className="px-3 py-2 text-foreground">
          Content 1
        </NTabsContent>
        <NTabsContent item={items[1]} className="px-3 py-2 text-foreground">
          Content 2
        </NTabsContent>
      </NTabs>
      <h1 className="text-foreground mb-3 mt-5 text-lg text-left">Full Width:</h1>
      <NTabs isFull={true} items={items} selected={selected} onChange={setSelected}>
        <NTabsContent item={items[0]} className="px-3 py-2 text-foreground">
          Content 3
        </NTabsContent>
        <NTabsContent item={items[1]} className="px-3 py-2 text-foreground">
          Content 4
        </NTabsContent>
      </NTabs>
    </div>
  );
};

export default Tabs;

Attributes

Name	Type	Default	Details
items	TabItem[]	Required	Array of tab items with label, value, and optional content.
value	string	Optional	Controlled active tab value.
defaultValue	string	Optional	Default active tab value.
onValueChange	(value: string) => void	Optional	Callback when active tab changes.
variant	string	Optional	Tabs variant style.
className	string	' '	You can customise by passing tailwind classes.
listClassName	string	' '	You can customise tab list by passing tailwind classes.
triggerClassName	string	' '	You can customise tab triggers by passing tailwind classes.
contentClassName	string	' '	You can customise tab content by passing tailwind classes.

Tabs

Demo

Demo Coming Soon

Usage

Attributes

Tags