Paging through a lens, for moments where paging is the experience.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/lens-pagerPlayground
Middle
Last
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/lens-pager
Accessibility
- A nav labelled Pagination, with labelled arrows. Reaching the end moves focus to the other arrow.
- The count is announced politely. The strip is decorative.
Motion
- The strip rolls one slot at a time on a spring, and the current number scales up from 20 to 30.
- The notch stays fixed.
- With reduced motion, numbers swap.
Responsive behavior
- 220 round on Web and 184 on Mobile.
Performance
- It mounts one span per page plus a ghost, so keep it to short sets.
- Numbers move with transform and opacity on a spring.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import LensPager from @/components/fetaui/lens-pager after installing it. pages is required.
- Use page and onPageChange, or defaultPage. Values clamp to the range.
- Left and Right arrow keys page while focus is inside it. Composes IconButton.
- For tables and long lists use Pagination.
Related
PaginationComponentSeven ways to move through pages. The current page lifts onto surface and slides to where you clicked.CarouselComponentA rail of tall cards. The centred card grows to 106% and shows its price.Wheel PickerComponentThree wheels for a time. Set time waits until every wheel has settled.Day StripComponentPick a day from a strip of soft capsules. The selected day grows and fills with ink.TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.