DesignLayer
What's New Card
Back to components
What is this?
A compact what’s-new card for the bottom-right of a dashboard. Slides come from an array, the thin progress marks fill in as you move forward, and the button calls that slide’s own action. Pass autoAdvanceMs to scroll ahead while the current line fills.
Component
What's New Card
A compact what’s-new card for the bottom-right of a dashboard. Slides come from an array, the thin progress marks fill in as you move forward, and the button calls that slide’s own action. Pass autoAdvanceMs to scroll ahead while the current line fills.
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
- Responsive on phone, tablet, and desktop
- Finished React · TypeScript · Tailwind CSS UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
Tech Stack
- React
- TypeScript
- Tailwind CSS
Version 1.0.0