Shape Divider React component
SVG dividers that shape the edge between two sections: waves that drift in a seamless loop, a curve, a tilt, a peak, a zigzag or steps, layered in up to three tones, at the top or bottom of a section and mirrored if you like.
When to use the Shape Divider component
Use Shape Divider to soften the boundary between two differently coloured sections of a landing page, usually below the hero or above the footer.
One or two per page is plenty; set its colour to the neighbouring section's background so the shape reads as part of that section.
Installation
Add the Shape Divider component to your project with the shadcn CLI. It lands in components/shape-divider.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/shape-divider.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ShapeDivider /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| shape | "wave" | "curve" | "tilt" | "triangle" | "zigzag" | "steps" | "wave" |
| position top: hangs from the top edge of a section. bottom: sits on the bottom edge. | "top" | "bottom" | "bottom" |
| flip Mirror it left to right. | boolean | false |
| height | number | 96 |
| color Fill colour; match it to the section the shape grows out of. | string | "#F5F4F1" |
| layers Extra softer copies behind the main shape (1 to 3 in total). | 1 | 2 | 3 | 3 |
| animated Waves drift sideways in a seamless loop. | boolean | true |
| speed Seconds for one loop of the drift. | number | 14 |
| className | string | — |
- shape"wave" | "curve" | "tilt" | "triangle" | "zigzag" | "steps"Default: "wave"
- position
top: hangs from the top edge of a section. bottom: sits on the bottom edge.
"top" | "bottom"Default: "bottom" - flip
Mirror it left to right.
booleanDefault: false - heightnumberDefault: 96
- color
Fill colour; match it to the section the shape grows out of.
stringDefault: "#F5F4F1" - layers
Extra softer copies behind the main shape (1 to 3 in total).
1 | 2 | 3Default: 3 - animated
Waves drift sideways in a seamless loop.
booleanDefault: true - speed
Seconds for one loop of the drift.
numberDefault: 14 - classNamestring
FAQ
- How do I make it match my sections?
- Put it at the bottom of the upper section and set color to the lower section's background (or use position="top" at the top of the lower section with the upper colour).
- Does the wave animation loop cleanly?
- Yes. Waves are drawn over twice the width with whole periods and slide by exactly one width per loop, so the start and end match. Reduced motion keeps them still.
- Will it stretch on wide screens?
- It's an SVG set to stretch to the full width at the height you choose, so it fits any screen without images.
