Progress: React Progress component

Progress bar example: a determinate bar with track, indicator, label and value parts. A label and value can sit above the bar.

pnpm dlx shadcn add @01orbital/progress

File

"use client"

import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
import { cn } from "cn"

function Progress({
  className,
  children,
  value,
  ...props
}: ProgressPrimitive.Root.Props) {
  return (
    <ProgressPrimitive.Root
      value={value}
      data-slot="progress"
      className={cn("flex flex-wrap gap-3", className)}
      {...props}
    >
      {children}
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </ProgressPrimitive.Root>
  )
}

function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
  return (
    <ProgressPrimitive.Track
      className={cn(
        "relative flex h-3 w-full items-center overflow-x-hidden rounded-full bg-muted",
        className
      )}
      data-slot="progress-track"
      {...props}
    />
  )
}

function ProgressIndicator({
  className,
  ...props
}: ProgressPrimitive.Indicator.Props) {
  return (
    <ProgressPrimitive.Indicator
      data-slot="progress-indicator"
      className={cn("h-full bg-primary transition-all", className)}
      {...props}
    />
  )
}

function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
  return (
    <ProgressPrimitive.Label
      className={cn("text-sm font-medium", className)}
      data-slot="progress-label"
      {...props}
    />
  )
}

function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
  return (
    <ProgressPrimitive.Value
      className={cn(
        "ml-auto text-sm text-muted-foreground tabular-nums",
        className
      )}
      data-slot="progress-value"
      {...props}
    />
  )
}

export {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
}

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/components/ui/progress"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Installing blocks",
} as const

/** Progress at 72 percent, its label and value above the track. */
export default function ProgressDemo() {
  return (
    <Progress value={72} className="w-full max-w-sm">
      <div className="flex items-baseline justify-between">
        <ProgressLabel>{COPY.label}</ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  )
}

Examples

New

progress-fundraiser-goal

Fundraiser Goal

Progress bar example: a bar tracking a fundraising goal, in a card with a heavy primary border. Shows progress toward a target amount.

pnpm dlx shadcn add @01orbital/progress-fundraiser-goal

npx shadcn add @01orbital/progress-fundraiser-goal

yarn shadcn add @01orbital/progress-fundraiser-goal

bunx --bun shadcn add @01orbital/progress-fundraiser-goal

File

"use client"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Irene Community Fridge · Winter fund",
  title: "Keep the fridge full.",
  description:
    "Help stock the Oak Street community fridge through February. Every $25 covers one family’s weekly produce bag.",
  raised: "$18,000 raised",
  goal: "$25,000 winter goal",
  donors: "216 neighbors have given",
  footnote: "$7,000 to go. The next delivery is November 12.",
  percent: "72%",
} as const

