Fixed Area
A fixed area container with absolute positioning and centered content
Preview
Basic
Centered Content
This content is perfectly centered
With Custom Styling
Stylized Container
With gradient background
Installation
Usage
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Child elements to display centered in the fixed area |
className | string | - | Additional CSS classes to apply to the inner container |
How It Works
The component creates a two-layer structure:
- Outer layer:
relative flex-1- Takes up available space - Inner layer:
absolute inset-0 flex items-center justify-center- Absolutely positioned to fill parent and center content