Klarhimmel UI
Klarhimmel ↗

Progress

Stable

A bar for a task with a known share done, or an indeterminate one while it works.

npx shadcn add @klarhimmel/progress

When to use

  • Use for

    A task with a known share done, or work with an unknown end.

  • Not for

    A wait under a second. Not a step indicator for a form.

  • Pairs with

    Text, Banner, Button.

Preview

progress.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Progress } from '@/components/klarhimmel/ui/progress';

export default function Example() {
  return (
    <Theme theme="brand">
      <Progress label="Uploading room photos" value={64} showValue />
    </Theme>
  );
}

Install

Import

import { Progress } from '@/components/klarhimmel/ui/progress';
Lands in
components/klarhimmel/ui/progress.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • States

    import { Progress } from '@/components/klarhimmel/ui/progress';

export default function ProgressStates() {
  return (
    <div className="flex w-[min(24rem,calc(100cqw-3rem))] flex-col gap-5">
      <Progress label="Syncing the calendar" showValue />
      <Progress label="Backup" value={0} showValue />
      <Progress label="Import finished" value={100} showValue />
    </div>
  );
}

  • Steps

    import { useState } from 'react';
import { Button } from '@/components/klarhimmel/ui/button';
import { Progress } from '@/components/klarhimmel/ui/progress';

export default function ProgressSteps() {
  const [step, setStep] = useState(2);
  return (
    <div className="flex w-[min(24rem,calc(100cqw-3rem))] flex-col gap-4">
      <Progress label={`Step ${step} of 5`} value={step} max={5} showValue />
      <div className="flex gap-2">
        <Button size="sm" variant="secondary" disabled={step <= 1} onClick={() => setStep((s) => s - 1)}>Back</Button>
        <Button size="sm" disabled={step >= 5} onClick={() => setStep((s) => s + 1)}>Next</Button>
      </div>
    </div>
  );
}

API reference

PropTypeDefaultDescription
labelstring-Required. What is progressing; it names the bar.
valuenumber-0 to max. Omit for an indeterminate bar.
maxnumber100The value that means done.
showValuebooleanfalseShow the label and percentage above the bar.
classNamestring-Extra classes, merged after the component's own.