Charts and data viz
Desktop13 components54 variants4 recreations
Desktop line, bar, donut, heatmap, funnel, scatter and gauge charts drawn as vectors, with legends, tooltips and states.
$9, or included with Pro
Lists and rows (Desktop)
Desktop packData display
Desktop list patterns: resource rows, trees, bulk select, hover actions, reorder, grouping, column browsers and Kanban columns.
- components
- 13
- variants
- 35
- recreations
- 4
- themes
- 5
Also for mobile: Lists and rows
What’s inside
13 list patterns for desktop apps: resource items, structured and description lists, trees, disclosures, bulk select, hover actions, drag and keyboard reorder, virtualised and infinite lists, grouped lists, a column browser and Kanban columns. Every row shares one anatomy, with a selected edge bar and an inset focus ring. Each page has notes and a live grid in light and dark, comfortable and compact.
- Reorder by drag or keyboard, with a drop line and announcement
- Bulk select with none, some and all states
- 4 recreations of issue, file, board and product lists
Resource item
Free sample5 variants
- Default
- Hover
- Focus
- Selected
- Disabled
Structured list
2 variants
- Contained
- Plain
Description list
2 variants
- Side by side
- Stacked
Tree
3 variants
- None
- Selected file
- Collapsed
Disclosure
2 variants
- First
- None
Bulk select
3 variants
- None
- Some
- All
Hover actions
3 variants
- Rest
- Hover
- Focus within
Reorder
3 variants
- Rest
- Dragging
- Keyboard move
Virtualised list
2 variants
- Scrolled
- Fast scroll
Grouped list
2 variants
Infinite load
3 variants
- Loading more
- End of list
- Error
Column browser
2 variants
- Two columns
- Three columns
Kanban column
3 variants
- Default
- Drop target
- Empty
- Figma file
- SuperDuper Pack: Lists and rows (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 5 UI elements and 2 screen patterns
- List row, Section header, Divider, Accordion, Index scrubber, List and Library & collection
How Linear, Finder and Trello and others 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.
Issue list
Recreated from Linear
Column browser
Recreated from Finder
Card board
Recreated from Trello
Product list
Recreated from Shopify admin
Not affiliated with, endorsed or sponsored by Linear, Finder, Trello and Shopify admin. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the resource item full size, free
A desktop list row in default, hover, focus, selected and disabled states. All 5 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More data display packs
Dashboards and KPIs
Desktop10 components35 variants5 recreations
Desktop KPI rows, widget cards, date range pickers, top-N lists, dashboard homes and empty states with vector charts.
$9, or included with Pro
Cards, tiles and carousels
Desktop13 components67 variants4 recreations
Desktop cards and tiles: media, callout, selectable, expandable, kanban, template, checklist, integration and carousels.
$9, or included with Pro
Questions about the lists and rows pack
One Figma file: SuperDuper Pack: Lists and rows (Desktop). It has 13 components with 35 variants, 4 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.