Phototab

Galleries

About

An animated tabbed photo gallery that swaps images with a hover pill indicator and smooth transitions, built on Radix Tabs and Motion.

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

Code

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

Usage.tsx

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>
  );
}