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
Number Flow
Smooth animated number transitions for React dashboards, counters, and KPIs. Features rolling digit animations, locale formatting, and customizable easing.
Power Off Slide
Animated React power-off slider component with iOS-style drag-to-confirm interaction, spring physics, and accessible states.