KQ-516 · SWIPE/TABS
Swipe Tabs
Tabs whose panels are a strip you can push: dragging moves the strip with the pointer while the underline rides the same value, so the indicator sits exactly where your thumb has taken it. Release settles to the nearest panel on snap and the strip's height glides to the new panel's measured height. Left and Right move and activate without wrapping past the ends, Home and End jump.
KQ-516 · SWIPE/TABS
Waylight orderWL-4192
- Order
- WL-4192
- Placed
- 12 Mar, 09:14
- Ship to
- Basinworks depot 3
- Carrier
- Coldbrook overnight
- Fieldline sensor rail2 × 84.00
- Gaugeworks clamp set1 × 46.50
- Fernworks mount plate4 × 12.25
- 09:14Order placed
- 09:20Payment cleared
- 11:02Picked at depot 3
- 14:38Left the depot
- 07:05Out for delivery
Tab details
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/swipe-tabs
Props
- tabs
- { id: string; label: string; content: React.ReactNode }[]
- default —
- Tabs and their panels, left to right.
- value / defaultValue
- string
- default —
- Controlled or initial tab id.
- onValueChange
- (id: string) => void
- default —
- Fires when the active tab changes.
- aria-label
- string
- default —
- Names the tablist for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { id: string; label: string; content: React.ReactNode }[] | — | Tabs and their panels, left to right. |
| value / defaultValue | string | — | Controlled or initial tab id. |
| onValueChange | (id: string) => void | — | Fires when the active tab changes. |
| aria-label | string | — | Names the tablist for assistive technology. |