Skip to content
Pinky UI

mobile

Swipeable Tabs

Fluid Tabs companion with touch swiping and desktop keyboard controls.

  • mobile
  • tabs
  • swipe

Live preview

Three updates this week.

Quick usage

usage
import { SwipeableTabs } from "@pinky-ui/systems";

<SwipeableTabs tabs={tabs} index={index} onIndexChange={setIndex} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use as a touch companion to Fluid Tabs when panels are naturally adjacent.

Use when

Mobile users benefit from a horizontal gesture between a small number of peer views.

Avoid

Hijacking browser back/forward gestures, vertical scrolling, or large tab sets.

Accessibility

Use tablist, tab, selected state, and keyboard arrow movement on desktop.

Keyboard and touch

Tap and arrows are first-class; swipe is bounded and does not prevent normal page scroll.

Reduced motion and performance

Switch panels immediately or use restrained transform motion without per-frame React state.

Composition and anti-patterns

Use Fluid Tabs vocabulary and keep panels independently addressable where possible.

Open this skill on its own page