@ehfuse/chip-tabs

A lightweight, customizable React tabs component with drag-and-drop, scroll navigation, and cookie persistence.

Features

• 🎨 Fully customizable styles
• 🖱️ Drag-and-drop reordering
• ⬅️➡️ Smart scroll navigation
• 🍪 Cookie persistence for tabs and selection
• ⚡ Lightweight (~9KB minified)
• 📦 Zero CSS dependencies
• ♿ Accessible and keyboard-friendly

Installation

npm install @ehfuse/chip-tabs

Required peer dependencies:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @dnd-kit/modifiers

Quick Start

import { ChipTabs } from "@ehfuse/chip-tab";

function App() {
    const tabs = [
        { key: "tab1", label: "Tab 1" },
        { key: "tab2", label: "Tab 2" },
        { key: "tab3", label: "Tab 3" },
    ];

    return (
        <ChipTabs
            tabs={tabs}
            defaultSelected="tab1"
            onChange={(event) => console.log("Selected:", event.selectedIndex)}
        />
    );
}

Documentation

• 🇰🇷 한글 문서 (Korean)

  • 시작하기
  • API 레퍼런스
  • 예제

• 🇺🇸 English Documentation

  • Getting Started
  • API Reference
  • Examples

License

MIT © ehfuse