Blade Shape Divider Laravel Package

Getting Started

Install the package and pull in the config/views so you can see what it ships with:

composer require gwleuverink/blade-shape-divider
php artisan vendor:publish --provider="Gwleuverink\BladeShapeDivider\BladeShapeDividerServiceProvider"

Pin the major version to your framework. 3.0.0 is the Laravel 9 line; 2.x is what you want on Laravel 8. The 3.0.0 release notes are a single line — "adds support for Laravel 9" — which in practice means the major bump is the framework/PHP constraint change, not a feature. Check composer.json's illuminate/* and php constraints before assuming a smooth install, and don't let ^2 drift to ^3 on a Laravel 8 app.

First places to look once it's installed:

• config/shape-divider.php (or similarly named) — the list of available shape names. This is your source of truth for what you can pass to the component.
• resources/views/vendor/blade-shape-divider/ — the published Blade view(s). Read the SVG markup once; it tells you exactly how fill, height, and flip/invert are wired.
• The README's component examples for the exact tag name (it's a Blade component, so it will be <x-shape-divider ... /> or an equivalent @ directive).

The canonical first use case: a full-bleed divider between a hero and the next section so the background colors interlock.

<section class="bg-indigo-600 text-white">
    <h1>Hero</h1>
</section>

<x-shape-divider shape="waves" class="text-white" />

<section class="bg-white">
    <h2>Content</h2>
</section>

Get one rendering on a throwaway page before you wire it into a layout — the divider's visual result depends on the surrounding section's background and text color, so you need both sections present to judge it.

Implementation Patterns

Two dividers per section. The common pattern is a divider at the bottom of one section and the flipped version at the top of the next, or a single invert-ed divider straddling the seam. Because the component renders an inline SVG whose fill follows the color you give it, set the fill to the adjacent section's background:

<section class="bg-slate-900 pb-0">
    <div class="mx-auto max-w-3xl">…</div>
    <x-shape-divider shape="waves" class="text-white" />
</section>

<section class="bg-white">…</section>

Theme via currentColor. In practice you want the SVG fill to resolve to currentColor and control it with a Tailwind text utility (class="text-white"). That keeps the divider themable from the section it lives in, and it means a dark-mode swap is just dark:text-slate-900. If the published view hardcodes a fill attribute, override it once in the published view rather than passing a color prop every call site.

Alternate direction between sections. Use flip (horizontal mirror) and invert (vertical mirror) to alternate between adjacent sections so the seams don't all lean the same way. Treat shape + flip + invert as the three coordinates of a "direction" and keep a small local mapping in a Blade partial so designers aren't guessing which combination they need.

Wrap in a partial or layout component. Rather than sprinkling <x-shape-divider> calls through page markup, wrap it in an app-level <x-section-divider :from="…" :to="…"> that encapsulates the flip/invert logic and the negative margin. This is the single best integration tip: the raw component is a building block, not a layout primitive.

Stack a "seam" component. For a section that needs the same shape at top and bottom, render the divider once above with invert and once below with the normal orientation, mirroring the color each time. Keep both on the same shape/height so the vertical rhythm is symmetric.

Custom shapes. If the config exposes a shapes array, add your own path data there (or publish and copy the view into resources/views/components/) rather than editing vendor files. Treat the package's built-in shapes as presets and your additions as first-class so future composer update doesn't clobber them.

Gotchas and Tips

3.0.0 is a compatibility release, not a feature release. The only documented change is Laravel 9 support, and it shipped as a major bump — read that as "the framework constraints moved," so the breaking change is in composer.json, not the API. Practical consequences: no new shapes, no new props, no bug fixes to the SVG output. Everything below about positioning, accessibility, and theming still holds for 3.x exactly as it did for 2.x. If you were on 2.x and everything already worked, there is no functional reason to upgrade beyond wanting Laravel 9.

The component API changed little to nothing across the bump — but verify registration once. Because 3.0.0 is a constraint-level change, the service provider and Blade component auto-registration should be what you had before. Still render one divider on your actual Laravel 9 / PHP version before depending on it. If it doesn't register cleanly, the fix is usually re-registering the component manually via Blade::component(...) in a service provider, and that's cheap.

Still a small package with a thin community safety net. The 3.0.0 bump signals the maintainer is alive, but the release is narrow support for a framework version that is itself now old. Budget for reading the source. It's a small package; you can read the whole thing in an afternoon. There is no upstream actively fixing visual bugs for you.

Positioning is the real pitfall, not the SVG. The SVG's viewBox scales the shape to the container width while height controls the rendered band. If the divider sits in flow, it introduces a gap or an overlap depending on the shape's preserveAspectRatio. The reliable approach is block w-full with an explicit height and, where you need it flush, a small negative margin on the section above or below. If a shape looks "floating" or "clipped," check preserveAspectRatio in the published view before touching anything else.

preserveAspectRatio="none" distorts the shape. It's sometimes used to force full-width stretch, and it makes circles/curves look wrong at wide viewports. Prefer a shape whose viewBox aspect ratio matches your target band height, or accept the crop.

Height and color are coupled at build time, not responsive by default. If the package bakes a fixed height into the SVG, you'll need a media query in the published view or a wrapper class to change band height on mobile. Very tall dividers on phones eat vertical space; short dividers can look like a hard seam.

Decoration needs aria-hidden. Dividers are decorative. Confirm the published view sets aria-hidden="true" and focusable="false" on the <svg>; if not, add it. It's the easiest accessibility win and it prevents screen readers from announcing an empty graphic.

Config cache will bite you. If shapes come from config/shape-divider.php, adding a shape in production requires php artisan config:cache again. Symptom: "shape exists locally, renders blank on staging." Clear and recache. Note this is now the most likely failure mode after a 2.x → 3.x upgrade too: stale config cache from the old package version.

Dark mode and section transitions. Because fill follows currentColor, a Tailwind text-white dark:text-slate-900 on the divider element (not the section) is what the SVG actually inherits. If you put the color utility on the section, the divider may inherit the wrong color from a nested element. Put the utility on the component's own class.

Extension points, in order of stability: published views (safe), config shapes (safe), subclassing/wrapping the component (safe), editing the source provider (never). If you find yourself editing vendor/, your needs have outgrown the package — forking is a reasonable and low-risk option for a package this small.