Tab

Overview

The Tabs component is a versatile navigation interface that allows users to switch between different views within the same context. Built with Framer Motion for smooth animations and powered by Class Variance Authority for flexible styling, it provides multiple variants and themes for different design needs.

Preview

Preview

Code

import { Tabs } from './components/ui';

function TabsDemo() {
  return (
    <Tabs
      options={["Home", "Profile", "Settings", "About"]}
      selected={0}
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add tab

yarn

yarn @mindfiredigital/ignix-ui add tab

pnpm

pnpm @mindfiredigital/ignix-ui add tab

Usage

Import the component:

import { Tabs } from './components/ui';

Basic Usage

function BasicTabs() {
  return (
    <Tabs
      options={["Tab 1", "Tab 2", "Tab 3"]}
      selected={0}
      value={(index) => console.log(`Selected tab: ${index}`)}
    />
  );
}

Variants

Preview

Code

<TabsComponent
  options={["Home", "Profile", "Settings", "About"]}
  selected={0}
  variant="underline"
  theme="light"
/>