Lite UI | Divider

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

Divider

Divider is used as a line to separate sections within a page.

Import

import { Divider } from '@ma9pie/lite-ui';

Source

components/Divider.tsx

Examples

Margin y

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore velit maxime blanditiis aut quasi, totam error illum consequatur nesciunt beatae ut consequuntur excepturi adipisci minus recusandae eligendi ipsam sint nemo?

import { Divider } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore velit
        maxime blanditiis aut quasi, totam error illum consequatur nesciunt
        beatae ut consequuntur excepturi adipisci minus recusandae eligendi
        ipsam sint nemo?
      </p>
      <Divider y={24}></Divider>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore velit
        maxime blanditiis aut quasi, totam error illum consequatur nesciunt
        beatae ut consequuntur excepturi adipisci minus recusandae eligendi
        ipsam sint nemo?
      </p>
      <Divider y={24}></Divider>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore velit
        maxime blanditiis aut quasi, totam error illum consequatur nesciunt
        beatae ut consequuntur excepturi adipisci minus recusandae eligendi
        ipsam sint nemo?
      </p>
    </div>
  );
};

export default App;

Size

import { Divider } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col gap-4">
      <Divider size={1}></Divider>
      <Divider size={2}></Divider>
      <Divider size={3}></Divider>
      <Divider size={4}></Divider>
    </div>
  );
};

export default App;

Color

import { Divider } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col gap-4">
      <Divider color="#ef4444"></Divider>
      <Divider color="#eab308"></Divider>
      <Divider color="#22c55e"></Divider>
      <Divider color="#3b82f6"></Divider>
      <Divider color="#8b5cf6"></Divider>
    </div>
  );
};

export default App;

Dashed

import { Divider } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col gap-4">
      <Divider dashed strokeDasharray={1}></Divider>
      <Divider dashed></Divider>
      <Divider dashed strokeDasharray={3}></Divider>
      <Divider dashed strokeDasharray={4}></Divider>
      <Divider dashed strokeDasharray={5}></Divider>
    </div>
  );
};

export default App;

API

Divider props

Property	Type	Description	Default
y	number	Margin value in y-axis direction.	0
size	number	Thickness of line.	1
color	string	Color of line.	"black"
dashed	boolean	Dashed style line.	false
strokeDasharray	number \| string	Dashed spacing of line.	2

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on