Layouts-rc

Github

Scaffold

Live code

 <Scaffold className="h-[600px] w-[400px] text-2xl font-semibold">
  <ScaffoldHeader className="border-4 border-slate-200/75 px-4 py-2">
    Header (try remove)
  </ScaffoldHeader>
  <ScaffoldBody>
    <div className="relative h-[1200px] bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
      <h3 className="sticky top-0 bottom-auto px-4 py-2 border-4 border-transparent">
        Body
      </h3>
      <div className="py-2 text-3xl text-center mt-32 space-y-2 select-none">
        <div>Scroll down</div>
        <div></div>
      </div>
    </div>
  </ScaffoldBody>
  <ScaffoldFooter className="border-4 border-slate-200/75 px-4 py-2">
    Footer (try remove)
  </ScaffoldFooter>
</Scaffold>

Row

Live code
<Row className={'stack-panel p-10'} gap={12} justify="center">
    <StackItem />
    <StackItem />
    <StackItem />
</Row>

Column

Live code
<Column className={'stack-panel p-10'} gap={12} items="center">
      <StackItem />
      <StackItem />
      <StackItem />
    </Column>

Center

Live code
<Center className={'stack-panel p-20'}>
      <StackItem />
</Center>