Question 1

What are shadcn React shader components?

Accepted Answer

shadcn React shader components are a collection of 57 copy-paste WebGL shader components for React and Next.js — aurora, plasma, nebula, matrix, hologram, glitch, ripple, waves, and more. Each shadcn shader is a single self-contained TSX file wrapping a GLSL fragment shader that runs directly on the GPU. Built on shadcn/ui and Tailwind CSS with a single lightweight runtime dependency (`react-shaders`), every shader drops straight into your components folder.

Question 2

Are shadcn shaders free?

Accepted Answer

10 of the 57 shaders are always free — aurora, plasma, nebula, matrix, gradient-mesh, noise, waves, glitch, hologram, and ripple. The remaining 47 WebGL shaders are part of the shadcn.io Pro subscription, alongside 6,000+ premium blocks (heroes, pricing tables, dashboards). Free or paid, every shader installs via the same shadcn CLI command and works in any React or Next.js project.

Question 3

How is a React shader different from a React background?

Accepted Answer

Backgrounds are 2D canvas / CSS animations that run on the CPU. React shaders run GLSL fragment shaders on the GPU via WebGL — which means pixel-perfect per-fragment math (raymarching, noise fields, fractal generators, post-processing) at high resolution with no CPU overhead. If you need a procedurally generated visual that would be slow or impossible to do in canvas, reach for a shader. If a gentle gradient or particle drift is enough, a background component is lighter.

Question 4

What shader should I pick for a landing page?

Accepted Answer

Safe atmospheric picks: Aurora, Plasma, Gradient Mesh, Nebula. For tech / sci-fi: Matrix, Hologram, Glitch, Cosmic Waves. For premium editorial: Marble-like Waves, Mobius Sierpinski, Accretion. For subtle texture: Noise, Soap Bubbles 2D, Warped Noise. Every shadcn shader accepts children-friendly styling so your hero copy stacks on top with `relative z-10`.

Question 5

How do I install a shadcn React shader?

Accepted Answer

Open the shader's docs page (for example shadcn.io/shaders/aurora) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the shader component into `components/shaders/` (or wherever your components.json points), pulls in `react-shaders` as a dependency, and includes the `cn` helper. Import the component, give it a sized parent, ship it.

Question 6

How do I put content over a shadcn shader?

Accepted Answer

Put the shader in an absolutely positioned layer and your content in a `relative z-10` sibling. Typical pattern: `

your hero

`. The shader canvas is pointer-events friendly — clicks, hovers, and focus rings on the children work normally.

Question 7

Can I customise colors and speed on shadcn React shaders?

Accepted Answer

Yes. Every shadcn shader exposes numeric uniforms — speed, intensity, vibrancy, frequency, scale, and effect-specific knobs — as typed props. Pass different values to change the look without touching the GLSL. Deeper edits (new noise functions, palette tweaks, alternate tone mapping) are one file edit away — the shader source is inlined as a template literal right above the component.

Question 8

Do shadcn shaders support dark mode?

Accepted Answer

Shaders are GPU-generated — their palette comes from the GLSL, not your site's light/dark theme. Most shaders (aurora, nebula, matrix, hologram) are dark-identity effects that look striking on both light and dark pages. If you need a theme-adaptive shader, tune the palette uniforms (color, vibrancy) with a `dark:` variant class on the wrapper and feed different uniform values via a hook.

Question 9

Do WebGL shaders hurt page performance?

Accepted Answer

Not if you size them correctly. shadcn React shaders run on the GPU, so even full-viewport fragment shaders typically hold 60fps on a modern laptop. LCP and INP are unaffected because hero text ships in the initial HTML — the shader canvas paints over it after hydration. Avoid stacking multiple shaders on the same page and cap per-shader height (e.g. 60vh) on mobile.

Question 10

What's the FPS target for shadcn shaders?

Accepted Answer

60fps on a modern laptop with integrated graphics. On recent phones, most shaders hold 45–60fps at the default prop values; heavy effects (raymarching, fractal noise, multi-octave distortion) benefit from lowering frequency / iterations. Every shader exposes numeric props so you can dial complexity down for mobile without forking the code.

Question 11

Do shadcn shaders respect prefers-reduced-motion?

Accepted Answer

The shader canvas itself always paints a single frame even when animation is paused. For stricter reduced-motion support, wrap the shader in a media query and conditionally render a static fallback (the first frame) — the shader accepts `speed={0}` as a way to freeze the frame without changing the visual.

Question 12

How big is the JS bundle impact of a shadcn shader?

Accepted Answer

Each shader is a single TSX file (~2–6 KB gzipped) that imports from `react-shaders` (a thin ~12 KB wrapper over WebGL). That's the only runtime dependency you pick up beyond React and `cn()`. No three.js, no p5, no shader-language compiler at runtime — GLSL strings compile once on mount. A page with multiple shaders shares the same `react-shaders` bundle.

Question 13

Which React and Next.js versions do shadcn shaders support?

Accepted Answer

React 19+ and Next.js 16+ are the baseline, with full App Router support. Every shadcn React shader is marked "use client" because WebGL requires the browser. They also work with Vite + React, Remix, Astro islands, and React 18 apps. Any framework that can mount a client component can host a shadcn shader.

Question 14

Do shadcn shaders work with Tailwind v3 AND v4?

Accepted Answer

Both. The shader container uses a handful of utility classes (`w-full h-full`, container sizing, absolute positioning) that are identical across Tailwind v3 and v4. Nothing in the 57 React shaders depends on a specific Tailwind config shape — they ship plain utility classes that work anywhere Tailwind is installed.

Question 15

What extra dependencies do shadcn React shaders pull in?

Accepted Answer

One: `react-shaders`. It's a small wrapper that mounts a canvas, compiles GLSL, and feeds uniforms from React props. No three.js, no p5, no Babel plugin — just vanilla WebGL. You already have `clsx + tailwind-merge` (the `cn()` helper from shadcn/ui). If you want pure 2D canvas or CSS effects without WebGL, see shadcn.io/background.

Question 16

Can I contribute a new shadcn shader?

Accepted Answer

Yes. shadcn.io is open-source on GitHub. Open a PR with a new TSX file under `packages/shaders/` using the same JSDoc pattern as the existing shaders: `@title / @description / @opening / @credit / @related / @questions`, a named export plus a default demo. The docs MDX, gallery card, and OG screenshot regenerate automatically via the build scripts.

React WebGL Shader Components.

Every shader, grouped by family

Every shader. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions