CodeBlock

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

GitHub

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#

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"div">—Framed code surface. Holds the header and the body panel.

CodeBlockHeader#

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"div">—Optional header bar above the code panel.

CodeBlockTitle#

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"span">—Header label such as a filename or language.

CodeBlockActions#

PropTypeDefaultDescription
...propsuseRender.ComponentProps<"div">—Trailing header region for code-block actions.

CodeBlockAction#

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

CodeBlockBody#

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