Phototab

Animated React tabbed photo gallery component with smooth swipe transitions, lazy loading support, and accessible keyboard navigation.

~1.1 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add phototab

Features

Tab and swipe transitions
Lazy image loading friendly
Keyboard and ARIA tabs
Responsive grid

Accessibility

ARIA Attributes

Attribute	Element	Purpose
`aria-label`	Tab list	Provides an accessible name "Phototab Tabs"
`aria-label`	Each tab trigger	Describes the tab name

Built on Radix UI's Tabs primitives, which provide built-in role="tablist", role="tab", and role="tabpanel" semantics with automatic aria-selected state management.
Each tab trigger includes a visually hidden <span className="sr-only"> with the tab name.
Tab images have alt attributes matching the tab name.

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the hover background pill animation uses instant transitions instead of spring physics.