Tabs

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

Account

Security

Notifications

Account settings content.

Usage

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
isFull	boolean	Optional	Whether tabs should take full width.
items	string[]	Required	Array of tab items.
children	React.ReactNode	Required	Tab content.
selected	string	Required	Currently selected tab.
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.
onChange	(selected: string) => void	Required	Callback when tab changes.
ariaLabel	string	Optional	ARIA label for accessibility.
id	string	Optional	ID for the tabs.

Tabs

Demo

Usage

Attributes

Tags