Layouts-rc

React component library for layouts.

Inspired by flutter layout widgets.(link)

• Typesafe
• with tailwindcss - 👌
• with CSS in js - 👌
• with css-modules - 👌

Install

npm install layouts-rc

Style apply

import 'layouts-rc/styles.css'; // top
import './globals.css';

Usage

import {
  SlotBaseComp,
  Scaffold,
  ScaffoldHeader,
  ScaffoldBody,
  ScaffoldFooter,
  Row,
  Column,
  Center,
} from 'layouts-rc';

SlotBaseComp

slot: DOCS

<SlotBaseComp asChild>
    <button>button</button>
</SlotBaseComp>

// or

<SlotBaseComp as={"button"}>button</SlotBaseComp>

Rest Component (Scaffold, Column, Row, Center)

Demo

Props

Common props

| Prop | Type | Default | | ------- | ------- | ------- | | as | string | "div" | | asChild | boolean | - |

Row & Column Component props

| Prop | Type | Default | | ------- | ------------------- | ------- | | gap | string|number | - | | justify | css(justifyContent) | - | | items | css(alignItems) | - |