# Introduction > Interactive components from the LumeSec design lab, published as a shadcn registry. Install one, read the source, ship it. Source: https://elements.lumesec.ai/docs 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. Register the registry once and add your first component. 211 components in six collections, all running live. Controlled and uncontrolled state, typed callbacks, ref handles. Your shadcn theme plus one `--lumesec` accent drives every component. ## 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 | Collection | Components | Kind | What it covers | | -------------------------------------- | ---------- | -------------- | ------------------------------------------------------------------------------ | | [Interaction](/components/interaction) | 11 | React | Micro-interactions on everyday controls, including the Ultracode slider | | [Pixel Lab](/components/pixel-lab) | 50 | Custom element | Components that live in a pixel lattice: meters, gauges, radars, model moments | | [Pixel UI](/components/pixel-ui) | 30 | React | Form controls you can ship, each with one pixel detail | | [Pixel HD](/components/pixel-hd) | 60 | Custom element | Regular controls on a fine dot field with bloom and ordered dither | | [Network](/components/network) | 30 | Custom element | Topology, devices, traffic and security, with traffic as the only pixels | | [Service Map](/components/service-map) | 30 | Custom element | Hosts, ports, services and routes, with requests as pixels | ## 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.