Quick start

Before you start #

Complete the one-time installation and stylesheet setup in an app with repository access. You can browse and copy this example publicly, but running it requires the private package. This walkthrough uses the minimal Next.js App Router setup from that guide.

Copy your first component #

Copy the complete example below into app/page.tsx (or src/app/page.tsx when your app uses src/). It is the same Large example shown in the StatBlock reference, with no site-specific helper imports.

'use client';

import { StatBlock } from '@coreux/ui';

export default function Large() {
  return (
    <StatBlock
      value="37"
      unit="%"
      label="Adoption"
      caption="Illustrative increase in product adoption within 90 days."
    />
  );
}

Keep 'use client' at the top. The package needs that boundary at this revision; no provider is required. To keep an existing page on the server, save the example as a separate component file and import its default export into that page instead.

pnpm exec next dev

Open http://localhost:3000. For the minimal package file in the installation guide, verify the production build with pnpm build and run it with pnpm exec next start.

Check the result #

You should see 37%, the Adoption label, and the caption explaining an illustrative increase over 90 days. The value is ink navy and uses Switzer bold at 36 px with a 16 px root; the percent unit uses 20 px semibold. The uppercase label uses the monospace stack at 12 px, and the caption uses Switzer at 14 px. The app’s default surface is warm ivory.

StatBlock displays the strings you supply; it does not calculate a percentage or animate a value. These metrics are illustrative, so replace both the value and its context with verified content before publishing. Use a nearby heading to introduce a group of metrics, and test your actual text at narrow widths.

If the colors, spacing, or fonts differ, work through installation troubleshooting. A blocked Google Fonts request can change the monospace label font while leaving the local Switzer value intact.

Explore the reference #

Explore the StatBlock reference for small and dark presentations, every prop, and accessibility and layout guidance. Its preview, displayed source, and clipboard text come from the same complete example file used here.

When you need to compose your own wrapper’s classes, try the public cn utility example. To choose another building block, open the component catalog.