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
  • Examples
  • Deployment
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Stack

Arranges related content vertically with system-owned spacing.

idle

Usage

import { Stack } from "@mizen-labs/ui";

Examples

Deployment

Recommendations

GuidancePractice
Do

Arrange related content in reading order. Gaps follow the 4px scale: 1 for a title and its description, 6 between fields, 8 between groups; larger gaps between groups than inside them.

Usage boundaries

GuidanceBoundary
Scope

Use Section when a document region needs section semantics. Stack does not add accessible structure by itself.

API reference

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

PropTypeDefaultDescription
childrenReactNode—Content arranged in the system vertical rhythm.
gap"0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16""3" (12px)Sets the gap on the 4px scale: step × 4 = px. Use 1 between a title and its description, 6 between fields, and 8 between groups.
PreviousSpacerNextBlockquote

Build finished in 48s

214 tests passed

Preview deployed to staging

Rollout scheduled for 14:00

Ship related content in a predictable vertical rhythm.

Run pnpm deploy after validation passes.