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