About
An Animated Tab Component using a Shadcn/RadixUI
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Tab Component to your project and fits it to your theme.
Code
How Animated Tab Component is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { SlideTabs } from "@/components/ui/animated-tab-component";
const tabs = [
{
value: "Reports",
label: (
<div className="flex items-center gap-2 ">
<div className="text-xs bg-green-500 px-2 py-1 rounded-full">New</div>
Reports
</div>
),
content: (
<div className="flex items-center">
A Big Report
</div>
)
},
{
value: "Directory",
label: (
<div className="flex items-center gap-2">Directory</div>
),
content: (
<div className="">
A Big Directory
</div>
),
},
];
export default function DemoOne() {
return <SlideTabs
tabs={tabs}
defaultValue="Reports"
onValueChange={(value) =>
console.log(value)
}
className="w-full"
/>;
}