v0.1.0

Components211 live previewsMIT

Every component.
Running, not pictured.

Each card below is the real element, loaded when it scrolls into view. Click, drag and type in any of them, then open the page to install it.

211 of 211

0111 components

Interaction

Micro-interactions on everyday controls: send buttons, toggles, dials, meters.

Open collection

<effort-slider>

Ultracode slidereffort-slider

<ui-thinking>

Thinking indicatorui-thinking

<ui-send-button>

Send / stop buttonui-send-button

<ui-toggle>

Toggleui-toggle

<ui-segmented>

Segmented controlui-segmented

<ui-copy-button>

Copy buttonui-copy-button

<ui-hold-button>

Hold to confirmui-hold-button

<ui-odometer>

Odometer stepperui-odometer

<ui-toast-stack>

Toast stackui-toast-stack

<ui-dial>

Rotary dialui-dial

<ui-context-meter>

Context meterui-context-meter

0250 components

Pixel Lab

Components that live in a pixel lattice: meters, gauges, orbs, radars, AI moments.

Open collection

<px-agents>

Agent workflowpx-agents

<px-gauge>

Throughput gaugepx-gauge

<px-hourglass>

Rate-limit hourglasspx-hourglass

<px-splitflap>

Split-flap boardpx-splitflap

<px-xypad>

Sampling padpx-xypad

<px-voice>

Voice inputpx-voice

<px-materialize>

Materializing streampx-materialize

<px-model>

Model morphpx-model

<px-secret>

Secret fieldpx-secret

<px-orb>

Status orbpx-orb

<px-fader>

Fader & meterpx-fader

<px-range>

Histogram rangepx-range

<px-focus>

Focus timerpx-focus

<px-deploy>

Slide to deploypx-deploy

<px-activity>

Activity heatmappx-activity

<px-storage>

Storage ringpx-storage

<px-identicon>

Pixel avatarpx-identicon

<px-signal>

Latency scopepx-signal

<px-react>

Pixel reactionspx-react

<px-upload>

Pixel uploadpx-upload

<px-charge>

Charge to generatepx-charge

<px-pattern>

Pattern lockpx-pattern

<px-tasks>

Pixel checklistpx-tasks

<px-xp>

Level uppx-xp

<px-dissolve>

Dissolve to deletepx-dissolve

<px-launch>

Release rocketpx-launch

<px-theme>

Day / night switchpx-theme

<px-rating>

Pixel starspx-rating

<px-bell>

Notification bellpx-bell

<px-flame>

Temperature firepx-flame

<px-tuner>

Radio tunerpx-tuner

<px-eq>

Equalizerpx-eq

<px-jog>

Jog wheelpx-jog

<px-metronome>

Metronomepx-metronome

<px-color>

Pixel colour pickerpx-color

<px-sketch>

Mirror sketchpadpx-sketch

<px-waffle>

Context wafflepx-waffle

<px-ticker>

LED tickerpx-ticker

<px-radar>

Service radarpx-radar

<px-uptime>

Uptime historypx-uptime

<px-clock>

Morphing clockpx-clock

<px-player>

Waveform playerpx-player

<px-globe>

Request globepx-globe

<px-minimap>

Code minimappx-minimap

<px-diffusion>

Diffusion previewpx-diffusion

<px-stepper>

Snake stepperpx-stepper

<px-spinners>

Pixel loaderspx-spinners

<px-keys>

Typing heatmappx-keys

<px-tokenize>

Token viewpx-tokenize

<px-battery>

Usage batterypx-battery

0330 components

Pixel UI

Form controls you can ship, each with one pixel detail.

<px-input>

<px-password>

<px-otp>

<px-search>

Search with resultspx-search

<px-select>

Selectpx-select

<px-slider>

Sliderpx-slider

<px-checkbox>

Checkboxpx-checkbox

<px-choice>

Option cardspx-choice

<px-tags>

Tag inputpx-tags

<px-date>

Date pickerpx-date

<px-textarea>

Text area with budgetpx-textarea

<px-button>

Async buttonpx-button

<px-confirm>

Two-step deletepx-confirm

<px-toaster>

Toastspx-toaster

<px-progress>

Progress barpx-progress

<px-ring>

Progress ringpx-ring

<px-skeleton>

Loading skeletonpx-skeleton

<px-empty>

<px-alert>

<px-tooltip>

<px-avatar>

<px-tabs>

<px-pagination>

Paginationpx-pagination

<px-nav>

Sidebar navpx-nav

<px-accordion>

Accordionpx-accordion

<px-command>

Command menupx-command

<px-steps>

Wizard stepspx-steps

<px-sparkline>

Sparklinepx-sparkline

<px-bars>

Bar chartpx-bars

<px-kpi>

Stat tilepx-kpi

0460 components

Pixel HD

Regular controls on a high-fidelity dot field with bloom and ordered dither.

