Container

A responsive wrapper that centers content and caps its width at each breakpoint.

How it works

Default

Use the Container component to center content with a max-width at each breakpoint. It also adds horizontal padding to prevent content from touching the edges of the viewport.

import { Container } from "@hummingbirdui/react";

export default function ContainerDefault() {
  return <Container>Content here</Container>;
}

Responsive

The breakpoint prop sets the maximum width of the container at a specific breakpoint. The container remains fluid until it reaches that breakpoint.

import { Container } from "@hummingbirdui/react";

export default function ContainerResponsive() {
  return (
    <Container breakpoint="md">Full width until md, contained after</Container>
  );
}

Fluid

The fluid prop sets the container to full width across all breakpoints.

import { Container } from "@hummingbirdui/react";

export default function ContainerFluid() {
  return <Container fluid>Full width at every breakpoint</Container>;
}

API Reference

Container

Styling

Breakpoint CSS variables

The container uses the following CSS variables for its breakpoints. Override or extend them according to the project’s requirements.

@theme {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

Gutter CSS variables

The container uses the following gutter CSS variables for its horizontal padding. Override or extend them according to the project’s requirements.

.container {
  --grid-gutter-x: 1.5rem;
  --grid-gutter-y: 0;
}