List Panel
A dashboard card with a titled list: 31 ready panels (transactions, orders, integrations, team, activity, crypto, timelines …) with loading, empty and error states, or your own rows.
See alsoList ItemList Group
Usage
Installation
List Panel comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then import what you need:
import {
ListPanel,
ListPanelPreset,
ListPanelProps,
ListPanelSkeleton,
ListPanelState,
ListPanelVariant,
} from "@wunderui/react"Examples
Recent Transactions
Rows with dividers: 5 rows — recent transactions. Rows select on click.
Recent Orders
Rows with dividers: 5 rows — recent orders. Rows select on click.
Invoices
Rows with dividers: 5 rows — invoices. Rows select on click.
Connected Integrations
Rows with dividers: 5 rows — connected integrations. Rows select on click. Resume pauses the HubSpot sync again.
Team Members
Rows without dividers: 4 rows — team members. Rows select on click. The row menu opens profile, message, role and remove.
Activity Feed
Rows without dividers: 5 rows — activity feed. Rows select on click.
Notifications
Rows with dividers: 5 rows — notifications. Rows select on click.
Upcoming Events
Rows without dividers: 4 rows — upcoming events. Rows select on click.
Tasks & Approvals
Rows with dividers: 5 rows — tasks & approvals. Rows select on click. The checkboxes tick; the done task keeps the selected fill.
Files & Documents
Rows with dividers: 5 rows — files & documents. Rows select on click. The row menu opens Open, Download, Rename and Delete.
Uploads & Sync Jobs
Rows with dividers: 5 rows — uploads & sync jobs. Rows select on click. Progress bars use the Progress component; Retry restarts the failed sync.
Top Products
Rows without dividers: 5 rows — top products. Rows select on click.
Top Customers
Rows without dividers: 5 rows — top customers. Rows select on click.
Audience by Location
Rows without dividers: 5 rows — audience by location. Rows select on click. The share bars use the Progress component, the value beside them is exact.
Traffic Sources
Rows with dividers: 5 rows — traffic sources. Rows select on click.
Revenue by Channel
Rows with dividers: 5 rows — revenue by channel. Rows select on click.
Subscriptions
Rows with dividers: 5 rows — subscriptions. Rows select on click.
Support Tickets
Rows with dividers: 4 rows — support tickets. Rows select on click.
Crypto Portfolio
Rows without dividers: 5 rows — crypto portfolio. Rows select on click.
Crypto Transactions
Rows with dividers: 5 rows — crypto transactions. Rows select on click.
Crypto Watchlist
Rows without dividers: 5 rows — crypto watchlist. Rows select on click.
Staking & Rewards
Rows with dividers: 4 rows — staking & rewards. Rows select on click.
Account Activity
Rows with dividers: 5 rows — account activity. Rows select on click.
System Activity
Rows with dividers: 5 rows — system activity. Rows select on click.
Project Timeline
A timeline with a 2 px connector behind the steps: 5 rows — project timeline. Rows select on click.
Order Timeline
A timeline with a 2 px connector behind the steps: 4 rows — order timeline. Rows select on click.
Customer Timeline
A timeline with a 2 px connector behind the steps: 4 rows — customer timeline. Rows select on click.
Release Timeline
A timeline with a 2 px connector behind the steps: 4 rows — release timeline. Rows select on click.
Integration Directory
Rows with dividers: 5 rows — integration directory. Rows select on click. Connect switches to Connected.
Integration Sync Status
Rows with dividers: 5 rows — integration sync status. Rows select on click.
Available Modules
Rows without dividers: 5 rows — available modules. Rows select on click. Add switches to Added; the footer button browses more.
Loading
state="loading": skeleton rows at the size and number of the real rows, so the card keeps its height when the data arrives. The header action waits until the rows are there.
Empty
state="empty" (or no rows): a short message and one next step. Every variant brings its own copy; pass empty to change it.
Error
state="error" is announced as an alert; onRetry adds Try again. Here it loads for a moment and then shows the rows.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Sales overview: revenue chart with recent transactions
An Area Chart card next to the Recent Transactions panel; the chart reloads, switches period and toggles its legend.
Integrations settings: connected apps, sync status and modules
Three panels side by side on a settings page.
Crypto wallet: price chart, portfolio and activity
A Line Chart with the portfolio beside it, transactions, top movers and staking below.
Support inbox: master-detail list with ticket queue
The Master-Detail group opens a conversation beside the inbox; the ticket queue sits on the right.
Project overview: timeline, approvals and team
Milestones with progress, the approvals to tick and the team with its menus.
Anatomy
The parts the component is made of. Each one renders a you can target from CSS.
- data-slot="list-panel"
The dashboard card: 400 px, 16 px radius, 24 px padding above and below and 12 px at the sides, a 16 px semibold title, a link action and the rows. picks one of the 31 Figma panels.
- data-slot="list-panel-skeleton"
Skeleton rows at the size of real rows while : leading shape, two text lines, a value.
- data-slot="list-panel-header"
Title, description and the link action ("View all").
- data-slot="list-panel-footer"
An optional full-width plain button under the rows (Available Modules).
- data-slot="list-panel-state"
The empty and error message: a round icon tile, title, description and one button (Try again for the error).
- data-slot="list-panel-skeleton-row"
Best practices
- When to use
Use a List Panel for a list card on a dashboard: recent transactions, orders, integrations, the team, an activity feed, a timeline or crypto holdings, next to charts and KPIs.
- Do
Start from a and pass your own ; the title, the dividers and the copy of the empty and error states come with it.
- Do
Pass , and with . The skeleton keeps the card's height, and the error is announced.
- Do
Link the header action to the full list, and give rows when they open a detail.
- Don’t
Don't show more than five or six rows in a panel; the card sits in a grid with charts and should line up with them.
- Don’t
Don't stretch a panel across a wide row on its own. It is designed at 400 px; let charts take the extra width.
API Reference
Theming
The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.