# Nested code folding

> Fold regions detected from indentation, with nesting and fold-all controls.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-code-block-23).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-23
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-23-light-0ab3231bd36b53bc.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-23.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-code-block-23.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `@reui/code-block`, `scroll-area`, `separator`

## Files

### `c-code-block-23.tsx`

```tsx
"use client"

import { useState } from "react"
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/reui/code-block/code-block"

import { Button } from "@/components/ui/button"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const code = `export async function syncWorkspace(workspaceId: string) {
  const workspace = await db.workspace.findUnique({ where: { id: workspaceId } })

  if (!workspace) {
    throw new WorkspaceNotFoundError(workspaceId)
  }

  const members = await db.member.findMany({ where: { workspaceId } })

  for (const member of members) {
    if (member.status === "invited") {
      await mail.send({
        to: member.email,
        template: "workspace-reminder",
      })
    }
  }

  return { synced: members.length }
}`

/*
 * The block detects its own regions from indentation, so the only reason this
 * list exists is the "Fold all" button: the snippet is a literal here, so its
 * region starts are known without asking the primitive for them.
 *
 * The ScrollArea composes INSIDE the block, under the header, so the fold
 * controls never scroll away and the block's own chrome stays the container.
 */
const REGION_STARTS = [1, 4, 10, 11, 12]

export function Pattern() {
  /* Opens with the inner branch folded, so the nesting is visible at a glance:
     folding line 10 swallows it, and unfolding 10 brings it back still
     folded. */
  const [folded, setFolded] = useState<number[]>([11])

  return (
    <CodeBlock
      code={code}
      language="typescript"
      showLineNumbers
      className="w-full max-w-2xl"
      foldable
      folded={folded}
      onFoldedChange={setFolded}
    >
      <CodeBlockHeader className="gap-1.5">
        <CodeBlockTitle>sync-workspace.ts</CodeBlockTitle>
        <div className="ml-auto flex items-center gap-1">
          <Button
            size="xs"
            variant="ghost"
            onClick={() => setFolded(REGION_STARTS)}
          >
            Fold all
          </Button>
          <Button
            size="xs"
            variant="ghost"
            disabled={!folded.length}
            onClick={() => setFolded([])}
          >
            Unfold all
          </Button>
          <Separator orientation="vertical" className="h-4" />
          <CodeBlockCopyButton />
        </div>
      </CodeBlockHeader>
      <ScrollArea className="rounded-[inherit] **:data-[slot=scroll-area-viewport]:max-h-72">
        <CodeBlockContent />
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </CodeBlock>
  )
}
```