Components
Loading preview...
Here is Delta component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/delta
import { Delta, DeltaIcon, DeltaValue } from "@/components/ui/delta";
export default function DemoOne() {
return (
<div className="flex flex-col gap-6 p-6 max-w-md">
{/* Default variant — inline text */}
<section className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground
uppercase">Default variant</p>
<div className="flex items-center gap-4 text-sm tabular-nums">
<Delta value={12.4}>
<DeltaIcon />
<DeltaValue />
</Delta>
<Delta value={-3.2}>
<DeltaIcon />
<DeltaValue />
</Delta>
<Delta value={0}>
<DeltaIcon />
<DeltaValue />
</Delta>
</div>
</section>
{/* Badge variant */}
<section className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground
uppercase">Badge variant</p>
<div className="flex items-center gap-3">
<Delta value={12.4} variant="badge">
<DeltaIcon variant="trend" />
<DeltaValue />
</Delta>
<Delta value={-3.2} variant="badge">
<DeltaIcon variant="trend" />
<DeltaValue />
</Delta>
</div>
</section>
{/* Icon variants */}
<section className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground uppercase">Icon
variants</p>
<div className="flex flex-col gap-2 text-sm">
<Delta value={5}>
<DeltaIcon variant="default" /> <DeltaValue /> default
</Delta>
<Delta value={5}>
<DeltaIcon variant="trend" /> <DeltaValue /> trend
</Delta>
<Delta value={5}>
<DeltaIcon variant="arrow" /> <DeltaValue /> arrow
</Delta>
<Delta value={5}>
<DeltaIcon variant="default" filled /> <DeltaValue /> filled
</Delta>
</div>
</section>
{/* Value props */}
<section className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground
uppercase">Value formatting</p>
<div className="flex flex-col gap-1 text-sm">
<Delta value={3.28}>
<DeltaIcon /> <DeltaValue /> default (1 decimal, %)
</Delta>
<Delta value={3.28}>
<DeltaIcon /> <DeltaValue precision={2} /> precision=2
</Delta>
<Delta value={-12.5}>
<DeltaIcon /> <DeltaValue absolute={false} suffix="bps" />
absolute=false, suffix=bps
</Delta>
</div>
</section>
</div>
);
}