Container

Container is a flexible layout component that provides spacing, alignment, and responsive behavior for its children. It has no visible characteristics and is the foundation for most layouts in Click UI.

Example

Vertical container with gap and padding

Props

Prop	Type	Default value	Description
Prop orientation	Type "horizontal" \| "vertical"	Default value "horizontal"	Description Layout direction - whether children are arranged horizontally or vertically
Prop gap	Type "none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"	Default value "none"	Description Spacing between child elements using predefined size tokens
Prop padding	Type "none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"	Default value "none"	Description Internal padding of the container using predefined size tokens
Prop alignItems	Type "start" \| "center" \| "end" \| "stretch"	Default value "start"	Description Vertical alignment of items within the container (cross-axis alignment)
Prop justifyContent	Type "center" \| "space-between" \| "space-around" \| "space-evenly" \| "start" \| "end" \| "left" \| "right"	Default value "start"	Description Horizontal alignment of items within the container (main-axis alignment)
Prop fillWidth	Type boolean	Default value false	Description Whether the container should take up the full width of its parent
Prop fillHeight	Type boolean	Default value false	Description Whether the container should take up the full height of its parent
Prop wrap	Type "nowrap" \| "wrap" \| "wrap-reverse"	Default value "nowrap"	Description Whether child elements should wrap to the next line when space is limited
Prop maxWidth	Type string	Default value ""	Description Maximum width of the container (e.g., "800px", "100%", "50rem")
Prop minWidth	Type string	Default value ""	Description Minimum width of the container (e.g., "200px", "20rem")
Prop maxHeight	Type string	Default value ""	Description Maximum height of the container (e.g., "500px", "50vh")
Prop minHeight	Type string	Default value ""	Description Minimum height of the container (e.g., "100px", "10rem")
Prop grow	Type "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6"	Default value "0"	Description Flex grow factor - how much the container should grow relative to siblings
Prop shrink	Type "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6"	Default value "1"	Description Flex shrink factor - how much the container should shrink relative to siblings
Prop component	Type ElementType	Default value "div"	Description HTML element type to render as the container (e.g., "div", "section", "article")
Prop isResponsive	Type boolean	Default value false	Description Whether the container should adapt its layout based on screen size
Prop overflow	Type string	Default value "visible"	Description CSS overflow property value (e.g., "visible", "hidden", "scroll", "auto")

Quick start

Use Container for flexible layouts with spacing and alignment:

<Container orientation='vertical' gap='md' padding='lg'>
<Text>Content</Text>
<Button label='Action' />
</Container>

Panel: Use Container inside Panel for structured content areas
Grid: Use Grid for two-dimensional layouts
GridContainer: Use GridContainer for CSS Grid-based layouts
Spacer: Use Spacer for simple vertical spacing between elements

Common use cases

Vertical form layout

Name

import { Container, TextField, Button } from '@clickhouse/click-ui'

function FormLayout() {
return (
  <Container orientation='vertical' gap='md' padding='lg'>
    <TextField id='name' label='Name' value={name} onChange={setName} />
    <TextField id='email' label='Email' value={email} onChange={setEmail} />
    <Container orientation='horizontal' gap='sm' justifyContent='end'>
      <Button label='Cancel' />
      <Button type='primary' label='Submit' />
    </Container>
  </Container>
)
}

Horizontal button group

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

function ButtonGroup() {
return (
  <Container orientation='horizontal' gap='sm' justifyContent='center'>
    <Button label='Previous' />
    <Button type='primary' label='Next' />
  </Container>
)
}

Centered content

Centered Content

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

function CenteredLayout() {
return (
  <Container 
    orientation='vertical' 
    gap='md' 
    alignItems='center' 
    justifyContent='center'
    fillHeight
  >
    <Text size='lg'>Centered Content</Text>
    <Button label='Action' />
  </Container>
)
}

Contributors Grid