Phototab
Animated React tabbed photo gallery component with smooth swipe transitions, lazy loading support, and accessible keyboard navigation.
Installation
npx smoothui-cli add phototabFeatures
- 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 |
Screen Reader
- Built on Radix UI's Tabs primitives, which provide built-in
role="tablist",role="tab", androle="tabpanel"semantics with automaticaria-selectedstate management. - Each tab trigger includes a visually hidden
<span className="sr-only">with the tab name. - Tab images have
altattributes matching the tab name.
Reduced Motion
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.
Props
Photo Stack
A draggable deck of photo cards. Drag or tap the top card to flick it to the back and reveal the next — with spring motion and reduced-motion support.
Power Off Slide
Animated React power-off slider component with iOS-style drag-to-confirm interaction, spring physics, and accessible states.