ReactBDBG

Docs

How to use ReactBD BG

Browse the library, select a background to preview it on the hero, then copy a Tailwind/JSX snippet or a CSS snippet. Open studio for an extended view. Animated backgrounds include the keyframes they need.

1. Find a background

Use the sidebar categories, the search field, or the command palette (⌘K). Filter by light or dark tone when you already know the surface. Favorites stay in this browser only.

2. Select and open studio

Click a card to preview it. The page scrolls to the hero so you can judge the background on a real heading, same as a landing page. The card stays highlighted, and a bottom badge keeps copy, studio, and clear actions. Click the same card again to clear.

Type contrast follows the canvas: dark type on light patterns, light type on dark patterns, in both app themes. Open studio for an extended view with snippet and related backgrounds. Use Pause motion, or rely on prefers-reduced-motion, to stop playback.

3. Copy Tailwind

Tailwind copies a JSX fragment. Paste it as a page shell, then put your content in a relative layer above the background.

<div className="min-h-screen w-full relative">
  <div className="absolute inset-0 z-0" style={{ /* snippet */ }} />
  <main className="relative z-10">{/* your UI */}</main>
</div>

4. Copy CSS

CSS copies class-based markup plus the declarations. Animated backgrounds also include @keyframes and, for spotlight masks, @property --x.

.reactbd-bg { min-height: 100vh; position: relative; }
.reactbd-bg__layer { position: absolute; inset: 0; z-index: 0; }
.reactbd-bg__content { position: relative; z-index: 1; }

5. Animated backgrounds

Motion names used in this library: aurora, crystal-shimmer, spotlight, reactbd-drift, reactbd-orbit, reactbd-pulse, reactbd-sheen. Cards tagged Motion play those keyframes in studio.

Keyboard

  • ⌘K / Ctrl KOpen search
  • EscClear the selected background
  • HeartSave a favorite in this browser
  • PauseStop background motion