FAQ

Is it free?#

Yes. Every component on this site is free under the MIT license, including for commercial work. Attribution is welcome and not required.

Do I need React?#

For Interaction and Pixel UI, yes: they are native React 19 components. Pixel Lab, Pixel HD, Network and Service Map are custom elements that run in plain HTML through the CDN modules, or in Vue, Svelte or Angular, and ship with a typed React wrapper for React projects. See Plain HTML.

Do I need Tailwind CSS?#

For the React components, yes, Tailwind CSS v4 as set up by shadcn init. They are styled with utility classes on your theme tokens, like shadcn/ui. The custom elements style themselves inside their shadow roots and need no CSS framework.

Is everything TypeScript?#

Yes. Every file the CLI installs is strict TypeScript: no any, no @ts-ignore. The custom elements register their tags in HTMLElementTagNameMap, so document.querySelector and refs are typed with their properties and methods.

Does it work with server rendering?#

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

How large is a component?#

A React component is one file of a few hundred lines plus small shared modules (colour reading, motion, sparks) that every component reuses. A custom element and its engine are typically 10 to 30 KB minified, before compression; components from the same family share the engine, so the second one costs only its own file.

Which browsers are supported?#

Current versions of Chrome, Edge, Firefox and Safari. The components use canvas 2D, ResizeObserver, IntersectionObserver and the Web Animations API; the custom elements also use shadow DOM and ElementInternals for form controls.

Some components show data I didn't provide.#

Components such as the network topology or the service map ship with a demo data set for one site so that they run on their own. Their pages list which attributes select a record. To connect real data, edit the typed data in the engine file or set the records from your code; the source is yours.

How do I change the colours?#

Change your shadcn theme, or the --lumesec accent tokens. To restyle only the custom elements, set their --ui-* overrides. See Theming.

What will Elements Pro be?#

Templates and composite blocks built from these components, such as a network operations console or an AI workspace. Pro items will need a licence key; the free components will stay free. Create an account to hear when it opens.

Who makes this?#

LumeSec Technologies GmbH. LumeSec builds SecureGrid and the AI Operating Platform. Elements is where the design team publishes the components it builds along the way.

Where do I report a problem?#

Use Report an issue on any page, or open an issue on GitHub.