PHPackages                             leuverink/blade-shape-divider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. leuverink/blade-shape-divider

ActiveLibrary[Templating & Views](/categories/templating)

leuverink/blade-shape-divider
=============================

A blade component port of shapedivider.app

3.0.0(4y ago)425673[1 issues](https://github.com/gwleuverink/blade-shape-divider/issues)MITPHPPHP ^8.0.2

Since Aug 16Pushed 3y ago2 watchersCompare

[ Source](https://github.com/gwleuverink/blade-shape-divider)[ Packagist](https://packagist.org/packages/leuverink/blade-shape-divider)[ Docs](https://github.com/gwleuverink/blade-shape-divider)[ RSS](/packages/leuverink-blade-shape-divider/feed)WikiDiscussions master Synced today

READMEChangelog (4)Dependencies (3)Versions (6)Used By (0)

[![Top readme divider](./.github/assets/readme-top-divider.svg?raw=true&sanitize=true "Beautiful full width shape dividers without breaking a sweat. Ain't that tasty?")](./.github/assets/readme-top-divider.svg?raw=true&sanitize=true)

Blade shape divider
===================

[](#blade-shape-divider)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1f3d6555c349ce1d93eba563447f580d9c0d1d38f9a1e78a82ab3a57dce59cd5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c6575766572696e6b2f626c6164652d73686170652d646976696465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/leuverink/blade-shape-divider)

A complete port of [shapedivider.app](https://shapedivider.app) for Laravel Blade

Installation
------------

[](#installation)

Laravel 7.0 or higher is required. You can install the package via composer:

```
composer require leuverink/blade-shape-divider
```

Usage
-----

[](#usage)

```

```

*Just like the original, this component needs to be in a container with `position: relative` in order to work properly.*

### Customization

[](#customization)

Head over to [shapedivider.app](https://shapedivider.app) and create a shape you like. Settings can be passed as props. When you're happy with the shape divider you created, simply copy over it's settings like the example below.

[![shapedivider.app screenshot](./.github/assets/configuratior-schreenshot.png?raw=true "Simply copy over these settings")](./.github/assets/configuratior-schreenshot.png?raw=true)

```

```

You may use any of these divider shapes:

`waves`, `waves-opacity`, `curve`, `curve-asymmetrical`, `triangle`, `triangle-asymmetrical`, `tilt`, `arrow`, `split` & `book`

### Changing divider color

[](#changing-divider-color)

You may pass any valid color code as the `fill` prop. By default the fill is set to `currentColor`, which means the divider inherits the current font color by default. If you want to use a css class to provide the fill color you may do so:

```

```

### Prop defaults

[](#prop-defaults)

Component props have the following defaults. If your shape uses any of the defaults they don't have to be passed as props.

nametypedefaultavailable optionsexample valueshapestring`null` (required)waves, waves-opacity, curve, curve-asymmetrical, triangle, triangle-asymmetrical, tilt, arrow, split & book`shape="waves"`fill`string``currentColor`Accepts any valid color code. Inherits font color by default`fill="rgba(255, 138, 0, 0.7)"`flipboolean`false``true|false``:flip="true"`invertboolean`false``true|false``:invert="true"`positionstring`top``top|bottom``position="bottom"`heightstring`150px`-`height="200px"`widthstring`100%`-`width="260%"`### Changelog

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

Contributing
------------

[](#contributing)

This port should be pretty much complete. Any new features not available in the original [shapedivider.app](https://shapedivider.app) fall outside the scope of this project and will not be merged. Improvements to the API & bugfixes are very welcome :) Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

### Security

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [True Style Design (creators of shapedivider.app)](https://truestyledesign.co.uk)
- [Willem Leuverink](https://github.com/gwleuverink)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~189 days

Total

4

Last Release

1523d ago

Major Versions

1.0.0 → 2.0.02020-09-09

2.0.1 → 3.0.02022-03-09

PHP version history (3 changes)1.0.0PHP ^7.2.5

2.0.0PHP ^7.3

3.0.0PHP ^8.0.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/9531bf1fdbe178d3a5129b81e61b70be81359ebf10ce3f282705a8275b4bd31d?d=identicon)[gwleuverink](/maintainers/gwleuverink)

---

Top Contributors

[![gwleuverink](https://avatars.githubusercontent.com/u/17123491?v=4)](https://github.com/gwleuverink "gwleuverink (36 commits)")

---

Tags

laravelBlade componentblade-shape-dividerShape dividershapedivider.app

### Embed Badge

![Health badge](/badges/leuverink-blade-shape-divider/health.svg)

```
[![Health](https://phpackages.com/badges/leuverink-blade-shape-divider/health.svg)](https://phpackages.com/packages/leuverink-blade-shape-divider)
```

###  Alternatives

[rcrowe/twigbridge

Adds the power of Twig to Laravel

9105.9M50](/packages/rcrowe-twigbridge)[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[moonshine/moonshine

Laravel administration panel

1.3k217.1k59](/packages/moonshine-moonshine)[radic/blade-extensions

Laravel package providing additional Blade extensions: foreach (with $loop data like twig), break, continue, set,array (multiline), etc

271321.7k5](/packages/radic-blade-extensions)[anthonyedmonds/govuk-laravel

Use the GOV.UK Design System within the Laravel ecosystem, complete with Blade components and templates!

127.7k5](/packages/anthonyedmonds-govuk-laravel)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)