Components
Level Bar
A segmented level indicator for displaying strength, progress, or multi-step status. Useful for password strength, form validation, or multi-step progress.
Installation
bunx @happlyui/cli@latest add level-bar
Dependencies
Registry dependencies
These are automatically installed when you add this component.
tvhapply-ui-utils
Usage
import { LevelBar } from "@/components/ui/level-bar"
<LevelBar level={2} levels={3} />
Examples
Levels
Level bar at each level from 0 to 3.
Level 0
Level 1
Level 2
Level 3
<LevelBar level={0} />
<LevelBar level={1} />
<LevelBar level={2} />
<LevelBar level={3} />
Custom Segments
A level bar with 5 segments and custom colors.
5 segments, level 0
5 segments, level 3
5 segments, level 5
<LevelBar level={3} levels={5} levelColors={{ 1: 'text-error-base', 2: 'text-error-base', 3: 'text-warning-base', 4: 'text-warning-base', 5: 'text-success-base' }} />
API Reference
LevelBar
The level bar component.
| Prop | Type | Default | Description |
|---|---|---|---|
level | number | - | Current level (0 to levels) |
levels | number | 3 | Total number of segments |
levelColors | Record<number, string> | { 1: 'text-error-base', 2: 'text-warning-base', 3: 'text-success-base' } | Color class per level |