Magic Tabs

Navigation

About

A segmented tab list whose selection indicator physically slides and resizes to match the active tab, with a quieter hover ghost that previews where a click would land.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magic Tabs to your project and fits it to your theme.

Code

How Magic Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import MagicTabs, { type MagicTabItem } from "@/components/ui/magic-tabs";
import { useState } from "react";
import { Activity, CreditCard, Gift, Archive } from "lucide-react";

const items: MagicTabItem[] = [
  { value: "activity", label: "Activity", icon: Activity, count: 24 },
  { value: "cards", label: "Cards", icon: CreditCard },
  { value: "rewards", label: "Rewards", icon: Gift, count: 3 },
  { value: "archive", label: "Archive", icon: Archive },
];

export default function MagicTabsDemo() {
  const [value, setValue] = useState("activity");

  return (
    <div className="flex w-full flex-col items-center gap-4 bg-background p-10">
      <MagicTabs
        items={items}
        value={value}
        onValueChange={setValue}
        label="Account sections"
        variant="pill"
        panelId="account-panel"
      />
      <p className="text-sm text-muted-foreground">
        Showing <span className="font-semibold text-foreground">{value}</span>.
      </p>
    </div>
  );
}