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
  • Terminal command
  • Longer file
  • Recommendations
  • Usage boundaries
  • API reference

Content

Code Block

Presents named code samples with accessible preformatted text and an optional copy action.

idle

Usage

import {
	CodeBlock,
	CodeBlockContent,
	CodeBlockCopy,
	CodeBlockHeader,
	CodeBlockTitle,
} from "@mizen-labs/ui";

Anatomy

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

<CodeBlock>
	<CodeBlockHeader>
		<CodeBlockTitle />
		<CodeBlockCopy />
	</CodeBlockHeader>
	<CodeBlockContent />
</CodeBlock>

Examples

Terminal command

A short shell command with Copy floating in the corner.

Longer file

Long code scrolls inside the block.

Recommendations

GuidancePractice
Do

Name the file or language and include the imports needed to use the example. Copy the same text that is displayed.

Usage boundaries

GuidanceBoundary
Scope

Code Block presents text and an optional copy action. It does not execute code or provide syntax highlighting.

API reference

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

PropTypeDefaultDescription
CodeBlockCodeBlockProps<figure>Groups the label, preformatted source, and optional copy control.
CodeBlockHeaderCodeBlockHeaderProps<figcaption>Contains the sample title and its copy action.
CodeBlockTitleCodeBlockTitleProps<span>Names the code sample.
CodeBlockContentCodeBlockContentProps<pre><code>Renders caller-provided source with a required accessible name.
CodeBlockCopyCodeBlockCopyProps—Copies the explicitly provided source and reports the result politely.
PreviousCarouselNextLightbox
save-button.tsx
import { Button } from "@mizen-labs/ui";

// Saves the draft and shows progress while the request runs.
export function SaveButton({ pending }: { pending: boolean }) {
  return (
    <Button disabled={pending} type="submit">
      {pending ? "Saving…" : "Save changes"}
    </Button>
  );
}
pnpm add @mizen-labs/ui
workspace-settings.tsx
import {
	Button,
	Field,
	FieldControl,
	FieldDescription,
	FieldLabel,
	Input,
} from "@mizen-labs/ui";

const setupMessage = "<main>ready</main>";

// Keep the labels and descriptions beside their fields while the application owns save state.
export function WorkspaceSettings() {
	return (
		<form>
			<Field>
				<FieldLabel>Workspace name</FieldLabel>
				<FieldControl defaultValue="Northstar" />
				<FieldDescription>{setupMessage}</FieldDescription>
			</Field>
			<Field>
				<FieldLabel>Owner email</FieldLabel>
				<Input defaultValue="sam@example.com" type="email" />
			</Field>
			<Button type="submit">Save settings</Button>
		</form>
	);
}