Container

The Container component is a flexible layout component that constrains content width, adds consistent padding, and handles responsive behavior. It's perfect for creating readable content areas with proper spacing.

Preview

CenterResponsive

Preview

Container Preview

The container size is set to normal. This affects the maximum width of the content area.

Column 1

This content is inside the container.

Column 2

It will be constrained by the container's size.

Column 3

Resize the browser to see responsive behavior.

Current props: padding: normal, center: Yes, responsive: Yes

Code

import { Container } from '@ignix-ui/container';

<Container
  size="normal"
  padding="normal"
  center={true}
  responsive={true}
>
  {/* Your content here */}
</Container>

Installation

CLI

ignix add component container

manual

import { cn } from '../../../utils/cn';
import * as React from "react";

export type ContainerSize = "small" | "normal" | "large" | "full" | "readable";
export type ContainerPadding = "none" | "small" | "normal" | "large" | "xl";
export type MaxWidth = "sm" | "md" | "lg" | "xl" | "full" | string; 

interface ContainerProps {
  children: React.ReactNode;
  size?: ContainerSize;
  center?: boolean;
  padding?: ContainerPadding;
  maxWidth?: MaxWidth;
  responsive?: boolean;
  className?: string;
}

const sizeClasses: Record<ContainerSize, string> = {
  small: "max-w-sm",
  normal: "max-w-md",
  large: "max-w-3xl",
  full: "max-w-full",
  readable: "max-w-prose", 
};

const paddingClasses: Record<ContainerPadding, string> = {
  none: "p-0",
  small: "p-2",
  normal: "p-4",
  large: "p-6",
  xl: "p-8",
};

const maxWidthClasses: Record<Exclude<MaxWidth, string>, string> = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-lg",
  xl: "max-w-xl",
  full: "max-w-full",
};

export function Container({
  children,
  size = "normal",
  center = true,
  padding = "normal",
  maxWidth,
  responsive = true,
  className,
  ...props
}: ContainerProps) {
  const maxWidthStyle: React.CSSProperties = {};
  let widthClass = sizeClasses[size];
  
  if (maxWidth) {
    if (typeof maxWidth === 'string' && maxWidth in maxWidthClasses) {
      widthClass = maxWidthClasses[maxWidth as keyof typeof maxWidthClasses];
    } else {
      if (typeof maxWidth === 'number') {
        maxWidthStyle.maxWidth = `${maxWidth}px`;
      } else {
        maxWidthStyle.maxWidth = maxWidth;
      }
    }
  }

  return (
    <div
      className={cn(
        "w-full",
        widthClass,
        paddingClasses[padding],
        center && "mx-auto",
        responsive && "px-4 sm:px-6 lg:px-8",
        className
      )}
      style={maxWidthStyle}
      {...props}
    >
      {children}
    </div>
  );
}

Usage

Import the component:

import { Container } from "@ignix-ui/container";

Basic Usage

import { Container } from "@ignix-ui/container";

function MyComponent() {
  return (
    <Container>
      Your content here
    </Container>
  );
}

Examples

Different Sizes

<Container size="small">Small container</Container>
<Container size="normal">Normal container (default)</Container>
<Container size="large">Large container</Container>
<Container size="readable">Readable text width</Container>
<Container size="full">Full width container</Container>

Custom Padding

<Container padding="none">No padding</Container>
<Container padding="small">Small padding</Container>
<Container padding="normal">Normal padding (default)</Container>
<Container padding="large">Large padding</Container>
<Container padding="xl">Extra large padding</Container>

Disable Centering

<Container center={false}>Not centered</Container>

Custom Max Width

<Container maxWidth="md">Medium max width</Container>
<Container maxWidth="800px">Custom pixel width</Container>

Props

Prop	Type	Default	Description
size	"small" | "normal" | "large" | "full" | "readable"	"normal"	Controls the maximum width of the container
center	boolean	true	Whether to center the container horizontally
padding	"none" | "small" | "normal" | "large" | "xl"	"normal"	Controls the padding around the content
maxWidth	"sm | md | lg | xl | full | string"	-	Custom max-width for the container (overrides size)
responsive	boolean	true	Adds responsive padding on the sides
className	string	''	Additional CSS classes
children	ReactNode	-	Content to be rendered inside the container

Best Practices

• Use the readable size for long-form text content to maintain optimal line length
• Consider disabling responsive padding (responsive={false}) for full-bleed components
• Use the full size with caution, as it removes the max-width constraint
• Combine with other layout components for complex page structures