Container

Overview

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

Try out the Container component with different settings:

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

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

Installation

npm

npx @mindfiredigital/ignix-ui add container

yarn

yarn @mindfiredigital/ignix-ui add container

pnpm

pnpm @mindfiredigital/ignix-ui add 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; // allow custom

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", // good for long text
};

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) {
// If maxWidth is provided, it takes precedence over size
const widthClass = maxWidth 
? (typeof maxWidth === 'string' ? maxWidthClasses[maxWidth as keyof typeof maxWidthClasses] : maxWidth)
: sizeClasses[size];

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

Usage

Import the component:

import { Container } from './components/ui';

Basic Usage

import { Container } from './components/ui';

function MyComponent() {
  return (
    <Container>
      Your content here
    </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	'lg'	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

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>

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