Server shell + client leaf

Code Block

A compound multi-line code container with header, copy button and editor chrome.

App.tsx

import { AstralisProvider } from "astralis-ui";
import "astralis-ui/styles.css";

export function App({ children }) {
  return <AstralisProvider>{children}</AstralisProvider>;
}

"use client";

import { Box, CodeBlock } from "astralis-ui";

const example = `import { AstralisProvider } from "astralis-ui";
import "astralis-ui/styles.css";

export function App({ children }) {
  return <AstralisProvider>{children}</AstralisProvider>;
}`;

export function CodeBlockDemo() {
  return (
    <Box w="full">
      <CodeBlock.Root variant="solid" code={example}>
        <CodeBlock.Header>
          <CodeBlock.WindowControls />
          <CodeBlock.Title>App.tsx</CodeBlock.Title>
          <CodeBlock.Control>
            <CodeBlock.CopyTrigger />
          </CodeBlock.Control>
        </CodeBlock.Header>
        <CodeBlock.Content>
          <CodeBlock.Code />
        </CodeBlock.Content>
      </CodeBlock.Root>
    </Box>
  );
}

Terminal

npx astralis-cli init

variant

size

import { CodeBlock } from "astralis-ui";

<CodeBlock.Root
  code="npx astralis-cli init"
>
  <CodeBlock.Header>
    <CodeBlock.Title>Terminal</CodeBlock.Title>
    <CodeBlock.Control>
      <CodeBlock.CopyTrigger />
    </CodeBlock.Control>
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.Code />
  </CodeBlock.Content>
</CodeBlock.Root>

Import#

import { CodeBlock } from "astralis-ui";
// CodeBlock.Root, .Header, .Title, .Control, .CopyTrigger,
// .WindowControls, .Content, .Code

Anatomy#

Root holds the source string via code and hands it to its parts during server render: Code renders it when given no children, and CopyTrigger — the compound's only client part — copies the rendered code to the clipboard. Header is an optional top row for Title, WindowControls (the macOS traffic lights) and a trailing Control slot; Content is the scrollable <pre> wrapping Code.

<CodeBlock.Root variant="solid" code={source}>
  <CodeBlock.Header>
    <CodeBlock.WindowControls />
    <CodeBlock.Title>App.tsx</CodeBlock.Title>
    <CodeBlock.Control>
      <CodeBlock.CopyTrigger />
    </CodeBlock.Control>
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.Code />
  </CodeBlock.Content>
</CodeBlock.Root>

Variants#

The same three-variant family as Code; solid is the strongest surface — it tracks the active theme (dark block in dark mode, light in light) — and pairs well with WindowControls.

pnpm add astralis-ui  # subtle

pnpm add astralis-ui  # outline

pnpm add astralis-ui  # solid

"use client";

import { CodeBlock, VStack } from "astralis-ui";

const variants = ["subtle", "outline", "solid"] as const;

export function CodeBlockVariants() {
  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="md">
      {variants.map((variant) => (
        <CodeBlock.Root key={variant} variant={variant} size="sm" code={`pnpm add astralis-ui  # ${variant}`}>
          <CodeBlock.Content>
            <CodeBlock.Code />
          </CodeBlock.Content>
        </CodeBlock.Root>
      ))}
    </VStack>
  );
}

Syntax highlighting#

Code Block renders plain text by itself — bring your own highlighter and pass its output as highlightedHtml on Code. The blocks on this very site are Shiki output rendered this way:

import { codeToHtml } from "shiki";

const html = await codeToHtml(source, { lang: "tsx", theme: "github-dark" });

<CodeBlock.Root variant="solid" code={source}>
  <CodeBlock.Content>
    <CodeBlock.Code highlightedHtml={html} />
  </CodeBlock.Content>
</CodeBlock.Root>

Keep passing the raw string as code on Root so CopyTrigger copies the unhighlighted source.

Props#

CodeBlock.Root:

Prop	Type	Default	Description
`variant`	`"subtle" \| "solid" \| "outline"`	`"subtle"`	Container style. Every variant follows the active light or dark theme.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Font size and padding of the content.
`code`	`string`	—	The source. Code renders it when given no children, and CopyTrigger copies it.

Parts#

Every part also takes its element's native attributes and className.

Prop	Type	Default	Description
`CodeBlock.Header`	`div props`	—	Optional top row for Title, WindowControls and a trailing Control slot.
`CodeBlock.Title`	`span props`	—	File name or caption in the header.
`CodeBlock.WindowControls`	`span props`	—	Three decorative window dots, hidden from assistive technology.
`CodeBlock.Control`	`div props`	—	Trailing header slot, usually holding the CopyTrigger.
`CodeBlock.CopyTrigger`	`code?: string · children?: ReactNode \| ((copied: boolean) => ReactNode)`	—	Copies the Root's code, or its own code override. A render function replaces the default copy and check glyphs.
`CodeBlock.Content`	`pre props`	—	The scrollable pre element that wraps Code.
`CodeBlock.Code`	`highlightedHtml?: string`	—	Renders the Root's code as plain text, or your highlighter's HTML when highlightedHtml is set.