Tab Component Showcase

Introduction

The Tabs component is versatile and supports different styles and animations. Below are examples showcasing different tab types.

Usage Examples

Horizontal Tabs

Content for Tab 1


import Tabs from '../../components/Tabs';

const HorizontalTabs: React.FC = () => {
  return (
    <Tabs
      tabs={[
        { label: 'Tab 1', content: <div>Content for Tab 1</div> },
        { label: 'Tab 2', content: <div>Content for Tab 2</div> },
        { label: 'Tab 3', content: <div>Content for Tab 3</div> },
      ]}
      variant="horizontal"
    />
  );
};

export default HorizontalTabs;

Vertical Tabs

Content for Tab 1


import Tabs from '../../components/Tabs';

const VerticalTabs: React.FC = () => {
  return (
    <Tabs
      tabs={[
        { label: 'Tab 1', content: <div>Content for Tab 1</div> },
        { label: 'Tab 2', content: <div>Content for Tab 2</div> },
        { label: 'Tab 3', content: <div>Content for Tab 3</div> },
      ]}
      variant="vertical"
    />
  );
};

export default VerticalTabs;

Animated Tabs

Content for Tab 1


import Tabs from '../../components/Tabs';
import { motion } from 'framer-motion';

const AnimatedTabs: React.FC = () => {
  return (
    <Tabs
      tabs={[
        { label: 'Tab 1', content: <div>Content for Tab 1</div> },
        { label: 'Tab 2', content: <div>Content for Tab 2</div> },
        { label: 'Tab 3', content: <div>Content for Tab 3</div> },
      ]}
      variant="animated"
    />
  );
};

export default AnimatedTabs;