Loading...
Installation
Usage
import SlidingTabs from "@/components/ruixen/sliding-tabs";
const tabItems = [
{ key: 0, label: "Overview", panel: "Overview content" },
{ key: 1, label: "Activity", panel: "Activity content" },
{ key: 2, label: "Settings", panel: "Settings content" },
];
export default function App() {
return (
<SlidingTabs
items={tabItems}
defaultIndex={0}
onChange={(index) => console.log(`Tab ${index} selected`)}
hoverScale={1.4}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TabItem[] | Default | Array of tab items |
defaultIndex | number | 0 | Default active tab index |
onChange | function | - | Callback when tab changes |
className | string | "" | Additional CSS classes |
Features
- Sliding Indicator: Gradient background that slides between tabs
- Glow Effect: Blurred glow behind the sliding indicator
- Keyboard Navigation: Arrow keys, Home, End support
- Mix Blend Mode: Uses mix-blend-mode for visual effects
- Responsive: Automatically measures tab positions
Keyboard Navigation
- Arrow Right: Move to next tab
- Arrow Left: Move to previous tab
- Home: Move to first tab
- End: Move to last tab
Types
interface TabItem {
key: string | number;
label: React.ReactNode;
panel?: React.ReactNode;
}