Stack

import { Stack } from '@yarcl/react';

gap="xs"123

gap="md"123

gap="xl"123

<Stack gap="md">
  <Heading level={2}>Profile</Heading>
  <Field label="Name"><Input /></Field>
</Stack>

gap accepts the keys of your spacing and defaults to defaults.gap. Use as to render a semantic element (section, form, ul, nav …); list styles are reset.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Accepts every native <div> attribute.

Prop	Type	Default	Description
align	Responsive<Align>		Cross-axis alignment of children, as a scalar or breakpoint map.
as	LayoutElement	'div'	Element to render.
gap	Responsive<Spacing>config	config.defaults.gap	Space between children, from the spacing config. Accepts a scalar or breakpoint map.
justify	Responsive<Justify>		Main-axis distribution of children, as a scalar or breakpoint map.