Phototab

Tabbed photo gallery with animated transitions.

Open in v0~1.1 kB

Last updated: March 7, 2026

one

Installation

npx smoothui-cli add phototab

Features

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

Accessibility

ARIA Attributes

AttributeElementPurpose
aria-labelTab listProvides an accessible name "Phototab Tabs"
aria-labelEach tab triggerDescribes the tab name

Screen Reader

  • 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.

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

iOS-style power slider interaction with haptics.

On this page

Installation
Features
Accessibility
ARIA Attributes
Screen Reader
Reduced Motion
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev
radix-ui.com