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
  • Workspace preferences
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Sheet

Extends dialog overlays with edge-anchored directional sliding panels for complex flows and settings.

idle

Usage

import {
	Sheet,
	SheetClose,
	SheetDescription,
	SheetFooter,
	SheetHeader,
	SheetPanel,
	SheetPopup,
	SheetTitle,
	SheetTrigger,
} from "@mizen-labs/ui";

Anatomy

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

<Sheet>
	<SheetTrigger />
	<SheetPopup>
		<SheetHeader>
			<SheetTitle />
			<SheetDescription />
		</SheetHeader>
		<SheetPanel />
		<SheetFooter>
			<SheetClose />
		</SheetFooter>
	</SheetPopup>
</Sheet>

Examples

Workspace preferences

Open settings while keeping the workspace in view.

Recommendations

GuidancePractice
Do

Keep the task related to the underlying page. Put the title and completion controls in predictable positions.

Usage boundaries

GuidanceBoundary
Scope

Use Dialog for short centered tasks. Avoid stacking sheets for a multi-step workflow.

API reference

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

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Anchors the sheet to the specified edge of the viewport.
variant"default" | "inset""default"Visual presentation variant, offering standard edge alignment or inset card framing.
showCloseButtonbooleantrueRenders an accessible close icon button inside the popup.
scrollFadebooleantrueApplies vertical gradient scroll fades to indicate scrollable content overflow.
PreviousPreview CardNextTooltip