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
  • Before the review
  • Recommendations
  • Usage boundaries
  • API reference

Typography

Code

Marks inline code and technical identifiers with a readable mono treatment.

idle

Usage

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

Examples

Before the review

A short handoff note for the project team.

Recommendations

GuidancePractice
Do

Use inline code for identifiers, commands, and literal values within ordinary text.

Usage boundaries

GuidanceBoundary
Scope

Use Code Block for multiline examples. Inline code should not substitute for a control or heading.

API reference

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

PropTypeDefaultDescription
childrenReactNode—Code, command, identifier, or file name content.
PreviousCitationNextHeading

Install the package with pnpm add @mizen-labs/ui.

Render ThemeScript and ThemeProvider in app/layout.tsx.

Run pnpm typecheck before you open a review.

Run pnpm typecheck before opening a review.

Use data-slot to identify component anatomy.

Long identifiers such as agent_execution_result_with_extended_metadata wrap on narrow screens.