Skip to content
NewService Map: 30 components for hosts, ports and routes

LumeSec Elements211 componentsshadcn registry

Built in the lab.
Shipped to your repo.

Interactive components from the LumeSec design lab: controls, meters, dot-matrix displays, network and service maps. Install one with the shadcn CLI, read every line of it, and theme it with your tokens.

Browse componentsRead the docs

React 19 // Tailwind CSS v4 // strict TypeScript // custom elements for any framework

<effort-slider>Ultracode slider
<hf-gauge>Gauge
<ui-dial>Rotary dial
<ln-throughput>Throughput
<px-orb>Status orb
<hf-composer>Prompt composer

<ui-context-meter>Context meter

Fig. 1 · 7 components from 4 collections, running live · click, drag, type

  • 211 components

    six collections // all live

  • One command

    shadcn add // you own the source

  • TypeScript

    React components // typed custom elements

  • Accessible

    keyboard // ARIA // reduced motion

02How they move

Effects switch on for the state that matters.

Six rules came out of design reviews. They are why the motion reads as information rather than decoration.

  1. 01<effort-slider>

    Plain until earned.

    Every level is an ordinary slider stop. Only the last one, Ultracode, grows a pixel trail, and only once the thumb arrives there.

    Ultracode slider

  2. 02<ui-context-meter>

    Growth has a direction.

    Effects start at an origin and travel one way, with an uneven front. Compaction sweeps back the other way, so the direction itself carries meaning.

    Context meter

  3. 03<ui-send-button>

    Bursts reach past the edge.

    When a reply completes, the ring closes and sparks fly past the button's bounds on their own layer. A small sparkle inside the box would not register.

    Send / stop button

  4. 04<ui-odometer>

    Numbers are mechanical.

    Counters roll digit by digit in tabular figures, in the direction of the change, so the width never jumps and the change is legible.

    Odometer stepper

  5. 05<hf-stat>

    Legibility beats pixels.

    Numbers and words are set in a regular font. The dot field glows and reacts around the value instead of forming it, so every figure stays readable and available to assistive technology.

    Stat tile

  6. 06<ln-egress>

    Density follows the data.

    In system views the only pixels are traffic. Their density follows the measured rate, logarithmic and capped, so ten megabits and a gigabit both read.

    AI egress

03Collections

Six collections. One way of moving.

All collections

0111 components

Interaction

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

0250 components

Pixel Lab

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

0330 components

Pixel UI

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

0460 components

Pixel HD

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

0530 components

Network

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

0630 components

Service Map

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

04How it works

Install. Own. Theme.

The shadcn CLI copies the source into your project. Shared engines install once. One set of tokens decides how every component looks.

1Install
// one command
~/app

$

2Own
// typed, readable
components/lumesec/hf-gauge.tsx
export interface HfGaugeProps {
  /** `value` attribute. */
  value?: number | string;
  min?: number | string;
  max?: number | string;
  zones?: string;
  label?: string;
}

export function HfGauge(props: HfGaugeProps) {
  return useLumesecElement("hf-gauge", …);
}
3Theme
// one token
:root {
  --lumesec: #6219f3;
}

05Works where you do

React where it fits. Any framework where it draws.

Controls and form fields are native React components on your Tailwind theme. The canvas-heavy collections are typed custom elements: they run in React with a typed wrapper, and in plain HTML, Vue or Svelte without one.

import { HfGauge } from "@/components/lumesec/hf-gauge";

export function Load({ value }: { value: number }) {
  return <HfGauge value={value} label="Rate limit" zones="60,85" />;
}
<hf-gauge>

06Recently added

New on the bench.

Newest first
<sv-overview>
Overviewnewsv-overviewOpen Overview
<sv-changes>
Planned changesnewsv-changesOpen Planned changes
<sv-exposure>
Reachable from the Internetnewsv-exposureOpen Reachable from the Internet
<sv-certs>
Certificatesnewsv-certsOpen Certificates
<sv-middleware>
Middleware chainnewsv-middlewareOpen Middleware chain
<sv-upstream>
Upstream poolnewsv-upstreamOpen Upstream pool
<sv-route-tester>
Where does this request go?newsv-route-testerOpen Where does this request go?
<sv-routes>
Routesnewsv-routesOpen Routes

07From LumeSec

The products these components come from.

Elements is where the LumeSec design team publishes what it builds for SecureGrid and the AI Operating Platform.

From LumeSecSecureGridAsk anything. Leak nothing.Names, IBANs and API keys become placeholders before you paste into ChatGPT, Claude or Copilot. The answer gets the real values back. On your device.macOS · Windows · runs locallyDownload free
From LumeSecAI Operating PlatformPredictable AI. Built for Enterprise.The operating layer beneath the models you already use, so regulated institutions can run AI with identity, policy and signed evidence.Correlate · Contain · AttestRequest a briefing
From LumeSecElements ProTemplates and composite blocks.Full application layouts built from these components: network operations, service maps and AI consoles. Join the list to hear first.Coming laterJoin the list

08Questions

Before you install.

01Is LumeSec Elements free?

Yes. Every component is free under the MIT license, including for commercial products. Templates and composite blocks will follow later as Elements Pro; the free components stay free.

02Do I need React or Tailwind CSS?

For Interaction and Pixel UI, yes: they are native React 19 components styled with Tailwind CSS v4, like shadcn/ui. Pixel Lab, Pixel HD, Network and Service Map are typed custom elements that style themselves inside a shadow root, so they also run in plain HTML, Vue, Svelte or Angular, and ship with a typed React wrapper.

03How do I install a component?

With the shadcn CLI: register the @lumesec registry once, then run npx shadcn@latest add @lumesec/<name>. The TypeScript source lands in your repository, with shared modules installed once.

04Can the components match my theme?

Yes. Every component reads your shadcn theme variables (--background, --card, --foreground, --border…) plus one set of --lumesec accent tokens, so your colours, fonts and dark mode apply to all of them.

05Do they work with server rendering?

Yes. The React components render their full markup on the server and draw their canvas layers after hydration. The custom elements do not touch the DOM when imported on the server and upgrade in the browser. Both can be imported from Next.js server components.

06Who makes LumeSec Elements?

LumeSec Technologies GmbH, the company behind SecureGrid and the AI Operating Platform. Elements is where its design team publishes the components it builds for those products.

Free · MIT · 211 components

Start with
one component.

Installation guideBrowse all 211