Space
Use the Space component to insert fixed spacing between elements when margin props are not available or would make layouts harder to reason about.
Source
LLM docs
Package
Examples
2
Properties
30
Basics
Compare token-based and numeric vertical gaps between stacked content blocks.
Loading demo…
import { Block, Space, Text, useTheme } from '@plocks/ui';
const EXAMPLES = [
{
label: 'Token spacing (md)',
gap: 'md' as const,
helper: 'Use theme tokens for consistent rhythm between related content.'
},
{
label: 'Token spacing (xl)',
gap: 'xl' as const,
helper: 'Larger tokens create breathing room for grouped sections.'
},
{
label: 'Numeric spacing (24px)',
gap: 24,
helper: 'Fallback to numeric values when a token does not fit the layout.'
}
] as const;
export function Demo() {
const theme = useTheme();
return (
<Block>
{EXAMPLES.map(({ label, gap, helper }) => (
<Block key={label}>
<Text fw="medium">{label}</Text>
<Block bg={theme.backgrounds.subtle} radius="lg" p="md">
<Block>
<Text>First line</Text>
<Space h={gap} />
<Text>Second line</Text>
</Block>
</Block>
<Text variant="small" c="muted">
{helper}
</Text>
</Block>
))}
</Block>
);
}Horizontal spacing
Use
Space to control gutters between inline buttons with tokens or fixed widths.Loading demo…
import { Block, Button, Row, Space, Text, useTheme } from '@plocks/ui';
const GROUPS = [
{
label: 'Token spacing (lg)',
gap: 'lg' as const,
helper: 'Theme tokens keep button gutters aligned with the spacing scale.'
},
{
label: 'Numeric spacing (18px)',
gap: 18,
helper: 'Use a numeric width when exact measurements are required.'
}
] as const;
export function Demo() {
const theme = useTheme();
return (
<Block>
{GROUPS.map(({ label, gap, helper }) => (
<Block key={label}>
<Text fw="medium">{label}</Text>
<Block bg={theme.backgrounds.surface} radius="lg" p="md">
<Row align="center">
<Button size="sm">Primary</Button>
<Space w={gap} />
<Button size="sm" variant="secondary">
Secondary
</Button>
<Space w={gap} />
<Button size="sm" variant="ghost">
Ghost
</Button>
</Row>
</Block>
<Text variant="small" c="muted">
{helper}
</Text>
</Block>
))}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources