Code Block

export function Button({ children }: { children: React.ReactNode }) {
  return <button className="rounded-lg px-3 py-2">{children}</button>
}

Examples

The bar

Pass label for a filename, or lang for a language. A filename shows as written; a bare language is uppercased, so the two never read alike.

bun add @fern-ui/color-picker

:root {
  --surface: #ffffff;
  --accent: #0485f7;
}

Omit both and the bar does not render at all.

export const clamp = (n: number, min: number, max: number) =>
  Math.min(max, Math.max(min, n))

import { PreviewCode } from "@/components/preview"

<PreviewCode standalone label="button.tsx">
  {/* a fenced code block, or highlighted output */}
</PreviewCode>

When to use what

• label names the file. Falls back to lang when omitted, so the bar always says what you are looking at.
• standalone rounds all four corners. Leave it off when the block is fused to a preview above it.
• lineNumbers adds the gutter. Off by default — numbers are noise unless you are pointing at a specific line.
• Blocks taller than 150px collapse behind an Expand code button. Shorter ones render whole, with no button.

Install commands

InstallTabs renders one command per package manager in the same shell, with the tab row in place of the filename bar. Commands are highlighted server-side, so they match every other block.

bun add @fern-ui/color-picker

<InstallTabs pkg="@fern-ui/color-picker" />

Rendering a source file

ComponentSource reads a file from a package and pipes it through the same viewer, so a copy-paste component can show exactly what you would copy.

<ComponentSource pkg="color-picker" file="color-picker.tsx" />

Installation

Copy these into your project. PreviewCode is the viewer; ComponentSource reads a file and pipes it through it; InstallTabs renders the command row.

Loading preview.tsx…

Loading component-source.tsx…

Loading install-tabs-client.tsx…

Props

PreviewCode

InstallTabs

ComponentSource