Progress track with a filled portion.
$ npx context-ds add progressUse it for
Credits used, a batch running.
Dependencies: @radix-ui/react-progress
import { Progress } from "@/components/ui/progress";export function Product() { return ( <div className="grid w-full max-w-sm gap-2"> <div className="flex justify-between text-caption text-fg-muted"> <span>Credits used</span> <span className="tabular-nums">6,420 / 10,000</span> </div> <Progress value={64} /> </div> );}"use client";import * as React from "react";import * as ProgressPrimitive from "@radix-ui/react-progress";import { cn } from "@/lib/utils";// A thin pill track with a brand-blue fill, square at its leading edge (a batch's progress, credits used). The fill moves// on transform in 300ms ease-out.function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) { return ( <ProgressPrimitive.Root data-slot="progress" className={cn("relative h-1.5 w-full overflow-hidden rounded-pill bg-neutral-10", className)} {...props}> <ProgressPrimitive.Indicator data-slot="progress-indicator" className="h-full w-full flex-1 bg-brand transition-transform duration-300 ease-out motion-reduce:transition-none" style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }} /> </ProgressPrimitive.Root> );}export { Progress };Reference: context-dashboard c0ddf7a src/components/batches/batch-status.tsx.