Open collection

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

<hf-composer>

Prompt composerhf-composer

<hf-slider>

<hf-knob>

<hf-dropzone>

<hf-pricing>

<hf-kbd>

<hf-progress>

<hf-context>

Context windowhf-context

<hf-gauge>

<hf-rings>

<hf-status>

<hf-terminal>

<hf-countdown>

Countdownhf-countdown

<hf-banner>

Announcementhf-banner

<hf-effort>

Effort sliderhf-effort

<hf-modes>

Mode pickerhf-modes

<hf-run>

Agent runhf-run

<hf-stream>

Streaming replyhf-stream

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

<hf-barlist>

<hf-card>

<hf-hero>

<hf-reveal>

Secret fieldhf-reveal

<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

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-tree>

Changed fileshf-tree

<hf-graph>

Agent graphhf-graph

<hf-redact>

PII redactionhf-redact

<hf-rewind>

Checkpointshf-rewind

<hf-sources>

Sources and citationshf-sources

<hf-matrix>

Usage heatmaphf-matrix

<hf-scatter>

Scatter with brushhf-scatter

<hf-candles>

Candlestickshf-candles

<hf-flow>

Flowhf-flow

<hf-gantt>

Roadmaphf-gantt

<hf-leaderboard>

Live leaderboardhf-leaderboard

<hf-radial>

Radial barshf-radial

<hf-marquee>

Logo marqueehf-marquee

<hf-dialog>

Dialoghf-dialog

<hf-kanban>

Kanban boardhf-kanban

<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

0530 components

Network

Topology, devices, traffic and security, with the traffic as the only pixels.

Open collection

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

<ln-device-list>

Device listln-device-list

<ln-client-list>

Clientsln-client-list

<ln-port-panel>

Switch portsln-port-panel

<ln-link>

Linkln-link

<ln-throughput>

Throughputln-throughput

<ln-wan>

WAN failoverln-wan

<ln-speedtest>

Speed testln-speedtest

<ln-ping>

Ping monitorln-ping

<ln-path>

Pathln-path

<ln-vpn>

VPN tunnelsln-vpn

<ln-firewall>

Firewall rulesln-firewall

<ln-segments>

Segmentationln-segments

<ln-vlans>

VLANs and DHCPln-vlans

<ln-ip-pool>

Address mapln-ip-pool

<ln-top-apps>

Top applicationsln-top-apps

<ln-egress>

AI egressln-egress

<ln-floorplan>

Coverage planln-floorplan

<ln-ap>

Access pointln-ap

<ln-spectrum>

Channel scanln-spectrum

<ln-events>

Eventsln-events

<ln-threats>

Intrusion preventionln-threats

<ln-sites>

Sitesln-sites

<ln-qos>

Traffic shapingln-qos

<ln-rack>

Rackln-rack

<ln-poe>

PoE budgetln-poe

<ln-adopt>

Adoptionln-adopt

<ln-firmware>

Firmware rolloutln-firmware

<ln-health>

Network healthln-health

0630 components

Service Map

Hosts, ports, services and routes on one map, with requests as pixels.

Open collection

<sv-map>

Service mapnewsv-map

<sv-shell>

Application shellnewsv-shell

<sv-host-card>

Host cardnewsv-host-card

<sv-host-list>

Host listnewsv-host-list

<sv-host-form>

<sv-vm-stack>

Hypervisorsnewsv-vm-stack

<sv-containers>

Containersnewsv-containers

<sv-port-map>

Port spacenewsv-port-map

<sv-port-picker>

Port pickernewsv-port-picker

<sv-port-scan>

Listening ports scannewsv-port-scan

<sv-bindings>

Listen addressesnewsv-bindings

<sv-conflicts>

Conflicts before applynewsv-conflicts

<sv-service-card>

Service cardnewsv-service-card

<sv-catalog>

Service catalognewsv-catalog

<sv-service-form>

Deploy a servicenewsv-service-form

<sv-health>

Health checksnewsv-health

<sv-placement>

Placementnewsv-placement

<sv-deps>

Dependenciesnewsv-deps

<sv-matrix>

Consumer × providernewsv-matrix

<sv-blast>

What breaks if…newsv-blast

<sv-conn>

Connectionnewsv-conn

<sv-trace>

Tracenewsv-trace

<sv-routes>

Routesnewsv-routes

<sv-route-tester>

Where does this request go?newsv-route-tester

<sv-upstream>

Upstream poolnewsv-upstream

<sv-middleware>

Middleware chainnewsv-middleware

<sv-certs>

Certificatesnewsv-certs

<sv-exposure>

Reachable from the Internetnewsv-exposure

<sv-changes>

Planned changesnewsv-changes

<sv-overview>

Overviewnewsv-overview

Every component.Running, not pictured.

Every component.
Running, not pictured.