Zigzag Divider

A full-width zigzag divider rendered as an SVG polygon. Use it to separate sections with a saw-tooth edge in any flat color.

Preview

<script>
  import { ZigzagDivider } from '@vultra/flat';
</script>

<div class="bg-white">
  <ZigzagDivider color="blue" height="32px" />
</div>
<div class="h-24 bg-[var(--flat-blue)]"></div>

Usage

<script>
  import { ZigzagDivider } from '@vultra/flat';
</script>

<ZigzagDivider color="teal" height="24px" />

Props

Prop	Type	Default	Description
color	'red' \| 'blue' \| 'green' \| 'purple' \| 'pink' \| 'orange' \| 'teal'	'blue'	Divider color
height	string	'24px'	Divider height
class	string	undefined	Additional CSS classes

Install

npx @vultra/cli add flat-zigzag-divider