AI & AgentsPro

Agent Grid

The fleet view — every agent, its current status and how long it has been there.

Usage

Collections

Chases overdue invoices and drafts the reminder emails.

Waiting for you14 runs today

Inbox triage

Labels incoming mail and answers the ones it is sure about.

Running€2.10 today

Account research

Builds a one-pager on every new lead before the first call.

Donelast run 40 min ago

Contract review

Reads redlines and flags anything outside the playbook.

Failed3 failures this week

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import { AgentGrid } from "@wunderui/react"

Examples

Status and selection

Idle, running, waiting, done and failed agents — the running one is selected.

Billing reconciler

Compares invoices with Stripe.

Running

Support triage

Labels and routes new tickets.

Waiting for you

Weekly digest

Summarizes product usage.

Done

CRM import

Syncs contacts nightly.

Failed

Research assistant

On demand.

Idle

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Agent overview

A grid of agents with their status and an action in the header.

Agents

5 agents · 1 running