ComponentsPhototab

Phototab

A configurable tabbed photo display component with animated tab transitions, supporting custom icons and images

one

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

PropTypeDefault
tabs
{ name: string; icon: React.ReactNode; image: string; }[]
-
defaultTab?
string
-
className?
string
-
tabListClassName?
string
-
tabTriggerClassName?
string
-
imageClassName?
string
-