Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Personal workspace
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Frame

Composes a frame from header, panel, title, description, and footer slots with system-owned surfaces and spacing.

idle

Usage

import {
	Frame,
	FrameDescription,
	FrameFooter,
	FrameHeader,
	FramePanel,
	FrameTitle,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Frame>
	<FrameHeader>
		<FrameTitle />
		<FrameDescription />
	</FrameHeader>
	<FramePanel />
	<FrameFooter />
</Frame>

Examples

Personal workspace

Recommendations

GuidancePractice
Do

Use header, panel, and footer slots to separate task context, content, and completion actions.

Usage boundaries

GuidanceBoundary
Scope

Use Frame for a meaningful work area. Avoid wrapping every small group in another surface.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
FrameFrameProps—Root of the compound frame; groups headers, panels, and footers with system-owned spacing.
FramePanelFramePanelProps—Bordered surface for a frame section with panel radius, inner padding, and resting outline depth.
FrameHeaderFrameHeaderProps—Header slot for the title and supporting description of a frame.
FrameTitleFrameTitleProps—Title slot with semibold content typography.
FrameDescriptionFrameDescriptionProps—Description slot with secondary content typography.
FrameFooterFrameFooterProps—Footer slot for actions and secondary frame metadata.
PreviousCollapsibleNextGrid
Team members
People who can open this workspace.
MC

Maya Chen

maya@northstar.dev

Owner

LK

Leo Kim

leo@northstar.dev

Admin

AS

Ana Silva

ana@northstar.dev

Member

3 of 10 seats used

Account settings
Manage your personal profile and notification preferences.

Preferences stay in this preview.