Command palette
Desktop11 components29 variants4 recreations
Desktop command palettes: Command K, nested pages, scoped tabs, preview, Ask AI, cheat sheet and quick switcher.
$9, or included with Pro
Progress, streaks and rewards (Desktop)
Desktop packDomain
Desktop leaderboards, achievement badges, course outlines, quiz players, points dashboards and activity heatmaps.
- components
- 12
- variants
- 37
- recreations
- 3
- themes
- 5
Also for mobile: Progress, streaks and rewards
What’s inside
Six desktop progress and reward patterns in 12 sets: a league leaderboard with promotion and demotion zones, an achievement badge grid, a course outline with locked lessons, a quiz player with correct and incorrect answers, a points dashboard with stat tiles and a year activity heatmap. Every page documents use, anatomy, keyboard and screen reader behaviour, with a live grid in light and dark.
- Badges earned, in progress and locked, with true progress bars
- Year heatmap with five activity levels and a tooltip
- Recreations of Duolingo, GitHub and Khan Academy progress
Leaderboard table
2 variants
- This week
- All time
Leaderboard row
4 variants
- Default
- You
- Promotion
- Demotion
Badge grid
2 variants
- All
- Earned
Achievement badge
Free sample4 variants
- Earned
- In progress
- Locked
- Focus
Course outline
1 variant
Lesson row
4 variants
- Done
- Current
- Not started
- Locked
Quiz player
3 variants
- Answering
- Correct
- Incorrect
Quiz choice
6 variants
- Default
- Hover
- Selected
- Correct
- Incorrect
- Focus
Points dashboard
1 variant
Stat tile
4 variants
- XP
- Streak
- Lessons
- League
Year heatmap
1 variant
Heatmap cell
5 variants
- 0
- 1
- 2
- 3
- 4
- Figma file
- SuperDuper Pack: Progress, streaks and rewards (Desktop)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 2 screen patterns
- Lesson & quiz and Promotions & rewards
How Duolingo, GitHub and Khan Academy do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Language course web league
Recreated from Duolingo
Code contributions
Recreated from GitHub
Course platform
Recreated from Khan Academy
Not affiliated with, endorsed or sponsored by Duolingo, GitHub and Khan Academy. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the achievement badge full size, free
An achievement badge in earned, in progress, locked and focus states. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More domain packs
Notifications and inbox
Desktop8 components36 variants4 recreations
Desktop notification bell and popover, inbox page, row types, snooze, preferences matrix, email digest and empty inbox.
$9, or included with Pro
Commerce and product pages
Desktop18 components76 variants3 recreations
Desktop product galleries, buy boxes, variant pickers, quick view, carts, reviews, comparison tables and store headers.
$9, or included with Pro
Questions about the progress, streaks and rewards pack
One Figma file: SuperDuper Pack: Progress, streaks and rewards (Desktop). It has 12 components with 37 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.