DocsComponentsProgress

Progress & Utility

Primitives

Progress bars, spinners, skeletons, empty states, tooltips, dividers, keyboard shortcuts, and copy buttons -- the glue components that polish production interfaces.

#ff7b72">import {
FqProgress, FqSpinner, FqSkeleton,
FqEmptyState, FqTooltip, FqCopyButton,
FqDivider, FqKbd
} #ff7b72">from '@/components/harlowui/primitives/fq-misc'
#ff7b72">export default function Dashboard() {
#ff7b72">return (
<#7ee787">div>
<#7ee787">FqProgress value={75} colorScheme="brand"
label=#a5d6ff">"Upload" showValue animated />
<#7ee787">FqSpinner size="md" />
<#7ee787">FqSkeleton className="h-4 w-32" />
<#7ee787">FqTooltip content="Help text">
<#7ee787">button>Hover me</button>
</#7ee787">FqTooltip>
</#7ee787">div>
)
}

Color Schemes

Five semantic colors map to your design token system.

Brand25%
Success56%
Warning78%
Destructive92%
Info40%

Sizes

Extra Small (xs)60%
Small (sm)60%
Medium (md)60%
Large (lg)60%

Animated Upload

Interactive demo with realistic eased progression.

Upload Progress0%

Multi-Step Onboarding

Real-world pattern combining progress bars with step indicators.

Onboarding Progress

2 of 4 steps completed

KYC Verification100%
Document Upload75%
Account Review30%
Final Approval0%

API Reference

PropTypeDefaultDescription
valuenumber0Progress percentage (0-100)
labelstring-Text label above the bar
showValuebooleanfalseShow percentage alongside label
colorScheme'brand' | 'success' | 'warning' | 'destructive' | 'info''brand'Semantic color for the fill
size'xs' | 'sm' | 'md' | 'lg''md'Bar height
animatedbooleanfalseEnable pulse animation on the fill