northwind/ui-kit
PublicAccessible React components and design tokens used across every Northwind product.
TypeScript2.4k stars186 forksMIT licenseUpdated 3 hours ago
Badge components
12 free, copy-and-go React Badge examples built on the SevenUI Badge primitive. Install any of them with the shadcn CLI.
On this page
Status Dots
Outline badges with a leading token-colored dot for active, pending, failed, and paused states.
ActivePendingFailedPaused
Count Badges
Icon buttons with a numeric badge overlaid on the corner, capped at 99+ and hidden when the count is zero.
Metric Deltas
A monthly metrics list where trend badges are colored by whether the change is good news, not by its sign.
September overview
vs. August
- Monthly recurring revenue
- $48,920
- Up 12.4%, improving
- Customer churn
- 2.1%
- Down 0.6 pts, improving
- Median first response
- 3h 12m
- Up 18%, getting worse
- Active workspaces
- 1,204
- No change, 0.0%
Variant Reference
Every badge variant listed next to the job it is meant for, including a link badge with a trailing arrow.
- default
- Primary state that needs attention
- secondary
- Neutral metadata that sits in the background
- destructive
- Errors and blocking problems
- outline
- Versions, identifiers, and quiet labels
- ghost
- Low-emphasis counts inside dense rows
- link
- A badge that navigates somewhere
Size Scale
Small, default, and large badge sizes with pill and rounded shapes, icons, and tabular counts.
Small
Table cells, 16px
BetaEnterpriseVerified1,284
Default
Lists and cards, 20px
BetaEnterpriseVerified1,284
Large
Headers and hero rows, 24px
BetaEnterpriseVerified1,284
Avatar and Media Badges
People chips with a leading avatar and role, a dashed unassigned chip, and workspace badges with a thumbnail and count.
With avatar
- MCMaya ChenOwner
- DODaniel OkaforReviewer
- LFLena FischerReviewer
- Unassigned
With thumbnail
Billing service12 open issues- Design tokens4 open issues
Repository Topics
A repository card with a Public visibility badge and topic badges rendered as links.
Selectable Badges
Toggleable badges with a plus-to-check indicator and a switch between single and multiple selection modes.
Release notes by area
Showing API, Billing
Product Tile Badges
Product tiles with discount and New badges overlaid on the image, a Sold out banner, and a low-stock badge.
- 25% off
Merino crew sweater
Oatmeal
$90was $120
- New
Waxed canvas tote
Olive
$85
Only 3 left - Sold out
Wool felt slippers
Charcoal
$64
Removable Filter Chips
An issue list toolbar where active filters show as removable badges that sync with a filter menu and the result count.
- Status:Open
- Priority:Urgent
- Priority:High
2 of 5 issues
- API-481Webhook retries ignore backoffUrgent
- API-470Pagination cursor expires too earlyHigh
Deployment List
Deployments tagged with environment, branch, and live build status badges, with a redeploy action that cycles the status.
Deployments
acme-storefrontCache pricing page at the edgeCurrent
Productionmaina41c9e212m agoReadyAdd usage-based billing preview
Previewfeat/metered-billinge03b7d12m agoBuildingBump image optimizer to v3
Previewchore/deps9d2a0f41h agoFailed
Settings Navigation
A settings sidebar whose items carry New, Beta, plan-gated, count, and issue badges, repeated on the selected panel.
Billing
Payment failedYour Visa ending in 4242 was declined on Sep 22. Update it before Oct 2 to keep your seats.
Components are the parts. Blocks are the page.
Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.
One purchase, yours forever. $99 at launch instead of $249.