Progress

Preview

import { useEffect, useState } from "react";
import { Progress } from "@/components/ui/Progress";

export function ProgressDemo() {
  return (
  <div className="w-[300px]">
    <Progress value={60} />
  </div>
)

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/progress

Manual

Install the following dependencies:

pnpm install radix-ui

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Progress component into your components/ui/Progress.tsx file.

"use client";
/**
 * @description Displays an indicator showing the completion progress of a task.
 */
import * as React from "react";
import { Progress as ProgressRadix } from "radix-ui";

import { cn } from "@/utils/class-names";

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressRadix.Root>) {
  return (
    <ProgressRadix.Root
      data-slot="progress"
      className={cn(
        "relative h-0.5 w-full overflow-hidden rounded-full bg-gray-3",
        className
      )}
      {...props}
    >
      <ProgressRadix.Indicator
        data-slot="progress-indicator"
        className="bg-accent-9 h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressRadix.Root>
  );
}

export { Progress };

Usage

Zero

export const Zero = () => (
  <div className="w-[300px]">
    <Progress value={0} />
  </div>
)

Complete

export const Complete = () => (
  <div className="w-[300px]">
    <Progress value={100} />
  </div>
)

Simulated

export const Simulated = () => {
  const [progress, setProgress] = useState(13);

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="w-[300px]">
      <Progress value={progress} />
    </div>
  );
};