Spacer

Spacer is a utility component that adds consistent vertical spacing between elements. It helps maintain visual rhythm and proper spacing throughout your interface.

Example

Content above

Content with medium spacing

Content with large spacing

Props

Prop	Type	Default value	Description
Prop size	Type "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"	Default value "md"	Description Size of the vertical spacing using predefined size tokens

Quick Start

Use Spacer for consistent vertical spacing:

<Text>First item</Text>
<Spacer size='md' />
<Text>Second item</Text>
<Spacer size='lg' />
<Text>Third item</Text>

Container: Use Container’s gap prop for spacing between multiple items
Separator: Use Separator for visual dividers between sections
Panel: Use Spacer inside Panel for content spacing

Common Use Cases

Content Spacing

Title

Subtitle text

Body content goes here

import { Spacer, Text, Container } from '@clickhouse/click-ui'

function ContentSpacing() {
return (
  <Container orientation='vertical'>
    <Text size='lg'>Title</Text>
    <Spacer size='sm' />
    <Text>Subtitle</Text>
    <Spacer size='md' />
    <Text>Content</Text>
  </Container>
)
}

Variants

Sizes

Content

Extra small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra large (xl)

Extra extra large (xxl)

Date Details Separator