PROGRESS

ASCII bracket progress bar. Fills with = characters across a 20-char width. Optional label and percentage readout.

DEPS:@radix-ui/react-progress

PREVIEW

POWER CORE

[============= ]67%

FUEL CELLS

[====== ]30%

SHIELD MATRIX

[=================== ]95%

INSTALLATION

BASH

npx shadcn@latest add @scificn/progress

USAGE

TSX

import { Progress } from '@/ui/progress'

export function StatusReadout() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', width: '240px' }}>
      <Progress value={72} label="REACTOR OUTPUT" />
      <Progress value={45} label="LIFE SUPPORT" showValue={false} />
    </div>
  )
}

VALUES

VALUE: 0

[ ]0%

VALUE: 25

[===== ]25%

VALUE: 50

[========== ]50%

VALUE: 75

[=============== ]75%

VALUE: 100

[====================]100%

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
value	number	0	Progress value from 0 to 100. Clamped to range.
label	string	—	Optional label shown above the bar in uppercase muted text.
showValue	boolean	true	Show the percentage number after the closing bracket.