Delta

Cards

About

Here is Delta component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Delta to your project and fits it to your theme.

Code

How Delta is used: the demo's code. The component's own source comes with a free account.

Usage.tsx


  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>
    );
  }