/** A Progress bar tracking a fundraising goal, in a card with a heavy primary border. */
export default function ProgressFundraiserGoal() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:1rem] dark:[--accent:color-mix(in_oklch,_#2e231c,_#fdfdfd_18%)] dark:[--card:color-mix(in_oklch,_#2e231c,_#fdfdfd_8%)] dark:[--muted-foreground:color-mix(in_oklch,_#2e231c,_#fdfdfd_70%)] dark:[--muted:color-mix(in_oklch,_#2e231c,_#fdfdfd_10%)] dark:[--popover:color-mix(in_oklch,_#2e231c,_#fdfdfd_8%)] dark:[--radius:1rem] dark:[--secondary:color-mix(in_oklch,_#2e231c,_#fdfdfd_14%)]">
      <Card className="w-full max-w-md rounded-2xl border-2 border-primary shadow-none ring-0 [--card-spacing:--spacing(7)] sm:mx-3">
        <CardHeader className="gap-2.5">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <CardTitle className="text-3xl font-medium tracking-tight">
            {COPY.title}
          </CardTitle>
          <Text variant="muted" className="text-sm/6">
            {COPY.description}
          </Text>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <Progress
            value={18000}
            max={25000}
            className="[&_[data-slot=progress-track]]:h-4 [&_[data-slot=progress-track]]:rounded-sm"
          >
            <ProgressLabel className="text-xl font-medium">
              {COPY.raised}
            </ProgressLabel>
            <ProgressValue>{() => COPY.percent}</ProgressValue>
          </Progress>
          <div className="flex justify-between gap-4 text-xs text-muted-foreground">
            <span>{COPY.goal}</span>
            <span>{COPY.donors}</span>
          </div>
        </CardContent>
        <Separator className="mx-(--card-spacing) data-horizontal:w-auto" />
        <CardFooter>
          <Text className="text-sm">{COPY.footnote}</Text>
        </CardFooter>
      </Card>
    </div>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

New

progress-delivery-checks

Delivery Checks

Progress bar example: a progress bar with badge checklist rows for a film delivery handoff. Shows progress paired with status checks.

pnpm dlx shadcn add @01orbital/progress-delivery-checks

npx shadcn add @01orbital/progress-delivery-checks

yarn shadcn add @01orbital/progress-delivery-checks

bunx --bun shadcn add @01orbital/progress-delivery-checks

File

"use client"

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Fedora Films · Delivery",
  title: "Harbor opening film",
  meta: "Master export · 3840 × 2160 · ProRes 422",
  label: "Delivery checks",
  pending: "Client approval",
  waiting: "Waiting",
  footnote:
    "Delivery unlocks after Ellen Ochoa approves the final cut. Last reviewed November 3 at 10:42 am.",
  complete: "3 of 4 complete",
} as const

const CHECKS = [
  { label: "Picture lock", status: "Passed" },
  { label: "Audio · −14 LUFS", status: "Passed" },
  { label: "English captions", status: "Passed" },
] as const

/** A Progress bar with Badge checklist rows for a film delivery handoff. */
export default function ProgressDeliveryChecks() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground">
      <Card className="w-full max-w-md rounded-xl border shadow-none ring-0 sm:mx-3">
        <CardHeader className="gap-2">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <CardTitle className="text-2xl font-medium tracking-tight">
            {COPY.title}
          </CardTitle>
          <Text variant="muted" className="text-sm">
            {COPY.meta}
          </Text>
        </CardHeader>
        <CardContent className="flex flex-col gap-6">
          <Progress
            value={3}
            max={4}
            className="[&_[data-slot=progress-track]]:h-2"
          >
            <ProgressLabel>{COPY.label}</ProgressLabel>
            <ProgressValue>{() => COPY.complete}</ProgressValue>
          </Progress>
          <DescriptionList className="gap-3 text-sm">
            {CHECKS.map((check) => (
              <DescriptionListItem
                key={check.label}
                className="flex-nowrap gap-3"
              >
                <DescriptionListTerm className="text-current">
                  {check.label}
                </DescriptionListTerm>
                <DescriptionListDetails>
                  <Badge variant="outline">{check.status}</Badge>
                </DescriptionListDetails>
              </DescriptionListItem>
            ))}
            <DescriptionListItem className="flex-nowrap gap-3">
              <DescriptionListTerm className="text-current">
                {COPY.pending}
              </DescriptionListTerm>
              <DescriptionListDetails>
                <Badge>{COPY.waiting}</Badge>
              </DescriptionListDetails>
            </DescriptionListItem>
          </DescriptionList>
        </CardContent>
        <CardFooter className="flex-col items-stretch gap-4">
          <Separator />
          <Text variant="muted" className="text-xs/5">
            {COPY.footnote}
          </Text>
        </CardFooter>
      </Card>
    </div>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

Dependencies

npm: @base-ui/react, cn. The CLI installs them for you.

No other registry pieces.

Progress

ExamplesCopy Anchor Link

Fundraiser GoalNew

Delivery ChecksNew

DependenciesCopy Anchor Link

Examples

New

New

Dependencies