Frame
Provides a mock browser or device container to showcase components and design previews in context.
1.7 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-frameUsage
Code
import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from '@/components/ui/frame'Code
<Frame>
<FrameHeader>
<FrameTitle>Title</FrameTitle>
<FrameDescription>Description</FrameDescription>
</FrameHeader>
<FramePanel>Content</FramePanel>
<FrameFooter>Footer</FrameFooter>
</Frame>Features
Separated Panels
Frame container configured with distinct separated panels and divider styling.
API Reference
Frame
The main container component for grouping related information.
| Prop | Type | Default |
|---|---|---|
className | string |
FramePanel
A panel container for frame content.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<FramePanel>Content</FramePanel>FrameHeader
Header section for the frame.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<FrameHeader>
<FrameTitle>Title</FrameTitle>
<FrameDescription>Description</FrameDescription>
</FrameHeader>FrameTitle
Title text for the frame header.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<FrameTitle>Title</FrameTitle>FrameDescription
Description text for the frame header.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<FrameDescription>Description</FrameDescription>FrameFooter
Footer section for the frame.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<FrameFooter>Footer</FrameFooter>Examples
Frame with multiple separated panels
Frame with multiple stacked panels
Separated Panels
By default, multiple panels are separated with spacing between them.