Diagonal Section Divider

Place it between two sections with different background colors to get a natural boundary transition drawn as an SVG shape (slant, wave, zigzag, or curve). It supports vertical flipping, horizontal mirroring, and a two-tone layered look, and it reveals with a soft slide-up fade in when it enters the viewport.

Loading preview…

npx shadcn@latest add https://webberui.com/r/diagonal-section-divider.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Divider shapevariant

Shape fill (next section's background)color

Heightheight

Flip verticallyflip

Two-color stacklayered

Layer opacitylayerOpacity

0.35

<DiagonalSectionDivider />

Installation

npx shadcn@latest add https://webberui.com/r/diagonal-section-divider.json

Or, once registries are configured in components.json, install it as @webberui/diagonal-section-divider.

Usage

Set the divider's bg-* to the background color of the previous section and its text-* (which is the currentColor fill) to the background color of the next section, and the boundary becomes completely seamless:

import { DiagonalSectionDivider } from "@/components/ui/diagonal-section-divider";

<section className="bg-neutral-100 dark:bg-neutral-900">Previous section</section>

<DiagonalSectionDivider
  variant="wave"
  layered
  height={72}
  className="bg-neutral-100 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100"
/>

<section className="bg-neutral-900 dark:bg-neutral-100">Next section</section>

Props

Prop	Type	Default	Description
`variant`	`"slant" \| "wave" \| "zigzag" \| "curve"`	`"slant"`	Divider shape: slant, wave, zigzag, or curve
`color`	`string`	`"currentColor"`	Shape fill, usually set to the next section's background color; defaults to currentColor so a `text-*` class can control it and support light and dark mode
`height`	`number`	`80`	Height of the divider block (px)
`flip`	`boolean`	`false`	Vertical flip: the shape bites downward instead, suited to sitting at the top of a section
`flipX`	`boolean`	`false`	Horizontal mirror: reverses the direction of asymmetric shapes such as slant and wave
`layered`	`boolean`	`false`	Whether to add a second color block offset upward, for a two-tone sense of depth
`layerColor`	`string`	same as `color`	Fill of the second layer (rendered semi-transparent via `layerOpacity`)
`layerOpacity`	`number`	`0.35`	Opacity of the second layer (0–1)
`layerOffset`	`number`	`12`	Upward offset of the second layer (in viewBox 0–120 coordinates)
`animated`	`boolean`	`true`	Whether to play the slide-up fade in when it enters the viewport
`className`	`string`	—	Forwarded to the outermost container; this is usually where you set the background and text colors

Accessibility

The divider is decorative only, so the outer container is marked aria-hidden="true" and role="presentation" and assistive technology skips it entirely
When the user has "reduce motion" enabled at the system level, the reveal duration drops to zero and the final state is shown directly
The container has pointer-events-none, so it never intercepts clicks or becomes a keyboard focus target
The shapes are drawn as vector SVG (preserveAspectRatio="none"), so they scale to any width or height without loss of quality and contain no text