Divider

A divider is a visual element used to create a separation or divide between sections, content or components within a user interface.

Overview

pie-divider is a Web Component built using the Lit library. It offers a simple and accessible divider component for web applications.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.

To install pie-divider in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-divider

# yarn
$ yarn add @justeattakeaway/pie-divider

Prop	Options	Description	Default
variant	`"default"` `"inverse"`	Which variant of the divider to use.	`"default"`
orientation	`"horizontal"` `"vertical"`	Which orientation of the divider to use.	`"horizontal"`

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-divider'

<!-- pass js file into <script> tag -->
<pie-divider></pie-divider>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import { PieDivider } from '@justeattakeaway/pie-divider';

<pie-divider></pie-divider>

For React Applications:

// React templates (using Next 13)
import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';

<PieDivider></PieDivider>