yarn add @haechi/flexile

Easy layout for React. Easy flex layout without css, just write with simple component props. Inspired by Figma Auto Layout.

import { styled } from "@stitches/react";
import { Hexile } from "./flexile";

const Box1 = styled("div", {
  backgroundColor: "#ED6F6F",
  width: "100px",
  height: "100px",

const Box2 = styled("div", {
  backgroundColor: "#6FA9ED",
  width: "100px",
  height: "200px",

export const Example = () => (
  <Hexile gap={1} padding={1} y="center" x="space">
    <Box1 />
    <Box2 />

How to use

Use Vexile(Vertical Layout), Hexile(Horizontal Layout) instead of Flex Container. and just write flex attributes as component props.

gap / space


⚠️Unit of gap / padding is rem⚠️

gap is for setting space between children
padding is for setting padding of Flexile container

x / y


The way how children would be aligned.

x: left, right, center, space (Vexile only)
y: bottom, top, center, space (Hexile only)

fillx / filly

<Hexile fillx filly>

fill parent. that’s it.


<Vexile linebreak>

sams as flex-wrap: wrap. Break line when inner space is not enough.


View Github