PaperProgress

Rectangular progress indicator with mono labels and hard edges.

← visible progress builds trust.

Preview

Migration64%

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const progressFillVariants = cva('h-full border-r-2 border-r-ink-black transition-all duration-200 ease-paper', {
  variants: {

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperProgress/paperProgress.tsx⎘
Step 2.Create the barrel:
components/ui/paperProgress/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperProgress'
```

Variants

Default

Build42%

Success

Test87%

Error

Retry23%

Props

Prop	Type	Default	Description
`value`	`number`	`required`	Progress percentage (0-100).
`variant`	`'default' \| 'success' \| 'error'`	`default`	Fill color scheme.
`label`	`string`	`Progress`	Mono label shown above track.

Examples

Upload state

Pair with polling updates for long uploads.

Uploading assets31%

<PaperProgress value={31} label="Uploading assets" />

Checklist completion

Works well for onboarding milestones.

Checklist90%

<PaperProgress value={90} variant="success" />