CopyableCode

A command or code row with a built-in copy action.

Preview#

Use CopyableCode for machine setup commands and other copy-first code rows. Use InlineCode for prose tokens and markdown code blocks for rich multi-line code.

npx @botiverse/raft-daemon@latest --server-url https://api.raft.build --api-key sk_machine_0000000000000000000000000000000000000000000000000000000000000000 # Zolplay

curl https://api.raft.build/v1/setup --machine workstation-2

Anatomy#

import { CopyableCode, CopyableCodeAction, CopyableCodeRoot } from "raft-ui";

<CopyableCodeRoot>
  <CopyableCode />
  <CopyableCodeAction />
</CopyableCodeRoot>

API#WIP

CopyableCodeRoot#

Prop	Type	Default	Description
`copied`	boolean	—	Optional controlled copied state. Omit it to let the component manage feedback.
`size`	"sm" \| "md"	"md"	Density for dialog setup rows versus tighter detail-panel rows.
`onCopy`	(value: string) => void \| Promise<void>	—	Optional callback after Action sends the Code text to the clipboard.
`...props`	ComponentPropsWithRef<"div">	—	Owns copied state, size, and copy behavior for composed parts.

CopyableCode#

Prop	Type	Default	Description
`truncate`	boolean	false	Single-line horizontally scrollable treatment for the code text.
`...props`	ComponentPropsWithRef<"code">	—	Code text slot. Its rendered text is the default value copied by Action.

CopyableCodeAction#

Prop	Type	Default	Description
`aria-label`	string	"Copy code"	Accessible name for the icon-only action. When omitted, the label swaps to "Copied code" while the copy state is active. It is not rendered as visible text.
`children`	ReactNode \| ({ copied }) => ReactNode	Copy / Check icon	Optional visible content for the copy trigger.
`...props`	ButtonProps	—	Copy trigger slot with default Copy/Check feedback icon.