Installation

Honest UI shaders are available from the honestui/shaders package entry point. They remain part of the honestui package dependency rather than being copied by the component CLI.

• Node.js 20.18.1 or later.
• React 19.
• Browser rendering with WebGL for the effect.
• A parent with an explicit height or aspect ratio.

Import shader components from the dedicated entry point. Shader layout is expressed with Tailwind utilities, so there is no separate shader stylesheet to import.

import { LightRays } from "honestui/shaders"

Shader canvases fill their parent. Give the parent a size and a static background that remains acceptable while the effect loads or when WebGL is unavailable.

<div className="relative h-80 overflow-hidden rounded-xl bg-slate-950">
  <LightRays className="size-full" />
</div>

Keep meaningful content in a separate HTML layer so it remains available without the canvas.

Shader components include the "use client" directive and run in the browser. In server-rendered frameworks, keep data fetching, headings, controls, and essential status outside the shader component.

Every shader automatically renders a static frame when the user enables reduced motion. You can also set paused to stop animation for an application-specific reason. Avoid mounting several full-viewport shaders at once, test the intended device range, and confirm that the static background still supports the content.