Loading...
Installation
Usage
import CapsuleTabs from "@/components/ruixen/capsule-tabs";
const tabItems = Array.from({ length: 20 }, (_, i) => ({
value: `tab${i + 1}`,
label: `Tab ${i + 1}`,
content: `Content for Tab ${i + 1}`,
}));
export default function App() {
return <CapsuleTabs items={tabItems} defaultValue="tab1" visibleCount={5} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ScrollableTabItem[] | Default items | Array of tab items |
defaultValue | string | First item | Default active tab value |
className | string | "" | Additional CSS classes |
visibleCount | number | 5 | Number of tabs visible per page |
Features
- Pagination: Navigate through large sets of tabs
- Pagination Dots: Visual indicators for current page
- Arrow Navigation: Left/right arrows for page navigation
- Capsule Design: Rounded pill-style tab buttons
- Hover Effects: Scale animation on hover
Types
interface ScrollableTabItem {
value: string;
label: string;
content?: React.ReactNode;
}