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
  • Your projects
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Grid

Arranges related content in a responsive grid with system-owned spacing.

idle

Usage

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

Examples

Your projects

Four projects, arranged to fit the available space.

Recommendations

GuidancePractice
Do

Group peer content and check reading order as columns change. Test long content at narrow widths.

Usage boundaries

GuidanceBoundary
Scope

Use Table for data with row and column relationships. Visual columns do not establish table semantics.

API reference

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

PropTypeDefaultDescription
childrenReactNode—Content arranged in the system grid rhythm.
PreviousFrameNextGroup
Revenue
$48,200
From last month
+12%
Active users
3,140
From last month
+4%
Churn
1.8%
From last month
-12%
Open tickets
23
From last month
+8%
In progress
Northstar launch
Coordinate the autumn release.

Owned by Maya Chen

In progress
Field notes
Turn customer feedback into clear next steps.

Owned by Nadia Ilyin

Planning
Website refresh
Make the product easier to discover.

Owned by Alex Morgan

In review
Design system
Build a calmer, more consistent workspace.

Owned by Sam Lee