A Tabs component is a UI element that allows users to switch between different views or sections of content within the same interface. Organized as a series of labeled tabs, this component enhances navigation by displaying only one section at a time, helping to reduce clutter and improve user experience. Users can easily access various related content or features by clicking on the respective tabs, making it ideal for dashboards, settings pages, or any multi-section layout.

# Demo

Tabs:

Content1

Full Width:

Content3

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
itemClassName	string	' '	You can customise by passing tailwind classes.
activeItemClassName	string	' '	You can customise by passing tailwind classes.
items	string[]	Required	You can pass items for the tabs.
isFull	boolean	false	You can pass isFull to occupy full width.
selected	string	Required	You can pass default selected tab.
onChange	(selected: string) => void	Required	You can get callback when tabs changed.
children	ReactNode	Required	You can pass tabs content as children.

# Usage

import { useState } from 'react';
import { NTabs, NTabsContent } from 'nayan';

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

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

  return (
    <div>
      <h1 className="text-text 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-text">
          Content 1
        </NTabsContent>
        <NTabsContent item={items[1]} className="px-3 py-2 text-text">
          Content 2
        </NTabsContent>
      </NTabs>
      <h1 className="text-text 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-text">
          Content 3
        </NTabsContent>
        <NTabsContent otem={items[1]} className="px-3 py-2 text-text">
          Content 4
        </NTabsContent>
      </NTabs>
    </div>
  );
};

export default Tabs;