Progress

Component 10

About

Here is Progress component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress to your project and fits it to your theme.

Code

How Progress is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Progress } from "@ark-ui/react/progress";

export default function LinearSizes() {
  return (
    <div className="w-full max-w-sm mx-auto space-y-6">
      {/* Small */}
      <Progress.Root defaultValue={65} className="w-full space-y-2">
        <Progress.Label className="text-xs font-medium text-gray-700 dark:text-gray-300">
          Small
        </Progress.Label>
        <Progress.Track className="h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <Progress.Range className="h-full bg-blue-600 dark:bg-blue-500 transition-all duration-300 ease-out rounded-full" />
        </Progress.Track>
      </Progress.Root>

      {/* Medium */}
      <Progress.Root defaultValue={65} className="w-full space-y-2">
        <Progress.Label className="text-sm font-medium text-gray-700 dark:text-gray-300">
          Medium
        </Progress.Label>
        <Progress.Track className="h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <Progress.Range className="h-full bg-blue-600 dark:bg-blue-500 transition-all duration-300 ease-out rounded-full" />
        </Progress.Track>
      </Progress.Root>

      {/* Large */}
      <Progress.Root defaultValue={65} className="w-full space-y-2">
        <Progress.Label className="text-base font-medium text-gray-700 dark:text-gray-300">
          Large
        </Progress.Label>
        <Progress.Track className="h-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <Progress.Range className="h-full bg-blue-600 dark:bg-blue-500 transition-all duration-300 ease-out rounded-full" />
        </Progress.Track>
      </Progress.Root>
    </div>
  );
}