v0.1.0

04Collection60 components

Pixel HD

A fine dot grid with bloom and ordered dither behind regular controls. Numerals and labels are real text; the field reacts around them.

Controls Feedback Ultracode Data Surfaces Inputs Agent

Every component in this collection

npx shadcn@latest add @lumesec/pixel-hd

Or as one module, for plain HTML

<script type="module" src="https://elements.lumesec.ai/cdn/pixel-hd.js"></script>

Controls

<hf-composer>

Prompt composerhf-composer

<hf-kbd>

Shortcut keyshf-kbd

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

<hf-slider>

<hf-knob>

<hf-dropzone>

<hf-pricing>

Feedback

<hf-status>

Uptimehf-status

<hf-terminal>

Terminalhf-terminal

<hf-progress>

Progresshf-progress

<hf-context>

Context windowhf-context

<hf-gauge>

Gaugehf-gauge

<hf-rings>

Goal ringshf-rings

<hf-countdown>

Countdownhf-countdown

<hf-banner>

Announcementhf-banner

Ultracode

<hf-modes>

Mode pickerhf-modes

<hf-stream>

Streaming replyhf-stream

<hf-effort>

Effort sliderhf-effort

<hf-run>

Agent runhf-run

Data

<hf-area>

<hf-gantt>

<hf-donut>

<hf-stat>

<hf-funnel>

<hf-barlist>

<hf-matrix>

Usage heatmaphf-matrix

<hf-scatter>

Scatter with brushhf-scatter

<hf-candles>

Candlestickshf-candles

<hf-flow>

Flowhf-flow

<hf-leaderboard>

Live leaderboardhf-leaderboard

<hf-radial>

Radial barshf-radial

Surfaces

<hf-hero>

Herohf-hero

<hf-marquee>

Logo marqueehf-marquee

<hf-kanban>

Kanban boardhf-kanban

<hf-card>

Media cardhf-card

<hf-reveal>

Secret fieldhf-reveal

<hf-dialog>

Dialoghf-dialog

<hf-carousel>

Carouselhf-carousel

<hf-spotlight>

Product tourhf-spotlight

<hf-consent>

Privacy choiceshf-consent

<hf-error>

Error statehf-error

<hf-compare>

Before and afterhf-compare

Inputs

<hf-wheel>

Time picker wheelhf-wheel

<hf-range>

Range filterhf-range

<hf-chips>

Filter chipshf-chips

<hf-number>

Number stepperhf-number

<hf-swipe>

Slide to confirmhf-swipe

<hf-pin>

PIN padhf-pin

<hf-split>

Split buttonhf-split

<hf-mention>

@mention fieldhf-mention

Agent

<hf-graph>

Agent graphhf-graph

<hf-redact>

PII redactionhf-redact

<hf-sources>

Sources and citationshf-sources

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-tree>

Changed fileshf-tree

<hf-rewind>

Checkpointshf-rewind