Siteplane UI
1
ComponentsLayout

Frame

Frame structures app surfaces such as settings panels, statistics, lists, and empty states.

Purpose

Frame structures app surfaces such as settings panels, statistics, lists, and empty states. It provides a muted outer shell and one or more surfaced panels.

Preview frame

Preview build
Ready for review
siteplane-preview.vercel.app
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/ui/frame";

export function Example() {
  return (
    <Frame>
      <FrameHeader><FrameTitle>Preview</FrameTitle></FrameHeader>
      <FramePanel>...</FramePanel>
    </Frame>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/frame

Import

import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame";

Need the machine-readable source metadata? View registry JSON.

Usage

Frame is a soft surface wrapper for app panels and sections. Header and footer sit on the frame surface while each FramePanel reads as a card in between.

import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/ui/frame";

export function Example() {
  return (
    <Frame>
      <FrameHeader><FrameTitle>Preview</FrameTitle></FrameHeader>
      <FramePanel>...</FramePanel>
    </Frame>
  );
}

Examples

Panels, footer actions and settings rows are compositions of the same frame surface. Adjacent panels space themselves automatically.

Basic frame

Section header
Brief description about the section
Section title
Section description
Footer
<Frame>
  <FrameHeader>
    <FrameTitle>Section header</FrameTitle>
    <FrameDescription>Brief description about the section</FrameDescription>
  </FrameHeader>
  <FramePanel>
    <FrameTitle>Section title</FrameTitle>
    <FrameDescription>Section description</FrameDescription>
  </FramePanel>
  <FrameFooter className="text-muted-foreground text-sm">Footer</FrameFooter>
</Frame>

Separated panels

Adjacent panels on one frame surface separate themselves automatically.

Section header
Brief description about the section
Separated panel
Section description
Separated panel
Section description
<Frame>
  <FrameHeader>
    <FrameTitle>Section header</FrameTitle>
    <FrameDescription>Brief description about the section</FrameDescription>
  </FrameHeader>
  <FramePanel>
    <FrameTitle>Separated panel</FrameTitle>
    <FrameDescription>Section description</FrameDescription>
  </FramePanel>
  <FramePanel>
    <FrameTitle>Separated panel</FrameTitle>
    <FrameDescription>Section description</FrameDescription>
  </FramePanel>
</Frame>

Settings panel

Notifications
Control how this workspace reaches you.
Product updatesOn
Marketing digestOff
<Frame>
  <FrameHeader>
    <FrameTitle>Notifications</FrameTitle>
    <FrameDescription>Control how this workspace reaches you.</FrameDescription>
  </FrameHeader>
  <FramePanel className="overflow-hidden p-0">
    <div className="grid divide-y">
      <div className="flex items-center justify-between gap-3 bg-background px-5 py-3">
        <span className="font-medium text-sm">Product updates</span>
        <span className="text-muted-foreground text-xs">On</span>
      </div>
      <div className="flex items-center justify-between gap-3 bg-background px-5 py-3">
        <span className="font-medium text-sm">Marketing digest</span>
        <span className="text-muted-foreground text-xs">Off</span>
      </div>
    </div>
  </FramePanel>
</Frame>

Empty state

Projects
All projects in this workspace.
No projects
Create your first project to get started.
<Frame>
  <FrameHeader>
    <FrameTitle>Projects</FrameTitle>
    <FrameDescription>All projects in this workspace.</FrameDescription>
  </FrameHeader>
  <FramePanel className="grid place-items-center gap-3 py-8 text-center">
    <span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
      <InboxIcon className="size-5" />
    </span>
    <div className="grid gap-1">
      <FrameTitle>No projects</FrameTitle>
      <FrameDescription>Create your first project to get started.</FrameDescription>
    </div>
    <Button>New project</Button>
  </FramePanel>
</Frame>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

  • Frame is the outer shell and FramePanel is the bordered surface.
  • Multiple direct FramePanel children stack with the native panel gap.
  • Use Header, Title, Description, and Footer as the intended content slots.
  • Compose semantic content inside the panel; Frame does not replace forms, lists, headings, or landmarks.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

  • Frame has no animation.
  • Child controls and overlays retain their native motion.
  • Preserve native radius, border, background, and inset-shadow treatment.

Accessibility

  • Use headings and landmarks appropriate to the content inside Frame.
  • Keep actions as real Button or link controls with visible focus.
  • Do not rely on the surface boundary alone to explain relationships.
  • Empty-state content inside Frame follows the Empty component contract.

Implementation Guidance

  • Use FramePanel for the actual surfaced content.
  • Do not create parallel shell or panel primitives.
  • Keep native slots and surface styling intact.

Layout

Composition helpers and structural layout components.

Group

Group joins related controls into one visual cluster with shared borders and connected radii.

On This Page