Wave Separator

Component 7

About

A zig-zag divider drawn by masking a solid color with a repeating inline SVG, so it inherits currentColor in light and dark mode and costs no image request. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

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

Code

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

Usage.tsx

import WaveSeparator from '@/components/ui/wave-separator';

export default function WaveSeparatorDemo() {
	return (
		<div className="flex w-full max-w-md flex-col gap-8 p-8">
			<p className="text-sm text-zinc-500">A section of the page.</p>
			<WaveSeparator />
			<p className="text-sm text-zinc-500">The next one.</p>
			<WaveSeparator size={12} className="text-emerald-600/40" />
			<p className="text-sm text-zinc-500">Bigger, and in another color.</p>
		</div>
	);
}