Progress & Utility
PrimitivesProgress 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
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress percentage (0-100) |
label | string | - | Text label above the bar |
showValue | boolean | false | Show percentage alongside label |
colorScheme | 'brand' | 'success' | 'warning' | 'destructive' | 'info' | 'brand' | Semantic color for the fill |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Bar height |
animated | boolean | false | Enable pulse animation on the fill |