Introduction

LumeSec Elements is where the LumeSec design team publishes the components it builds for its own products: controls, meters, dot-matrix displays, and network and service maps. Every component is strict TypeScript. You install it with the shadcn CLI and the source lands in your repository.

What you get#

• Source, not a package. The CLI copies the files into your project. You can read, change and delete any line.
• Two kinds, one standard. Interaction and Pixel UI are native React 19 components styled with Tailwind CSS v4, written like shadcn/ui. Pixel Lab, Pixel HD, Network and Service Map are canvas-heavy custom elements that also run in plain HTML, Vue or Svelte, with a typed React wrapper. Both are strict TypeScript with no any.
• No extra dependencies. React components need React and cn; custom elements need their family's engine (one file). No animation library, no icon set, no UI kit.
• Your theme. Colours and fonts come from your shadcn theme variables, plus one set of --lumesec accent tokens. Light and dark follow your theme.
• Accessible by default. Keyboard support, ARIA roles and live regions, inputs that submit with native forms, and a reduced-motion mode that keeps every number.

How the components behave#

The components share a short list of rules. They came out of design reviews and they are why the effects feel deliberate rather than decorative.

1. Plain until earned. Most states are an ordinary control. The effect switches on for the state that matters: the top effort level, live traffic, a completed upload.
2. Growth has a direction. Effects grow from an origin and travel one way, like a trail growing out of a slider thumb.
3. Legibility beats pixels. Text is never drawn as dots. Numerals, labels and headlines are set in Geist; the dot field glows, fills and reacts around them.
4. Few pixels, meaningful pixels. Density follows the data, logarithmic and capped. If a frame looks busy, it is halved.
5. One accent moment per component. Electric marks the one thing that matters. Primary buttons use the foreground colour.
6. Numbers are mechanical. Rates, counts, IDs and times use a monospace face with tabular figures.

Collections#

Free, and later Pro#

Every component on this site is free under the MIT license, for personal and commercial work. Larger templates and composite blocks will follow as Elements Pro. The free components stay free.