Skip to content

ContainerNarrow

XS · 350B gzip budget

Narrow-centred content column for reading-focused layouts.

Category
Media & layout
Budget
xs, static display primitive
External runtime
React / React DOM only
axe fixtureSSR rendersource scanbundle budget

Preview

Live fixture
Preview locale

Narrow content

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/container-narrow.json

Copies the source into your project.

New here? Set up Tailwind and import aliases first →

Source & props

Edit on GitHub ↗

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

"use client";

import React from "react";

export interface ContainerNarrowProps {
  children: React.ReactNode;
  className?: string;
  as?: "div" | "section" | "article" | "main";
  ariaLabel?: string;
}

export function ContainerNarrow({
  children,
  className = "",
  as = "div",
  ariaLabel,
}: ContainerNarrowProps) {
  const Tag = as;

  return (
    <Tag
      className={className}
      aria-label={ariaLabel}
      style={{
        width: "100%",
        maxWidth: "42rem",
        marginInline: "auto",
        paddingInline: "1.5rem",
      }}
    >
      {children}
    </Tag>
  );
}

What CI checks

Quality contract
  • Bundled, minified and gzipped against its tier budget
  • Audited by axe in the state previewed above
  • Rendered through react-dom/server with no browser globals
  • Scanned for network calls, dangerous sinks, and unguarded animation
← All components