Components
A signed percentage change with a trend icon, colored by whether the change is good.
+12.4%-3.2%0.0%+8.0%
+12.4%-3.2%0.0%
+12.4%-3.2%
import { DeltaBadge } from "@/components/ui/delta-badge"
export default function DeltaBadgeDemo() {Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/delta-badge.jsonUsage#
import { DeltaBadge } from "@/components/ui/delta-badge"
<DeltaBadge delta={0.124} />
<DeltaBadge delta={0.08} invert />
<DeltaBadge delta={-0.032} variant="soft" />Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.