DesignLayer
Month Pager
Back to components
What is this?
A white pill month pager: previous, the month and year, next. Changing the month slides the label sideways in the direction you moved, and each button dims at its limit. Swap the range and locale, then drop it above a calendar, billing history, or a report.
Component
Month Pager
A white pill month pager: previous, the month and year, next. Changing the month slides the label sideways in the direction you moved, and each button dims at its limit. Swap the range and locale, then drop it above a calendar, billing history, or a report.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Lucide
Version 1.0.0