FEEDBACK · COMPONENT
Progress bar
Make progress visible and give completion a clear end point.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Button, ProgressBar } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [value, setValue] = useState(40);
return <div style={{ width: "min(100%, 480px)", display: "grid", gap: 28 }}><ProgressBar label="Your workspace checklist" value={value} type={state === "segmented" ? "segmented" : "basic"} metadata={`${value / 20} of 5 steps completed`} showPercentage /><div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}><Button disabled={value === 100} onClick={() => setValue(Math.min(100, value + 20))}>Complete a step</Button><Button variant="secondary" onClick={() => setValue(0)}>Start again</Button></div><p role="status">{value === 100 ? "All five demo steps are complete." : "Progress updates when you complete a demo step."}</p></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A controlled progress indicator advances through five demo checklist steps. Its percentage and supporting text stay in sync, and the action disables on completion.
Try it
Complete the remaining steps, start again, and compare the segmented appearance.