Skip to content

Wrap

Wrapping inline layout. Like Inline but each child gets uniform gap whether or not lines wrap — the right fit for tag clouds, chip rows, and lists of variable-width buttons.

stable
since v0.1.0
3.57 kB
primitive
layout
flex

Preview

tsx

import { Box, Wrap } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Wrap gap="2" padding="4" background="bg.subtle" borderRadius="md">
      <Box padding="2" background="bg.surface" borderRadius="sm">
        tag-one
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm">
        tag-two
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm">
        tag-three
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm">
        tag-four
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm">
        tag-five
      </Box>
    </Wrap>
  );
}

Independent row + column gap

gap controls both axes equally. Use rowGap and columnGap independently when the row distance should differ from the column distance after wrapping — common in tag clouds where a tighter column gap and a looser row gap reads cleanly.

Preview

tsx

import { Box, Wrap } from '@arshad-shah/cynosure-react';

const TAGS = ['design', 'systems', 'tokens', 'typography', 'layout', 'forms', 'overlays', 'a11y'];

export default function Example() {
  return (
    <Wrap rowGap="3" columnGap="2" padding="4" background="bg.subtle" borderRadius="md">
      {TAGS.map((t) => (
        <Box key={t} padding="2" background="bg.surface" borderRadius="full">
          {t}
        </Box>
      ))}
    </Wrap>
  );
}

Align and justify

align controls cross-axis alignment of items within a row; justify distributes items along the main axis. align="center" keeps mixed-height chips visually centered after wrapping.

Preview

tsx

import { Box, Wrap } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Wrap
      gap="2"
      justify="center"
      align="center"
      padding="4"
      background="bg.subtle"
      borderRadius="md"
    >
      {['short', 'a longer chip', 'mid', 'tiny', 'one more'].map((label) => (
        <Box key={label} padding="2" background="bg.surface" borderRadius="full">
          {label}
        </Box>
      ))}
    </Wrap>
  );
}

API

PropTypeDefaultDescription

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

children

ReactNode

—

Wrapped items.

gap

Responsive<SpaceToken>

—

Uniform gap in both axes. Falls back to `rowGap`/`columnGap` when set.

rowGap

Responsive<SpaceToken>

—

Gap between wrapped rows. Overrides the row axis of `gap`.

columnGap

Responsive<SpaceToken>

—

Gap between adjacent items on the inline axis. Overrides `gap`'s columns.

align

Responsive<WrapAlign>

—

Cross-axis alignment — maps to `align-items`. Supports `baseline`.

justify

Responsive<WrapJustify>

—

Main-axis distribution — maps to `justify-content`.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<SizeValue | "content">

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

as

ElementType

"div"

Rendered intrinsic element or component.

ref

ForwardedRef<Element>

—

Recipes

Tag list: <Wrap gap="2">{tags.map((t) => <Chip key={t}>{t}</Chip>)}</Wrap>.
Filter bar: combine Wrap with Chip + Checkbox items so the bar reflows naturally on narrow viewports.
For predictable column layouts (cards in a grid), prefer SimpleGrid — Wrap is for variable-width items where the column count is data-driven.