Wave

Backgrounds

About

A wave

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wave to your project and fits it to your theme.

Code

How Wave is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Wave from "@/components/ui/wave"

export function Demo1() {
    return (
        <div className="relative w-full h-48">
          <Wave fill="#fff" />
        </div>
    );
}

export function Demo2() {
    return (
        <div className="relative w-full h-48">
          <Wave fill="#fff0" stroke="#fff" neon neonClipped />
        </div>
    );
}