Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTabs whose panels sit in a scroll-snapping row so a swipe changes tab natively, with an indicator that follows the finger and full WAI-ARIA tab keyboard support.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for sibling views on a phone that people compare by swiping: a feed with Following and For you, a profile with Posts and Likes.
Do not use it when the panels are very tall and different in height, when switching must be intentional (use ordinary tabs) or for a wizard.
import { SwipeTabs } from "@/components/ui/swipe-tabs"<SwipeTabs
label="Feed"
className="h-96"
tabs={[
{ id: "following", label: "Following", content: <Following /> },
{ id: "latest", label: "Latest", content: <Latest /> },
]}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
SwipeTabs | tabs | SwipeTab[] | required | { id, label, content }. |
SwipeTabs | value / defaultValue / onValueChange | string | first tab | Selected tab. |
SwipeTabs | label | string | required | Accessible name of the tab list. |
The component ships with a Testing Library test (swipe-tabs.test.tsx). jsdom has no scroll layout, so the test checks the ARIA wiring, the roving keyboard, inert panels and that selection calls onValueChange.