Container

The Container component provides a full-screen container that fills the viewport height and centers its content. It's useful for creating full-page layouts or centered content areas.

import { FullScreenContainer } from "@pipecat-ai/voice-ui-kit";

<FullScreenContainer>
  <div className="text-center">
    <h1 className="text-2xl font-bold mb-4">Centered Content</h1>
    <p>This content is centered in a full-screen container</p>
  </div>
</FullScreenContainer>

Component Variants

FullScreenContainer

The FullScreenContainer component creates a full-viewport container with centered content.

import { FullScreenContainer } from "@pipecat-ai/voice-ui-kit";

<FullScreenContainer>
  <div>Centered content</div>
</FullScreenContainer>

Prop	Type	Default
`horizontal?`	`boolean`	`false`
`className?`	`string`	`undefined`

Usage

Basic Usage

Create a full-screen container with vertically centered content.

import { FullScreenContainer } from "@pipecat-ai/voice-ui-kit";

<FullScreenContainer>
  <div className="text-center">
    <h1 className="text-2xl font-bold">Welcome</h1>
    <p>This is centered vertically and horizontally</p>
  </div>
</FullScreenContainer>

Horizontal Layout

Use horizontal layout for side-by-side content.

import { FullScreenContainer } from "@pipecat-ai/voice-ui-kit";

<FullScreenContainer horizontal={true}>
  <div className="flex-1">Left content</div>
  <div className="flex-1">Right content</div>
</FullScreenContainer>

Custom Styling

Apply custom classes to override default styling.

import { FullScreenContainer } from "@pipecat-ai/voice-ui-kit";

<FullScreenContainer className="bg-gradient-to-br from-primary/10 to-secondary/10">
  <div>Custom styled container</div>
</FullScreenContainer>

Layout Modes

Vertical (default): Uses flex-col for vertical stacking
Horizontal: Uses flex-row for horizontal layout when horizontal={true}

Integration

The FullScreenContainer component is useful for:

Landing pages
Login/authentication screens
Full-page applications
Centered content areas
Splash screens

It's a standalone component that doesn't require any context providers.

On this page