Bar List
DataMITTremor-style ranked bar list with values and optional links — top sources, top pages.
bun add @otfdashkit/ui
Preview
Bar ListData
Loading Storybook preview…
Code
@otfdashkit/uiimport { BarList } from '@otfdashkit/ui'
const BARLIST_DATA = [
{ label: 'web-app', value: 84, color: 'hsl(var(--chart-1) / 0.35)' },
{ label: 'api-gateway', value: 47, color: 'hsl(var(--chart-2) / 0.35)' },
{ label: 'mobile-client', value: 29, color: 'hsl(var(--chart-3) / 0.35)' },
{ label: 'data-pipeline', value: 18, color: 'hsl(var(--chart-4) / 0.35)' },
{ label: 'docs', value: 7, color: 'hsl(var(--chart-5) / 0.35)' },
]
export function Example() {
return (
<div className="p-4 max-w-md">
<BarList data={BARLIST_DATA} />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the BarList source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | BarListItem[] | ||
| className | string | ||
| emptyMessage | string | 'No data' | |
| max | number | ||
| sort | boolean | true | |
| valueFormatter | (v: number) => string |