# Installation

> Install Honest UI shaders and provide sizing, motion, and WebGL fallbacks.

Source: https://www.honestui.com/docs/shaders/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.

## Requirements [#requirements]

* 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.

## Install [#install]

<CommandBlock commands="[&#x22;honestui&#x22;]" />

## Import a shader [#import-a-shader]

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

```tsx
import { LightRays } from "honestui/shaders"
```

## Size the container and add a fallback [#size-the-container-and-add-a-fallback]

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.

```tsx
<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.

## Client rendering [#client-rendering]

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.

## Motion and performance [#motion-and-performance]

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.