VaneUI

VaneUI

Layout Components

Container

Manages the main content area by centering it and applying a max-width. It ensures a consistent and readable layout across different screen sizes.

Basic Container

A centered container with max-width.

This content is centered and has a max-width constraint.

react-icon

BasicContainer.tsx

<Container>
  <div className="p-4 bg-gray-100 rounded">
    <Text>This content is centered and has a max-width constraint.</Text>
  </div>
</Container>

Container Sizes

Containers come in different sizes.

Container xs

Container xs content

Container sm

Container sm content

Container md

Container md content

Container lg

Container lg content

Container xl

Container xl content

react-icon

ContainerSizes.tsx

<Col lg>
  <div>
    <Text semibold>Container xs</Text>
    <Container xs>
      <div className="p-4 bg-gray-100 rounded">
        <Text>Container xs content</Text>
      </div>
    </Container>
  </div>
  <div>
    <Text semibold>Container sm</Text>
    <Container sm>
      <div className="p-4 bg-gray-100 rounded">
        <Text>Container sm content</Text>
      </div>
    </Container>
  </div>
  <div>
    <Text semibold>Container md</Text>
    <Container md>
      <div className="p-4 bg-gray-100 rounded">
        <Text>Container md content</Text>
      </div>
    </Container>
  </div>
  <div>
    <Text semibold>Container lg</Text>
    <Container lg>
      <div className="p-4 bg-gray-100 rounded">
        <Text>Container lg content</Text>
      </div>
    </Container>
  </div>
  <div>
    <Text semibold>Container xl</Text>
    <Container xl>
      <div className="p-4 bg-gray-100 rounded">
        <Text>Container xl content</Text>
      </div>
    </Container>
  </div>
</Col>

Container Appearances

Containers can have different background appearances.

Primary container

Secondary container

Success container

react-icon

ContainerAppearances.tsx

<Col lg>
  <Container primary>
    <div className="p-4 bg-white rounded">
      <Text>Primary container</Text>
    </div>
  </Container>
  <Container secondary>
    <div className="p-4 bg-white rounded">
      <Text>Secondary container</Text>
    </div>
  </Container>
  <Container success>
    <div className="p-4 bg-white rounded">
      <Text>Success container</Text>
    </div>
  </Container>
</Col>

Container Borders

Control container border appearance.

Container with border

Container without border

react-icon

ContainerBorders.tsx

<Col lg>
  <Container border>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container with border</Text>
    </div>
  </Container>
  <Container noBorder>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container without border</Text>
    </div>
  </Container>
</Col>

Container Shapes

Containers support different border radius styles.

Default rounded container

Pill-shaped container

Sharp cornered container

react-icon

ContainerShapes.tsx

<Col lg>
  <Container>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Default rounded container</Text>
    </div>
  </Container>
  <Container pill>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Pill-shaped container</Text>
    </div>
  </Container>
  <Container sharp>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Sharp cornered container</Text>
    </div>
  </Container>
</Col>

Container with Shadow

Containers can have drop shadows.

Container with shadow

Container without shadow

react-icon

ContainerwithShadow.tsx

<Col lg>
  <Container shadow>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container with shadow</Text>
    </div>
  </Container>
  <Container noShadow>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container without shadow</Text>
    </div>
  </Container>
</Col>

Container with Ring

Containers can have focus rings.

Container with ring

Container without ring

react-icon

ContainerwithRing.tsx

<Col lg>
  <Container ring>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container with ring</Text>
    </div>
  </Container>
  <Container noRing>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Container without ring</Text>
    </div>
  </Container>
</Col>

Container with Gap

Control spacing between container content.

First item

Second item

First item

Second item

react-icon

ContainerwithGap.tsx

<Col lg>
  <Container gap>
    <div className="p-4 bg-gray-100 rounded">
      <Text>First item</Text>
    </div>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Second item</Text>
    </div>
  </Container>
  <Container noGap>
    <div className="p-4 bg-gray-100 rounded">
      <Text>First item</Text>
    </div>
    <div className="p-4 bg-gray-100 rounded">
      <Text>Second item</Text>
    </div>
  </Container>
</Col>