Table of Contents

• What is React Algo?
• How it works
• Requirements
• Quick Start
• CLI Commands
• Usage Example
• Contributing
• License

What is React Algo?

React Algo is an open source collection of animated canvas backgrounds for React. Each background is a self-contained renderer — you get the full source directly in your project with no runtime npm dependency.

How it works

Inspired by shadcn/ui: instead of importing from a package, the CLI copies the component source files into your own project. You can read, edit, and extend them freely.

Requirements

• React >=18.0.0

No other runtime dependencies. Components use only React and browser APIs (canvas, requestAnimationFrame, ResizeObserver).

Quick Start

npx react-algo add wave-ether

This copies the component files into components/backgrounds/ in your project.

CLI Commands

npx react-algo list                       # Browse all available backgrounds
npx react-algo info <id>                  # See files and description
npx react-algo add <id>                   # Install a component
npx react-algo add <id> --force           # Overwrite existing files
npx react-algo add <id> --dry-run         # Preview which files would be written
npx react-algo update <id>                # Re-fetch a component (with confirmation)
npx react-algo add background-studio      # Install all components + the studio playground

Usage Example

import { WaveEther } from "./components/backgrounds/WaveEther";

export default function Hero() {
  return (
    <div style={{ position: "relative", height: "100vh" }}>
      <WaveEther style={{ position: "absolute", inset: 0 }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        {/* your content */}
      </div>
    </div>
  );
}

Run npx react-algo info <id> to see all available props for any component.

Contributing

React Algo is always open to improvements and contributions. Check the Open Issues if you want to contribute, or open a new one to add your own improvements/ideas. Before contributing, please read the Contribution Guide.

License

MIT + Commons Clause