Partition Bar
A horizontal proportional bar chart for visualizing part-to-whole relationships.
- System50GB
- Apps30GB
- Free20GB
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/partition-bar.jsonOr manually:
npm install clsx tailwind-merge class-variance-authorityExamples
Variants
Use variant props to apply standard theme colors.
- Errors
- Success
- Pending
Alignment & Sizes
Control label placement with alignment and spacing with size.
- Left Aligned60%
- Right Aligned40%
Props
PartitionBar
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 1 | Space between segments (multiplied by 4px). |
| size | 'sm' | 'md' | 'lg' | 'md' | Height of the bar segments. |
| class | string | - | Custom class for the wrapper list. |
PartitionBarSegment
| Prop | Type | Default | Description |
|---|---|---|---|
| num | number | 0 | Value relative to the sum of all segments. |
| variant | string | 'default' | Theme color (default, secondary, destructive, outline, muted). |
| alignment | 'left' | 'center' | 'right' | 'center' | Horizontal alignment of the content under the bar. |
| class | string | - | Custom class for the segment wrapper. |
Source content adapted from 8 Star labs.