Patterns

Card · StatCard · CaseCard

Three card families. Card for content, StatCard for KPI, CaseCard for portfolio plates.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Active projects+3 mo
14
vs. last quarter
Time to ship-22%
11days
median, 30d
Net revenue+12%
€428k
rolling 12m
NPS
74
8.4×
Method · 01

Listen first.

Two long calls. One walkthrough. We map the system before a single Figma frame.

Week 1
Featured

A design system, in 14 days.

Tokens, primitives, three flagship flows.

BJM
2026
dashboard
202647 days

Helio — Energy ops.

Control plane for a 14-person team.

design systemops
import { Card, StatCard, CaseCard } from "@/components/br/primitives";

<StatCard
  label="Active projects"
  value="14"
  trend="+3 mo"
  footer="vs. last quarter"
  sparkline="M0,30 L12,28 …"
/>

<Card>
  <div className="card-eyebrow">Method · 01</div>
  <h3 className="card-title">Listen first.</h3>
  <p className="card-desc">…</p>
  <div className="card-foot">…</div>
</Card>

<CaseCard
  year="2026"
  days="47"
  title="Helio — Energy ops."
  desc="…"
  tags={["design system", "ops"]}
  placeholder="dashboard"
/>

Props

PropTypeDefaultDescription
Card.interactiveboolean—Lifts 1px on hover, shows shadow-2.
StatCard.label/value/unit/trend/footerReactNode—All optional except label + value.
StatCard.sparklinestring (SVG path)—Tiny sparkline overlay in bottom-right.
StatCard.accentboolean—Renders the value in accent color.
CaseCard.placeholderReactNode—Text shown in the diagonal-pattern image area.
CaseCard.tagsstring[]—Renders Badges in the body.