Progress

Installation#

1. Install the dependencies

   npm install cn radix-ui

2. Copy the source into your project

   components/ui/progress.tsx

   "use client"import * as React from "react"import { cn } from "cn"import { Progress as ProgressPrimitive } from "radix-ui"function Progress({  className,  value,  ...props}: React.ComponentProps<typeof ProgressPrimitive.Root>) {  return (    <ProgressPrimitive.Root      data-slot="progress"      className={cn(        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",        className      )}      {...props}    >      <ProgressPrimitive.Indicator        data-slot="progress-indicator"        className="size-full flex-1 bg-primary transition-all"        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}      />    </ProgressPrimitive.Root>  )}export { Progress }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

import { Progress } from "@/components/ui/progress"

Examples#