Bar list

Ranked bar list with dithered bars behind the labels that grow in one after another; hover or focus runs a sheen along a bar.

View as Markdown

<hf-barlist>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-barlist>

Props

dataremounts

labelremounts

unitremounts

<HfBarlist
  data="src/auth/session.ts:184,src/api/client.ts:121,src/ui/composer.tsx:96,tests/auth.spec.ts:58,README.md:21"
  label="Most edited files"
  unit="Edits"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-barlist

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-barlist.json

Usage

import { HfBarlist } from "@/components/lumesec/hf-barlist";

export function Example() {
  return (
    <HfBarlist label="Most edited files" unit="Edits" />
  );
}

Behaviour

Ranked rows with dithered bars behind the labels. They grow in one after another, and hovering a row runs a sheen along its bar.

API reference

Attributes

dataReact propdataTypestringDefaultsrc/auth/session.ts:184,src/api/client.ts:121,src/ui/composer.tsx:96,tests/auth.spec.ts:58,README.md:21

Comma-separated label:value rows, split at the last colon. Rows are sorted by value, highest first.

labelReact proplabelTypestringDefaultMost edited files

Header text on the left.

unitReact propunitTypestringDefaultEdits

Header text on the right, above the values.

Properties

items (read-only)TypeArray<{ label: string, v: number }>

Rows parsed from data, sorted by value, highest first.

Accessibility

Each row has tabindex="0" and an aria-label of the form label: value; rows have no role.
The canvas is aria-hidden.
Focusing a row runs the same sheen as hover.
Reduced motion: the bars appear at full width without growing and no sheen runs; the hover highlight still fades.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono and --ui-muted.

Notes

Bar lengths are relative to the largest value.
Rows are built once on connect; attributes are not observed.

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

Was this page helpful?

Related