Trend
- Status
- Implemented
- Family
- 1 of 13
- Registry
- @lopifi/trend
npx shadcn@latest add @lopifi/theme @lopifi/trendThe component, rendering
Real data, the shipped component. Switch the theme to check the claims the spec makes below.
The four-layer spec
Delta + Sparkline composed, with aligned baselines. The default "how is this doing" unit inside a card.
Lifted verbatim from Primitives. The doc and this page are the same paragraphs, so they cannot disagree.
What lands in your repository
One component is never one file. Everything below is copied into your project, where you own it.
The whole component
No compiled bundle, no black box. This is the file the registry copies, and the file you will edit.
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue, PercentChange, Polarity } from "@/lib/ledger/money.types";
import { Delta } from "@/components/ledger/delta";
import { Sparkline } from "@/components/ledger/sparkline";
export interface TrendProps extends React.ComponentPropsWithoutRef<"div"> {
basis?: string;
data?: number[];
percent?: PercentChange;
polarity?: Polarity;
value: MoneyValue | null;
}
/** `Delta` + `Sparkline`, baselines aligned. The "how is this doing" unit. */
export const Trend = React.forwardRef<HTMLDivElement, TrendProps>(
({ className, value, percent, polarity = "standard", basis, data, ...props }, ref) => (
<div className={cn("flex items-end justify-between gap-4", className)} ref={ref} {...props}>
<Delta basis={basis} percent={percent} polarity={polarity} value={value} />
{data ? <Sparkline className="max-w-[96px]" data={data} height={24} polarity={polarity} /> : null}
</div>
),
);
Trend.displayName = "Trend";
Also in Primitives
- MoneyThe core primitive. A monetary value, formatted correctly.
- DeltaA signed change, with polarity and a redundant non-color cue.
- FigureA large display numeral with automatic size step-down.
- PercentPercent vs. percentage points, explicitly discriminated.
- RuleSingle / double / section accounting rule lines.
- StatusPillPayment and reconciliation states.
- SparklineInline trend, one-shot draw.
- AsOfTimestamp with live relative formatting and a stated timezone.
- RedactedMasked value with reveal.
- ReferenceCopyable transaction/account ID with disambiguated glyphs.
- CurrencyBadgeISO code + optional flag.
- EntityMarkBank/merchant logo with the full fallback ladder.
- TooltipHover/focus restatement. Never the only home of a fact.
- InfoTipThe ⓘ. Extra context that survives touch, because it opens on press.
See also
A component is specified in one place, defined in another, and running in a third. All three, from here.
Elsewhere in the system
Where Trend sits in the rest of the system — the live section it renders in, the calculators that compute what it displays, and the ledger payloads it is fed from.
Components are copied into your repository and meant to be edited — rounding policy, fiscal calendar and compliance copy differ per company.
Told when Primitives changes
Components are copied into your repo, so a fix here does not reach you on its own. One email when a component in this family changes in a way that needs a migration — and nothing when it does not.