CMS dashboard

StatCard & KpiGrid

A KPI on a card surface, and the responsive grid to line several up.

💰Revenue128 400 Kč+12.5%

📦Orders1 203-2.1%

Conversion3.4 %+0.3 pp


import { KpiGrid, StatCard } from '@gg-software/cms';
 
<KpiGrid>
    <StatCard label="Revenue" value="128 400 Kč" delta={12.5} icon="💰" />
    <StatCard label="Orders" value="1 203" delta={-2.1} footer={<a href="/orders">View orders</a>} />
</KpiGrid>;

Prop	Type	Default	Description
`label`*	`ReactNode`	—
`value`*	`ReactNode`	—
`delta`	`StatDelta`	—	a number renders "+n%"/"-n%" with an arrow; an object lets you customise
`icon`	`ReactNode`	—
`footer`	`ReactNode`	—	small footer area (e.g. a "View report" link)
`className`	`string`	—

* required · generated from packages/cms/src/dashboard/StatCard.tsx

Prop	Type	Default	Description
`children`*	`ReactNode`	—	StatCards (or any widgets)
`minCardWidth`	`string \| number`	`220`	cards auto-fill columns at least this wide (default 220)
`gap`	`SpaceValue`	`md`
`className`	`string`	—

* required · generated from packages/cms/src/dashboard/KpiGrid.tsx

ActivityFeed

Recent activity on ui’s Timeline; Date times render as “3 hours ago”.

Ada created order #1042
2 minutes ago
Alan updated product “Keyboard”
1 hour ago
Grace deleted a draft page
yesterday


import { ActivityFeed } from '@gg-software/cms';
 
<ActivityFeed
    items={events.map((e) => ({ id: e.id, actor: e.user, action: e.summary, time: e.createdAt }))}
    max={10}
/>;

Prop	Type	Default	Description
`items`*	`ActivityItem[]`	—
`max`	`number`	—	show at most this many items
`className`	`string`	—

* required · generated from packages/cms/src/dashboard/ActivityFeed.tsx

AuditLog

Change-history table with colored action badges and sortable columns.

		Action		Details
Jul 2, 2026, 10:15 AM	ada@acme.io	create	order #1042	—
Jul 2, 2026, 11:02 AM	alan@acme.io	update	product “Keyboard”	price 990 → 890
Jul 2, 2026, 12:40 PM	grace@acme.io	delete	page “Old landing”	—


import { AuditLog } from '@gg-software/cms';
 
<AuditLog entries={entries} pageSize={20} />;

Prop	Type	Default
`entries`*	`AuditEntry[]`	—
`pageSize`	`number`	`10`
`className`	`string`	—

* required · generated from packages/cms/src/dashboard/AuditLog.tsx