Wave Field

Optional foreground; canvas fills the component and stays pointer-events-none behind content.

Default

Default wave field

default-example.tsx

1import { cn } from "@/lib/utils";
2import { WaveField } from "@/registry/ui";
3import { ReactNode } from "react";
4
5const ExampleShell = ({
6  children,
7  className,
8}: {
9  children: ReactNode;
10  className?: string;
11}) => {
12  return (
13    <div
14      className={cn(
15        "relative min-h-[280px] w-full overflow-hidden rounded-xl border border-border bg-background",
16        className,
17      )}
18    >
19      {children}
20    </div>
21  );
22}
23
24export function WaveFieldDefaultExample() {
25  return (
26    <ExampleShell>
27      <WaveField />
28    </ExampleShell>
29  );
30}

Subtle SaaS

Subtle SaaS wave field

subtle-saas-example.tsx

1import { cn } from "@/lib/utils";
2import { WaveField } from "@/registry/ui";
3import { ReactNode } from "react";
4
5const ExampleShell = ({
6  children,
7  className,
8}: {
9  children: ReactNode;
10  className?: string;
11}) => {
12  return (
13    <div
14      className={cn(
15        "relative min-h-[280px] w-full overflow-hidden rounded-xl border border-border bg-background",
16        className,
17      )}
18    >
19      {children}
20    </div>
21  );
22}
23
24export function WaveFieldSubtleSaaSExample() {
25  return (
26    <ExampleShell>
27      <WaveField color="rgba(255,255,255,0.3)" amplitude={25} speed={0.6} />
28    </ExampleShell>
29  );
30}

More Dynamic

More dynamic wave field

more-dynamic-example.tsx

1import { cn } from "@/lib/utils";
2import { WaveField } from "@/registry/ui";
3import { ReactNode } from "react";
4
5const ExampleShell = ({
6  children,
7  className,
8}: {
9  children: ReactNode;
10  className?: string;
11}) => {
12  return (
13    <div
14      className={cn(
15        "relative min-h-[280px] w-full overflow-hidden rounded-xl border border-border bg-background",
16        className,
17      )}
18    >
19      {children}
20    </div>
21  );
22}
23
24export function WaveFieldMoreDynamicExample() {
25  return (
26    <ExampleShell>
27      <WaveField
28        lineCount={7}
29        amplitude={30}
30        speed={0.7}
31        color="#22d3ee"
32        lineWidth={4}
33        frequency={0.03}
34      />
35    </ExampleShell>
36  );
37}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/wave-field

Props

Name	Type	Default	Description
children	ReactNode	-	Optional foreground; canvas fills the component and stays pointer-events-none behind content.
color	string	#22d3ee	The color of the lines
lineCount	number	6	The number of lines
amplitude	number	40	The amplitude of the lines
frequency	number	0.02	The frequency of the lines
speed	number	1	The speed of the lines
lineWidth	number	1.5	The width of the lines
minDecoHeight	number	280	When there are no children, minimum height (px) of the pattern area. With children, the canvas layer uses the parent box (e.g. min-h-full) and tracks width/height automatically.