Components / Blocks / AdminCustomerWorkspace

AdminCustomerWorkspace.

ProBlockAdminv0.1.0

An internal support workspace combining customer health, plan context, metrics, contacts, recent activity and private notes, with tabs that keep it compact on desktop and mobile.

Get Elements Pro

Demo dataResponsive

Northstar Labs

at-risk

northstar.example · Pro · joined March 2026

MRR

$149

+12% this quarter

Seats

8 / 10

Last active

2d ago

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/admin-customer-workspace

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/admin-customer-workspace.tsxblock
components/ui/button.tsxui
components/ui/badge.tsxui
components/ui/card.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
customer (required)	AdminCustomer	—	Identity, plan and health for the header.
metrics (required)	CustomerMetric[]	—	Shown on the Overview tab.
activity (required)	CustomerActivity[]	—	Shown on the Activity tab.
notes	string	—	Private notes for the Notes tab.
onEmail	() => void	—	Called by Email.
onOpenAsCustomer	() => void	—	Called by View account. Protect and audit this in your app.
onMoreActions	() => void	—	Opens your own menu of further actions.

AdminCustomer

Prop	Type	Default
name (required)	string	—
domain (required)	string	—
owner (required)	string	—
email (required)	string	—
plan (required)	string	—
status (required)	'healthy' \| 'at-risk' \| 'trial'	—
joinedAt (required)	string	—

CustomerMetric

Prop	Type	Default
label (required)	string	—
value (required)	string	—
detail	string	—

CustomerActivity

Prop	Type	Default
id (required)	string	—
text (required)	string	—
timestamp (required)	string	—

Accessibility

Sections use a tablist with aria-selected tabs and labelled tab panels.
The icon-only actions button is labelled "More customer actions".