Code block

Display source code with copy and preview actions.

typescript

export const greeting = 'Hello';

View code

import { CodeBlock } from "@stack/ui/code-block";

export default function Example() {
  return (
    <CodeBlock.Root
      value={"export const greeting = 'Hello';"}
      language="typescript"
    >
      <CodeBlock.Header size="sm">
        <CodeBlock.Title />
        <CodeBlock.Actions>
          <CodeBlock.Copy />
          <CodeBlock.PreviewTrigger aria-label="Expand code" />
        </CodeBlock.Actions>
      </CodeBlock.Header>
      <CodeBlock.Content />
      <CodeBlock.PreviewContent />
    </CodeBlock.Root>
  );
}

Usage

import { CodeBlock } from "@stack/ui/code-block";

Pass filename when the block represents a file. Use Footer instead of Header for actions below the source.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

CodeBlock.Root

Also accepts native element props.

Prop	Type	Required	Description
variant	"default" | "destructive" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm"	No	Size variant.
value	string	Yes	Source text to display.
language	string	No	Language identifier for syntax highlighting.
filename	string	No	Filename used for the title and language detection.

CodeBlock.PreviewContent

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: AlertDialogPopupState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: AlertDialogPopupState) => string | undefined)	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
initialFocus	boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is opened.
finalFocus	boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is closed.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AlertDialogPopupState>	No	Replace the underlying element using render composition.
showCloseButton	boolean	No	Include the built-in close control. Default: true.
actions	ReactNode	No	Actions displayed alongside the content.
title	ReactNode	No	Title content.
description	ReactNode	No	Description content.
copy	false | Omit<Omit<ButtonProps & VariantProps<(props?: ({ variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined; size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined; } & ClassProp) | undefined) => string>, "onCopy" | "value"> & { value: string | (() => string); copiedLabel?: string; errorLabel?: string; tooltip?: ReactNode; tooltipProps?: Omit<HintContentProps, "children">; onCopy?(): void; onCopyError?(error: Error): void; }, "value">	No	Configure the copy action. Default: {}.
download	false | (Omit<Omit<ButtonProps & VariantProps<(props?: ({ variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined; size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined; } & ClassProp) | undefined) => string>, "value"> & { value: string | (() => string); filename: string; mimeType?: string; }, "value" | "filename"> & { filename?: string; })	No	Configure the download action. Default: {}.

CodeBlock.PreviewTrigger

Also accepts native element props.

Prop	Type	Required	Description
handle	Handle<unknown>	No	A handle to associate the trigger with a dialog.
payload	unknown	No	A payload to pass to the dialog when it is opened.
id	string	No	Element identifier.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
title	string	No	Title content.
aria-label	string	No	Accessible name for the control.
children	ReactNode	No	Content rendered inside the component.
className	string | ((state: DialogTriggerState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined)	No	Inline styles for the underlying element.

CodeBlock.Content

Also accepts native element props.

Prop	Type	Required	Description
wrap	boolean	No	Wrap long source lines.
lineNumbers	boolean	No	Display source line numbers.
startLine	number	No	Number assigned to the first source line.
highlightRange	{ start: number; end?: number; }	No	Source line range to highlight.
revealLine	number	No	Source line to bring into view.
renderLine	((line: { number: number; text: string; content: ReactNode; selected: boolean; ref?: Ref<HTMLSpanElement>; }) => ReactNode)	No	Customize the rendering of a source line.

CodeBlock.Copy

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
tooltip	ReactNode	No	Tooltip content; null or false suppresses it.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
onCopy	(() => void)	No	Called after copying succeeds.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
copiedLabel	string	No	Accessible label after copying succeeds.
errorLabel	string	No	Accessible label after copying fails.
tooltipProps	Omit<HintContentProps, "children">	No	Props forwarded to the tooltip content.
onCopyError	((error: Error) => void)	No	Handle a clipboard failure.

CodeBlock.Download

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
mimeType	string	No	MIME type used when downloading the content.
filename	string	No	Filename used for the title and language detection.

CodeBlock.Title

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>	No	Replace the underlying element using render composition.

CodeBlock.Header

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm"	No	Size variant. Default: "default".

CodeBlock.Actions

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

CodeBlock.Line

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
variant	"default" | "added" | "removed" | "highlighted" | null	No	Appearance variant. Default: "default".

CodeBlock.Footer

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.