Component

Code Block

A reusable code shell with copy action, header label, and space for inline controls.

Preview

code

import { Button } from "axie-ui";

export function Example() {
  return <Button>Save changes</Button>;
}

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { CodeBlock } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/code-block.json

Copied source import

code

import "@/styles/axie.css";import { CodeBlock } from "@/components/axie/code-block";

Prefer @axie/code-block? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { CodeBlock } from "axie-ui";export function Example() {  return (    <CodeBlock      code={`pnpm add axie-ui`}      label="install"    />  );}

Accessibility

Keep copied text equivalent to the visible snippet.
Use the copy button as a convenience, not the only way to access code.
Avoid placing required instructions only inside a horizontally scrolling snippet.

With controls

Use the controls slot for package-manager tabs or related snippet actions.

install

pnpm add axie-ui

API Reference

Prop	Type	Default	Description
code	string	-	Code string to render when children are not supplied.
copyText	string	-	Text copied by the copy button. Defaults to code or string children.
label	ReactNode	code	Small header label above the snippet.
controls	ReactNode	-	Inline header controls such as package-manager tabs.
showCopy	boolean	true	Whether to render the copy action.
className / preClassName / codeClassName	string	-	Classes for the wrapper, pre, or code elements.