Code block

Shadcn-style code block with a filetype-tagged header, copy button, optional collapse-with-Expand, and shiki-powered syntax highlighting. Used by the docs Manual install and Usage cards across the system.

TScomponents/alert-example.tsx

import { Alert } from "@/components/ui/alert";

<Alert variant="brand" title="Heads up" />

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/code-block.json

Usage

Import from the master file. Pair with `highlightCode(code, language)` in a server module to get shiki output for the `html` prop.

TSExample

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

export function Example() {
  return (
    <CodeBlock
      code={`<Alert variant="brand">Heads up</Alert>`}
      language="tsx"
      filename="components/alert-example.tsx"
    />
  );
}

Composition

Anatomy of the CodeBlock primitive.

CodeBlock
├── Header strip (when filename is set)
│   ├── Filetype glyph + filename
│   └── Expand toggle (collapsible) + Copy
└── Body
    ├── Highlighted code (shiki HTML when html is passed)
    └── Expand overlay (collapsible + collapsed only)

With filename

Header strip shows the filetype glyph + the file path; right-side actions are Copy (and Expand when `collapsible`).

TScomponents/alert-example.tsx

import { Alert } from "@/components/ui/alert";

<Alert variant="brand" title="Heads up" />

Collapsible

Long files default to a 16rem (`max-h-64`) viewport with a gradient fade and an Expand button overlay. Toggling Expand in the header swaps it for Collapse.

TScomponents/ui/alert.tsx

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const alertVariants = cva(
  "group/alert relative grid w-full gap-0.5 rounded-lg border p-6 text-left text-sm",
  {
    variants: {
      variant: {
        default: "border-border bg-muted/50 text-foreground",
        brand: "border-primary/30 bg-primary/10 text-primary",
        info: "border-sky-600/30 bg-sky-600/10 text-sky-600",
        success: "border-green-600/30 bg-green-600/10 text-green-600",
        warning: "border-amber-600/30 bg-amber-600/10 text-amber-600",
        destructive:
          "border-destructive/30 bg-destructive/10 text-destructive",
      },
    },
    defaultVariants: { variant: "default" },
  },
);

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn("squad-ui", alertVariants({ variant }), className)}
      {...props}
    />
  );
}

export { Alert, alertVariants };

Terminal

Bash commands use `language="bash"` and the dollar-sign filetype glyph. Pair with `filename="Terminal"` for the canonical install header.

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/alert.json

Bare

Without a filename, the code block hides the header strip and pins the copy button to the top-right.

import { Alert } from "@/components/ui/alert";

<Alert variant="brand" title="Heads up" />

API Reference

Props exposed by the CodeBlock primitive.

CodeBlock

Prop	Type	Default	Description
`code`	string	—	Raw source — used for the copy-to-clipboard payload.
`html`	string	—	Pre-highlighted shiki HTML. Produce with `highlightCode(code, language)` in a server module. Falls back to plain `<pre>` when omitted.
`language`	"tsx" \| "ts" \| "jsx" \| "js" \| "bash" \| "css" \| "json" \| "text"	"tsx"	Drives the filetype glyph and the shiki grammar.
`filename`	string	—	When set, renders the header strip with filetype glyph + filename + Copy.
`collapsible`	boolean	false	Collapse the body to max-h-64 with a fade-out gradient + Expand overlay.
`defaultCollapsed`	boolean	true	Initial collapsed state when `collapsible` is true.