Pill Tabbed Section

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/pill-tabbed-section

Usage

import { PillTabbedSection } from "@reactbytes/pill-tabbed-section";

export default function Example() {
  return (
    <PillTabbedSection />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | defaultTab | select | orchestrations | The ID of the tab that should be active on initial render. | | animationType | select | kinetic | Transition animation style when changing tabs. | | tabShape | select | pill | Border radius style of the tabs and components. | | activeColor | color | #9b8bf4 | Active tab icon, text, and active highlight color. | | inactiveColor | color | #6b6680 | Inactive tab icon and text color. | | glowColor1 | color | #0088ff | First color of the glowing border ray gradient. | | glowColor2 | color | #ff0033 | Second color of the glowing border ray gradient. | | glowSpeed | number | 4 | Speed in seconds of the glowing border ray sweep. | | autoRotate | boolean | false | Automatically cycle through tabs. | | autoRotateInterval | number | 5000 | Time in milliseconds between auto-rotations. | | pauseOnHover | boolean | true | Pause auto-rotation when hover. | | showNoise | boolean | true | Show a shimmering noise overlay in the header. |

Presets

This component includes the following design presets:

• Classic Neon (Default) (default)
• Cyberpunk Pulse (cyberpunk)
• Zen Minimalist (zen-minimalist)
• Ocean Breeze (ocean-breeze)
• Magma Flow (magma-flow)

Credits & Inspiration

Libraries

• Framer Motion - Animations
• Lucide React - Icons

Project Author

• ChandruMIT-o - Creator & Lead Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Pill Tabbed Section.