Uiplex - Modern React Component Library

Basic Usage

Content for Tab 1

import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'uiplex';

<Tabs defaultIndex={0}>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
    <Tab index={2}>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel index={0}>
      <p>Content for Tab 1</p>
    </TabPanel>
    <TabPanel index={1}>
      <p>Content for Tab 2</p>
    </TabPanel>
    <TabPanel index={2}>
      <p>Content for Tab 3</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Variants

Line (Default)

Home content

Enclosed

Home content

Soft Rounded

Home content

// Line variant (default)
<Tabs variant="line">
  <TabList>...</TabList>
  <TabPanels>...</TabPanels>
</Tabs>

// Enclosed variant
<Tabs variant="enclosed">
  <TabList>...</TabList>
  <TabPanels>...</TabPanels>
</Tabs>

// Soft rounded variant
<Tabs variant="soft-rounded">
  <TabList>...</TabList>
  <TabPanels>...</TabPanels>
</Tabs>

Sizes

Small

Small tab content

Medium (Default)

Medium tab content

Large

Large tab content

<Tabs size="sm">...</Tabs>
<Tabs size="md">...</Tabs>
<Tabs size="lg">...</Tabs>

Color Schemes

Blue tab content

Green tab content

Red tab content

Purple tab content

<Tabs colorScheme="blue">...</Tabs>
<Tabs colorScheme="green">...</Tabs>
<Tabs colorScheme="red">...</Tabs>
<Tabs colorScheme="purple">...</Tabs>
<Tabs colorScheme="yellow">...</Tabs>
<Tabs colorScheme="gray">...</Tabs>

With Icons

Home content with icon

import { Home, Settings } from 'feather-icons-react';

<Tabs>
  <TabList>
    <Tab index={0} icon={<Home size={16} />}>
      Home
    </Tab>
    <Tab index={1} icon={<Settings size={16} />}>
      Settings
    </Tab>
  </TabList>
  <TabPanels>...</TabPanels>
</Tabs>

Controlled Mode

Controlled Tab 1 - Current index: 0

const [activeIndex, setActiveIndex] = useState(0);

<Tabs index={activeIndex} onChange={setActiveIndex}>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel index={0}>Content 1</TabPanel>
    <TabPanel index={1}>Content 2</TabPanel>
  </TabPanels>
</Tabs>

Disabled Tabs

Enabled tab content

<Tabs>
  <TabList>
    <Tab index={0}>Enabled Tab</Tab>
    <Tab index={1} disabled>
      Disabled Tab
    </Tab>
  </TabList>
  <TabPanels>...</TabPanels>
</Tabs>

Vertical Orientation

Vertical tab content 1

<Tabs orientation="vertical">
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel index={0}>Content 1</TabPanel>
    <TabPanel index={1}>Content 2</TabPanel>
  </TabPanels>
</Tabs>

API Reference

Tabs Props

Prop	Type	Default	Description
defaultIndex	number	0	Default active tab index (uncontrolled)
index	number	-	Active tab index (controlled mode)
onChange	(index: number) => void	-	Callback when active tab changes
variant	"line" \| "enclosed" \| "soft-rounded"	"line"	Visual style variant
size	"sm" \| "md" \| "lg"	"md"	Size of the tabs
colorScheme	"blue" \| "green" \| "red" \| "yellow" \| "purple" \| "gray"	"blue"	Color scheme for active tab
orientation	"horizontal" \| "vertical"	"horizontal"	Layout orientation
className	string	-	Additional CSS class
style	React.CSSProperties	-	Inline styles

Tab Props

Prop	Type	Default	Description
index	number	0	Tab index (must be unique)
disabled	boolean	false	Whether the tab is disabled
icon	ReactNode	-	Icon to display before tab label
className	string	-	Additional CSS class
style	React.CSSProperties	-	Inline styles

TabPanel Props

Prop	Type	Default	Description
index	number	0	Panel index (must match corresponding Tab index)
className	string	-	Additional CSS class
style	React.CSSProperties	-	Inline styles

Keyboard Navigation

Arrow Right / Arrow Down: Move to next tab
Arrow Left / Arrow Up: Move to previous tab
Home: Move to first tab
End: Move to last tab