Question 1

What are shadcn React background components?

Accepted Answer

shadcn React background components are a collection of 100 free, copy-paste animated backgrounds for React and Next.js — particles, starfields, aurora, matrix rain, mesh gradients, beams, plasma, galaxy, and more. Each shadcn background is a single self-contained TSX file that drops straight into your components folder. Built on shadcn/ui and Tailwind CSS with zero runtime dependencies on shadcn.io, the entire collection is MIT-licensed and free for commercial use forever.

Question 2

Are shadcn backgrounds free?

Accepted Answer

Yes. Every one of the 100 shadcn React background components — from aurora and starfield to matrix rain, plasma, silk, nebula, and galaxy — is free for personal and commercial projects. No account required, no gating, no attribution. The Pro shadcn.io subscription only unlocks premium BLOCKS (hero sections, pricing tables, dashboards). The animated React backgrounds themselves are always free, on every domain, for every use case.

Question 3

How is this different from shadcn/ui?

Accepted Answer

shadcn/ui ships the core primitives (Button, Dialog, Form, Card). shadcn.io backgrounds layer on top: 100 animated React background components that compose with shadcn/ui primitives and your Tailwind CSS tokens. If you're building a landing page with shadcn/ui, drop an or behind your hero section and your shadcn/ui components stack on top with relative z-10.

Question 4

What React background should I pick for a landing page?

Accepted Answer

Safe defaults: Aurora, Mesh Gradient, Silk, or Beams — atmospheric without competing with your headline. For tech and SaaS, Grid Pattern and Dot Pattern are neutral. For sci-fi, pick Starfield, Matrix, or Galaxy. For launch and success moments, Confetti or Fireworks. For premium editorial, try Marble, Ribbons, or Hologram. Every shadcn React background accepts a children prop so your hero copy stacks on top with the correct z-index.

Question 5

How do I install a shadcn React background?

Accepted Answer

Open the background's docs page (for example shadcn.io/background/aurora) and copy the one-line npx shadcn@latest add command. The shadcn CLI writes the background component into components/ui/ (or wherever your components.json points), including the cn helper. Run it once, import the background in your page, wrap your content, ship it. Works with any Next.js or Vite + React project that already has shadcn/ui initialised.

Question 6

How do I put content over a shadcn background?

Accepted Answer

Every shadcn background accepts a children prop that renders inside a relative z-10 layer above the canvas. Typical pattern:

your hero copy

. Clicks, hovers, and focus rings work normally on the children — the animated background is pointer-events disabled. The same composition pattern applies to all 100 React backgrounds in the collection.

Question 7

Can I customise colors and speed on shadcn React backgrounds?

Accepted Answer

Yes. Every shadcn background exposes props for its signature knobs — color, speed, count or density, intensity, scale. Pass any CSS color string to match your Tailwind theme. Every background is plain TSX, so deeper changes (new easing curves, per-particle behaviour, bespoke palettes) are one file edit away. There's no build step, no theme config, no runtime dependency — it's your code once the shadcn CLI adds it.

Question 8

Do shadcn backgrounds support dark mode?

Accepted Answer

Yes. Dark-identity React backgrounds (matrix, neon, warp, starfield, galaxy) bring their own canvas palette. Theme-adaptive backgrounds (aurora, mesh-gradient, dot-pattern, grid-pattern, silk) read from shadcn/ui CSS tokens and the Tailwind dark: variant, inheriting your site's light/dark mode automatically. Pass your own color prop to override the defaults or to match brand colors.

Question 9

Do animated React backgrounds hurt page performance?

Accepted Answer

Not if you pick the right one. CSS-only shadcn backgrounds (aurora, gradient, wavy, light-waves) are GPU-composited with zero runtime cost once mounted. Canvas backgrounds (particles, starfield, matrix, rain) use a single requestAnimationFrame loop per instance and pause automatically when the tab is hidden via document.visibilityState. LCP and INP are typically unaffected because your hero text ships in the initial HTML — the animated React background paints over it after hydration.

Question 10

What's the FPS target for shadcn backgrounds?

Accepted Answer

60fps on a mid-range laptop. On recent phones the default settings hold 45–60fps; on older Android devices, drop the count prop (particles 100→50, starfield 400→200, rain 150→80) for a cleaner run. Every canvas-based shadcn React background uses devicePixelRatio, ResizeObserver, and a visibilitychange pause hook — the perf contract is consistent across all 100 components.

Question 11

Do shadcn backgrounds respect prefers-reduced-motion?

Accepted Answer

Yes. Every shadcn React background checks the OS accessibility setting. Canvas backgrounds render a single settled frame and halt the RAF loop. CSS-only backgrounds halt their keyframes via the @media (prefers-reduced-motion: reduce) query. Users who have disabled motion still see the composition — they just don't see it animate.

Question 12

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

Accepted Answer

Tiny. Each animated background is a single file (~3–10 KB gzipped) with no runtime dependencies beyond react and the cn() helper you already have from shadcn/ui. A handful use motion/react for physics (beams-collision, magnetic-field, metaballs). No three.js, no p5, no shader runtime. Your package.json diff after shadcn add is zero new packages for every one of the 100 backgrounds.

Question 13

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

Accepted Answer

React 19+ and Next.js 16+ are the baseline, with full App Router support. Every shadcn React background is marked "use client" because animation requires the browser. They also work with Vite + React, Remix, Astro islands, and React 18 apps — the components don't depend on React-19-specific hooks. Any framework that can mount a client component can host a shadcn background.

Question 14

Do shadcn backgrounds work with Tailwind v3 AND v4?

Accepted Answer

Both. The utility class names are identical across Tailwind v3 and v4. Backgrounds that read shadcn/ui CSS variables (--background, --foreground, --primary) inherit them the same way in either major version — those tokens live in globals.css regardless of Tailwind config shape. Nothing in the 100 React backgrounds depends on a specific Tailwind file structure.

Question 15

What extra dependencies do shadcn React backgrounds pull in?

Accepted Answer

Minimal. Every shadcn background needs clsx + tailwind-merge (the cn() helper already shipped with shadcn/ui). A subset uses motion/react for physics animation. No three.js, no p5, no WebGL shader runtime — shadcn.io's 100 animated React backgrounds are vanilla 2D Canvas API or pure CSS. If you want WebGL shaders at a higher level, see shadcn.io/shaders.

Question 16

Can I contribute a new shadcn background?

Accepted Answer

Yes. shadcn.io is open-source on GitHub. Open a PR with a new TSX file under packages/background/ following the skill guide at .claude/background.md: JSDoc with @title / @description / @opening / @related / @questions, a named export for the component, and a default export for the demo. The docs MDX, gallery card, and OG screenshot regenerate automatically via the build scripts.

React Background Components.

Every background, grouped by family

Every background. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions