A tabs component whose active-tab indicator is a single SVG cable that sags mid-transition and snaps taut, with a small tug preview when hovering a neighboring tab.
import { SlackRail } from "@/components/ui/tabs-slack-cable";
export default function TabsSlackCableDemo() {
return (
<div className="flex w-full h-screen items-center justify-center bg-background text-foreground">
<div className="w-full max-w-md">
<SlackRail
aria-label="Example tabs"
defaultValue="overview"
items={[
{
value: "overview",
label: "Overview",
content: (
<p className="text-sm text-ns-muted">
A quick summary of the project, its goals, and current status.
</p>
),
},
{
value: "activity",
label: "Activity",
content: (
<p className="text-sm text-ns-muted">
Recent events, comments, and changes from the team.
</p>
),
},
{
value: "settings",
label: "Settings",
content: (
<p className="text-sm text-ns-muted">
Manage preferences, notifications, and access controls.
</p>
),
},
]}
/>
</div>
</div>
);
}