Container

Centered, fluid page wrapper with a 90rem maximum width and horizontal padding.

Overview

Copy the source into your project, then import the parts you need. Styles use local StyleX declarations and shared theme tokens. You can change the source without wrapping or replacing a package.

Installation

Run bunx @yopem-ui/cli init from your project root first. The CLI configures StyleX and installs shared files and dependencies.

bunx @yopem-ui/cli init

bunx @yopem-ui/cli add container

Run from your project root. The CLI installs required components, shared files, and packages. Previews may need additional components. Existing files are preserved. To refresh installed source, use update; locally edited files need an explicit --force to overwrite.

bunx @yopem-ui/cli update container

Preview

Centered page-width wrapper

Content stays centered and readable as the viewport grows.

import { Container } from "@registry/components/ui/container"
import * as stylex from "@stylexjs/stylex"

const styles = stylex.create({
  narrow: { maxInlineSize: "32rem" },

Usage

Container centers page content with a 90rem maximum inline size and four spacing units of horizontal padding. Use fluid to remove the width cap or xstyle to choose another maximum width and padding.

Import from the local file installed by the CLI.

"use client"

import { Container } from "@/components/ui/container"

export function Preview() {
  return <Container>Content stays centered on wide screens.</Container>
}

API reference

Generated from canonical TypeScript source. Only component and Base UI props appear below. Required marks a required property, not a required component.

View API reference