Code Block

Shiki-highlighted code card with an Aqua copy button.

function think(different) {
  return "Here's to the crazy ones."
}

installnpx shadcn@latest add @aqua/code-block

Usage

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

<CodeBlock code={`const answer = 42`} lang="ts" />

CodeBlock is an async server component: it highlights with shiki at render time, so no highlighter ships to the client. The copy button in the corner is a separate client island — every snippet on this site, including this one, is this exact component.