ContentContainer

v1.0.0

Consistent width and padding wrapper for admin page content.

Import

import { ContentContainer } from '@meteorack/sdk-react';

How To Use It

Use it to keep page bodies aligned to a consistent width and gutter inside larger app shells.
Wrap the main content region once instead of applying ad hoc width rules to each card or panel.

Works Well With

AppShell PageHeader Card

Props

children: ReactNode

Content rendered inside the constrained container.

maxWidth?: string

Maximum content width, defaulting to 960px.

padding?: string

Container padding applied on all sides.

className?: string

Optional class name for the container element.

Example

ContentContainer.tsx

import { AppShell, ContentContainer, PageHeader, Card } from '@meteorack/sdk-react';

export function SettingsLayout() {
  return (
    <AppShell>
      <ContentContainer maxWidth="720px" padding="32px 24px">
        <PageHeader
          title="Settings"
          description="Keep long-form pages aligned to a readable width."
        />
        <Card>Settings content goes here.</Card>
      </ContentContainer>
    </AppShell>
  );
}

PreviousPagination NextToast