CodeBlock

A framed code surface with a header bar, consumer-owned actions, and consumer-rendered code content.

Preview#

Shiki stays outside raft-ui. Let the external renderer produce the complete pre and code structure, then pass that result to the body. CodeBlock owns the frame, the header bar, and the action shell.

message.ts
type Message = {
  author: string;
  body: string;
};

const message: Message = {
  author: "Ada",
  body: "Shipped",
};

Anatomy#

import {
  CodeBlock,
  CodeBlockAction,
  CodeBlockActions,
  CodeBlockBody,
  CodeBlockHeader,
  CodeBlockTitle,
} from "raft-ui";

<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockTitle>message.ts</CodeBlockTitle>
    <CodeBlockActions>
      <CodeBlockAction />
    </CodeBlockActions>
  </CodeBlockHeader>
  <CodeBlockBody>
    <pre>
      <code>{"const online = true;"}</code>
    </pre>
  </CodeBlockBody>
</CodeBlock>

Usage#

Plain content#

Compose a plain pre and code when syntax highlighting is not needed. The surface stays identical; only the body content changes.

message.js
const message = {
  author: "Ada",
  body: "Shipped",
};

Without header#

The header is optional. Render the body alone and the code panel keeps its full treatment without leaving an empty bar.

export function formatAuthor(message: Message) {
  return message.author.trim() || "Unknown";
}

Animated copy#

raft-ui ships the action shell only, so the consumer owns the feedback. This example reuses the docs icon-swap transition at a shorter duration, so the check lands almost immediately after the click.

message-preview.ts
export function messagePreview(message: Message) {
  return message.body.slice(0, 80).trimEnd();
}

API#WIP

CodeBlock#

...props
useRender.ComponentProps<"div">
Framed code surface. Holds the header and the body panel.

CodeBlockHeader#

...props
useRender.ComponentProps<"div">
Optional header bar above the code panel.

CodeBlockTitle#

...props
useRender.ComponentProps<"span">
Header label such as a filename or language.

CodeBlockActions#

...props
useRender.ComponentProps<"div">
Trailing header region for code-block actions.

CodeBlockAction#

...props
useRender.ComponentProps<"button">
Styled action shell. raft-ui owns only the appearance; the consumer supplies the icon and the behavior.

CodeBlockBody#

...props
useRender.ComponentProps<"div">
Inner code panel. Pass the complete pre and code, from plain markup or an external highlighter.