Lite UI | Spacer

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

Spacer

Spacer is used to create spacing between components.

Import

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

Source

components/Spacer.tsx

Examples

Horizontal

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

const App = () => {
  return (
    <div className="flex">
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer x={16}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer x={24}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer x={32}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
    </div>
  );
};

export default App;

Vertical

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

const App = () => {
  return (
    <div>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer y={16}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer y={24}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <Spacer y={32}></Spacer>
      <div className="w-10 h-10 bg-neutral-400"></div>
    </div>
  );
};

export default App;

API

Spacer props

Property	Type	Description	Default
x	number	x-axis spacing.	1
y	number	y-axis spacing.	1

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