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

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

Props

Prop	Type	Default
All props from	`ProgressRadix.Root`	-

Progress

On this page