# 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.
- Element: `<hf-barlist>`
- React: `import { HfBarlist } from "@/components/lumesec/hf-barlist"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-barlist.json
- Page: https://elements.lumesec.ai/components/pixel-hd/barlist



Live preview: https://elements.lumesec.ai/view/hf-barlist

```html
<hf-barlist label="Most edited files" unit="Edits"></hf-barlist>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-barlist
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-barlist.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-barlist.js"></script>

<hf-barlist label="Most edited files" unit="Edits"></hf-barlist>
```

## 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

| Attribute | React prop | Type     | Default                                                                                                   | Description                                                                                           |
| --------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| `data`    | `data`     | `string` | `src/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. |
| `label`   | `label`    | `string` | `Most edited files`                                                                                       | Header text on the left.                                                                              |
| `unit`    | `unit`     | `string` | `Edits`                                                                                                   | Header text on the right, above the values.                                                           |

### Properties

| Property            | Type                                  | Description                                              |
| ------------------- | ------------------------------------- | -------------------------------------------------------- |
| `items` (read-only) | `Array<{ 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](/docs/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.