Skip to content
Paramanu v0.1.0-alpha.0

Flex

Flex provides a convenient wrapper around CSS flexbox with props for direction, alignment, justification, wrapping, and gap.

Basic Usage

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


export default function App() {
return (
  <Flex gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Flex>
)
}
<div class="pm-flex pm-flex--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>

Column Direction

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


export default function App() {
return (
  <Flex direction="column" gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
  </Flex>
)
}
<div class="pm-flex pm-flex--col pm-flex--gap-4">
<div style="background: #e2e8f0; padding: 8px 16px;">Item 1</div>
<div style="background: #e2e8f0; padding: 8px 16px;">Item 2</div>
</div>

Alignment

Start
End
import { Flex } from "@paramanu/primitives-react"


export default function App() {
return (
  <Flex align="center" justify="between" gap="4">
    <div>Start</div>
    <div>End</div>
  </Flex>
)
}
<div class="pm-flex pm-flex--align-center pm-flex--justify-between pm-flex--gap-4">
<div style="background: #e2e8f0; padding: 8px 16px;">Start</div>
<div style="background: #e2e8f0; padding: 8px 16px;">End</div>
</div>