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

Rendered live, with the same build of the library you install.

Account

Security

Notifications

Account settings content.

Usage

Source

Tabs.tsx

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

const items = ['Account', 'Security', 'Notifications'];

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

  return (
    <div>
      <NTabs items={items} selected={selected} onChange={setSelected}>
        <NTabsContent item="Account">Account settings content.</NTabsContent>
        <NTabsContent item="Security">Security settings content.</NTabsContent>
        <NTabsContent item="Notifications">Notification preferences.</NTabsContent>
      </NTabs>
    </div>
  );
};

export default Tabs;

Attributes

15 props

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.
value	string	Optional	Alias of selected.
listClassName	string	' '	Custom class for the tab list container.
tabClassName	string	' '	Custom class for individual tab buttons.
variant	'primary' \| 'secondary'	'primary'	Visual variant of the tabs.
orientation	'horizontal' \| 'vertical'	'horizontal'	Layout orientation of the tabs.

Tabs

Demo

Usage

Attributes

Tags