Container

A padded surface with a border, ring, and optional tone.

When to use

Use Container when you need a padded surface with a border, ring, and optional tone.

Import

TypeScript

import { Container } from '@gzodo/ui'

Container is the framed panel used for cards and grouped content. It is a column with 8px padding and gap. fullWidth, fullHeight, fitWidth, and fitHeight change the box size. color mixes a theme tone into the border and background, the same tokens Tag uses.

Examples

Project

Two fields, stacked with the default 8px gap.

Surface

Default fill is --bg-container, with a base border and the shared ring shadow.

fitWidth

fullWidth

Width

fitWidth shrinks to the content. fullWidth stretches to the parent.

danger

success

warning

pending

muted

Tones

color accepts danger, success, warning, pending, and muted. The accent is mixed into the border and the background.

Container

Property

Description

Type

Default

children

Content stacked in a column.

ReactNode

—

fullWidth

Set the width to 100%.

boolean

—

fullHeight

Set the height to 100%.

boolean

—

fitWidth

Shrink the width to the content.

boolean

—

fitHeight

Shrink the height to the content.

boolean

—

color

Tone mixed into the border and background.

'danger' | 'success' | 'warning' | 'pending' | 'muted'

—

className

Class added on the root element.

string

—

Flex

Badge