SegmentProgressBar

free

SegmentProgressBar fills a row of equal-width segments to visualise progress, capacity, or completion level at a glance.

Preview

Dark

In stock65%

import SegmentProgressBar from '@/components/composites/SegmentProgressBar';

export default function UsageDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex justify-between">
        <span className="text-muted-foreground">In stock</span>
        <span className="font-medium">65%</span>
      </div>
      <SegmentProgressBar
        segments={36}
        percent={65}
        height={28}
        filledClass="bg-primary"
        gap={2}
      />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add SegmentProgressBar

Examples

Segment Count

Preview

Dark

import SegmentProgressBar from '@/components/composites/SegmentProgressBar';

export default function SegmentCountDemo() {
  return (
    <div className="flex w-full max-w-sm ">
      <SegmentProgressBar
        segments={48}
        percent={60}
        filledClass="bg-primary"
        gap={2}
      />
    </div>
  );
}

Color

Preview

Dark

Healthy stock78%

In progress55%

Running low28%

Critical12%

import SegmentProgressBar from '@/components/composites/SegmentProgressBar';

const rows = [
  { label: 'Healthy stock',   filledClass: 'bg-success',     percent: 78 },
  { label: 'In progress',     filledClass: 'bg-primary',     percent: 55 },
  { label: 'Running low',     filledClass: 'bg-warning',     percent: 28 },
  { label: 'Critical',        filledClass: 'bg-destructive', percent: 12 },
];

export default function ColorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {rows.map((row) => (
        <div key={row.label} className="flex flex-col gap-2">
          <div className="flex justify-between">
            <span className="text-muted-foreground">{row.label}</span>
            <span className="font-medium">{row.percent}%</span>
          </div>
          <SegmentProgressBar
            segments={24}
            percent={row.percent}
            filledClass={row.filledClass}
            gap={2}
          />
        </div>
      ))}
    </div>
  );
}

Size

Preview

Dark

In stock70%

Question3/5

import SegmentProgressBar from '@/components/composites/SegmentProgressBar';

const sizes = [
  { label: 'Small  (8px)',  height: 8  },
  { label: 'Medium (16px)', height: 16 },
  { label: 'Large  (28px)', height: 28 },
];

export default function SizeDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      
      <div className="flex flex-col gap-2">
        <div className="flex justify-between">
          <span className="text-muted-foreground">In stock</span>
          <span className="font-medium">70%</span>
        </div>
        <SegmentProgressBar
          segments={32}
          percent={70}
          filledClass="bg-primary"
          gap={2}
          height={28}
        />
      </div>

      <div className="flex flex-col gap-2">
        <div className="flex justify-between gap-1">
          <span className="text-muted-foreground">Question</span>
          <span className="font-medium">3/5</span>
        </div>
        <SegmentProgressBar
          segments={5}
          percent={60}
          filledClass="bg-primary"
          gap={4}
          height={4}
        />
      </div>
    </div>
  );
}

API

Prop	Description	Type	Default
`segments`	Total number of equal-width bars in the row.	`number`	—
`percent`	Fill level, 0–100. The filled count is `Math.round((percent / 100) * segments)`.	`number`	—
`filledClass`	Tailwind background class applied to filled segments.	`string`	`'bg-success'`
`className`	Additional class applied to every segment (filled and empty alike).	`string`	—
`gap`	Pixel space between segments (inline style).	`number`	`4`
`height`	Pixel height of each segment (inline style).	`number`	`16`