Tabs Component - Rohit UI

Import

import { Tabs } from 'rohit-ui';

Examples

Basic Tabs

Tab 1

Tab 2

Tab 3

Content for Tab 1

// Basic tabs
<Tabs tabs={[
  { label: "Tab 1", content: <p>Content for tab 1</p> },
  { label: "Tab 2", content: <p>Content for tab 2</p> },
  { label: "Tab 3", content: <p>Content for tab 3</p> }
]} />

Tabs with Icons

📁Files

⚙️Settings

ℹ️About

Files content

// Controlled tabs with state
const [activeTab, setActiveTab] = useState(0);

<Tabs
  tabs={[
    { label: "Files", icon: "📁", content: <p>Files content</p> },
    { label: "Settings", icon: "⚙️", content: <p>Settings content</p> },
    { label: "About", icon: "ℹ️", content: <p>About content</p> }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

Rohit Mode Tabs

UNNECESSARILY COMPLICATED

This tab is unnecessarily complicated.

// Rohit Mode tabs
<Tabs
  tabs={[
    { label: "Dramatic Tab 1", content: <p>Drama content 1</p> },
    { label: "Dramatic Tab 2", content: <p>Drama content 2</p> }
  ]}
  rohitMode
/>

Note: In Rohit Mode, the tabs will wiggle, change color, and sometimes randomly reorder themselves.

Props

Name	Type	Default	Description
defaultActiveTab	number	0	Index of the initially active tab
onTabChange	function	-	Function called when the active tab changes
className	string	-	CSS class to apply to the tabs container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

Tab Props

Name	Type	Default	Description
title	string	-	Title text for the tab
icon	string	-	Icon to display before the tab title
disabled	boolean	false	Whether the tab is disabled

CSS Customization

You can customize the Tabs component using styled-components:

import styled from 'styled-components';
import { Tabs } from 'rohit-ui';

const CustomTabs = styled(Tabs)`
  .tab-list {
    background: var(--win98-silver);
    border-bottom: 2px solid var(--win98-navy);
    padding: 4px;
  }
  
  .tab {
    padding: 8px 16px;
    font-family: 'Comic Sans MS', sans-serif;
    border: 2px solid transparent;
    
    &[aria-selected="true"] {
      background: var(--win98-navy);
      color: white;
      border-color: var(--win98-navy);
    }
  }
  
  .tab-panel {
    padding: 16px;
    background: white;
    border: 2px solid var(--win98-navy);
    border-top: none;
  }
`;

function MyComponent() {
  return (
    <CustomTabs
      tabs={[
        { label: "Custom Tab 1", content: <p>Content 1</p> },
        { label: "Custom Tab 2", content: <p>Content 2</p> }
      ]}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Tabs component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reorder the tabs
Draw unnecessary attention to itself