An animated tabbed photo gallery that swaps images with a hover pill indicator and smooth transitions, built on Radix Tabs and Motion.
import Phototab, { type PhototabTab } from "@/components/ui/phototab";
import { Dog, Map as MapIcon, User } from "lucide-react";
const Images = [
"https://cdn.21st.dev/assets/localized/b62f8f9827b0b67f0c0f26a0be454a3ed9079452d52faf285a778b076fa4c9df.jpg",
"https://cdn.21st.dev/assets/localized/58d85e41b1f61ef439be1658cb606367ab6031fbe1a5bfbd0866a26678aa0f18.jpg",
"https://cdn.21st.dev/assets/localized/14e00fbf8caa4f85379f2b3cabe43cbf291f6630d535192e393c9098fb5c84b0.jpg",
];
const tabs: PhototabTab[] = [
{
icon: <User />,
image: Images[0],
name: "one",
},
{
icon: <Dog />,
image: Images[1],
name: "two",
},
{
icon: <MapIcon />,
image: Images[2],
name: "three",
},
];
export default function PhototabDemo() {
return (
<div className="mx-auto max-w-md">
<Phototab defaultTab="one" height={300} tabs={tabs} />
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.