Dashboard Kit

Every building block in this kit, live, with the file it lives in. Each one is made from Cortexcn components and reads its colors from app/globals.css, so a theme change restyles them all.

Stat card

A headline number with a split meter. Fixed rows keep a row of them even.

components/kit/stat-card.tsx

Delivery health

View projects

On track4 of 8

Deadline card

A countdown to a milestone. Turns its pill red or yellow when the project is in trouble.

components/kit/deadline-card.tsx

Checkout Revamp

At risk

06November

Beta to 10% of traffic4 days

Attention tile

A pastel tile with a count that links to a filtered list.

components/kit/attention-tile.tsx

3Blocked by others 15Due this week

KPI card

A number with a unit and a note that turns green or red.

components/kit/kpi-card.tsx

On-time delivery

68%

Down 9 points on the 4 weeks before

Badges and meters

Health badges, tone badges, and the split meter at four loads.

components/kit/health-badge.tsx, split-meter.tsx

On trackAt riskOff trackNot startedDonePlatformGrowth

Task card

A board card with its flags: blocked, overdue, quiet, or without an owner.

components/board/task-card.tsx

CHK-39High

3-D Secure challenge in a modal

Blocked 7dNo update in 7d

Checkout RevampNov 6RM

People

Cortexcn Avatar with initials on a pastel, stacked with a count.

components/kit/person-avatar.tsx

MOJWPRDAHSSO

Buttons

Cortexcn Button in the kit's pill shape, set by --ds-button-radius.

components/button.tsx

Delivery chart

Cortexcn ComposedChart with an area and a dashed line.

components/overview/delivery-chart.tsx

Work finished per week

90% of planned points shipped in the last 12 weeks

FinishedPlanned

Ring chart

Cortexcn RingChart with a legend that highlights its ring.

components/reports/work-mix.tsx

Work mix

Open tasks by kind, across the selected team

50Open

Cortexcn components in this kit

Installed from the Cortexcn registry into components/ and components/charts. Add more with npx shadcn add @cortexcn/<name>.