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-1505937059382-aab581fd88c8?=webp&fit=crop&w=800&fit=max",
"https://images.unsplash.com/photo-1705054476413-4aed25209459?=webp&fit=crop&w=800&fit=max",
"https://images.unsplash.com/photo-1591282063405-1752516fd16e?=webp&fit=crop&w=800&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 | Default |
---|---|---|
tabs | { name: string; icon: React.ReactNode; image: string; }[] | - |
defaultTab? | string | - |
className? | string | - |
tabListClassName? | string | - |
tabTriggerClassName? | string | - |
imageClassName? | string | - |