Skip to content
Paramanu v0.1.0-alpha.0

Stack

Stack arranges children in a vertical or horizontal direction with consistent spacing. HStack and VStack shorthands are also available.

Basic Usage

Item 1
Item 2
Item 3
import { Stack } from "@paramanu/primitives-react"


export default function App() {
return (
  <Stack gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Stack>
)
}
<div class="pm-stack pm-stack--vertical pm-stack--gap-4">
<div style="background: #e2e8f0; padding: 8px 16px;">Item 1</div>
<div style="background: #e2e8f0; padding: 8px 16px;">Item 2</div>
<div style="background: #e2e8f0; padding: 8px 16px;">Item 3</div>
</div>

Horizontal

A
B
C
import { HStack } from "@paramanu/primitives-react"


export default function App() {
return (
  <HStack gap="4">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </HStack>
)
}
<div class="pm-stack pm-stack--horizontal pm-stack--gap-4">
<div style="background: #e2e8f0; padding: 8px 16px;">A</div>
<div style="background: #e2e8f0; padding: 8px 16px;">B</div>
<div style="background: #e2e8f0; padding: 8px 16px;">C</div>
</div>