Lite UI | Flex

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

const App = () => {
  return (
    <Flex>
      <Flex className="h-10 bg-neutral-300" flex={3}></Flex>
      <Flex className="h-10 bg-neutral-400" flex={4}></Flex>
      <Flex className="h-10 bg-neutral-500" flex={5}></Flex>
    </Flex>
  );
};

export default App;

Wrap

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

const App = () => {
  return (
    <Flex gap={8} wrap="wrap">
      {Array(16)
        .fill(null)
        .map((_, idx) => (
          <div key={idx} className="w-10 h-10 bg-neutral-400"></div>
        ))}
    </Flex>
  );
};

export default App;

Col

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

const App = () => {
  return (
    <Flex col>
      <Flex className="w-1/3 h-10 bg-neutral-300"></Flex>
      <Flex className="w-1/3 h-10 bg-neutral-400"></Flex>
      <Flex className="w-1/3 h-10 bg-neutral-500"></Flex>
    </Flex>
  );
};

export default App;

Gap

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

const App = () => {
  return (
    <Flex gap={32} wrap="wrap">
      <div className="w-10 h-10 bg-neutral-400"></div>
      <div className="w-10 h-10 bg-neutral-400"></div>
      <div className="w-10 h-10 bg-neutral-400"></div>
    </Flex>
  );
};

export default App;

Justify

start

end

center

between

evenly

import { Flex } from '@ma9pie/lite-ui';
import React, { ReactNode } from 'react';

const App = () => {
  return (
    <Flex col gap={16}>
      <Container title="start">
        <Flex justify="start" gap={8}>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="end">
        <Flex justify="end" gap={8}>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="center">
        <Flex justify="center" gap={8}>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="between">
        <Flex justify="between" gap={8}>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="evenly">
        <Flex justify="evenly" gap={8}>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
        </Flex>
      </Container>
    </Flex>
  );
};

export default App;

const Container = ({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) => {
  return (
    <div className="flex flex-col gap-2 p-4 border border-solid border-neutral-300 rounded">
      <p>{title}</p>
      {children}
    </div>
  );
};

Items

start

center

end

import { Flex } from '@ma9pie/lite-ui';
import React, { ReactNode } from 'react';

const App = () => {
  return (
    <Flex col gap={16}>
      <Container title="start">
        <Flex items="start" gap={8}>
          <div className="w-6 h-6 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-14 h-14 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="center">
        <Flex items="center" gap={8}>
          <div className="w-6 h-6 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-14 h-14 bg-neutral-400"></div>
        </Flex>
      </Container>

      <Container title="end">
        <Flex items="end" gap={8}>
          <div className="w-6 h-6 bg-neutral-400"></div>
          <div className="w-10 h-10 bg-neutral-400"></div>
          <div className="w-14 h-14 bg-neutral-400"></div>
        </Flex>
      </Container>
    </Flex>
  );
};

export default App;

const Container = ({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) => {
  return (
    <div className="flex flex-col gap-2 p-4 border border-solid border-neutral-300 rounded">
      <p>{title}</p>
      {children}
    </div>
  );
};

API

Flex props

Property	Type	Description	Default
flex	number	CSS flex properties.	-
wrap	wrap \| wrap-reverse \| nowrap	CSS flex-wrap properties.	-
col	boolean	Properties for whether the flex direction is vertical or not.	-
gap	number \| string	Spacing between elements.	-
justify	start \| end \| center \| between \| evenly	CSS justify-content properties.	-
items	start \| end \| center	CSS align-items properties.	-

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