Components
Wave Separator
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.
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>
);
}