ComponentsPhototab
Phototab
A configurable tabbed photo display component with animated tab transitions, supporting custom icons and images
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/phototab.json"Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/phototab-demo.json"How to use
Demo.tsx
import { Dog, Map as MapIcon, User } from "lucide-react"
import Phototab, { PhototabTab } from "@/components/smoothui/ui/Phototab"
// Placeholder images (replace with your own if available)
const Images = [
"https://images.unsplash.com/photo-1535295972055-1c762f4483e5?=webp&fit=crop&w=400&q=80&fit=max",
"https://images.unsplash.com/photo-1587300003388-59208cc962cb?=webp&fit=crop&w=400&q=80&fit=max",
"https://images.unsplash.com/photo-1508739773434-c26b3d09e071?=webp&fit=crop&w=400&q=80&fit=max",
]
const tabs: PhototabTab[] = [
{
name: "one",
image: Images[0],
icon: <User />,
},
{
name: "two",
image: Images[1],
icon: <Dog />,
},
{
name: "three",
image: Images[2],
icon: <MapIcon />,
},
]
export default function PhototabDemo() {
return (
<div className="mx-auto max-w-md">
<Phototab tabs={tabs} defaultTab="one" />
</div>
)
}
Props
| Prop | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tabs | { name: string; icon: React.ReactNode; image: string; }[] | Array of tab objects, each with a name, icon, and image URL. Object shape:
| ||||||||||||
| defaultTab? | string | Default selected tab name. | ||||||||||||
| className? | string | Class name for the root container. | ||||||||||||
| tabListClassName? | string | Class name for the tab list. | ||||||||||||
| tabTriggerClassName? | string | Class name for each tab trigger. | ||||||||||||
| imageClassName? | string | Class name for the image. |