# Long file with expand

> Collapsed at a line budget with an expand control and a line offset.

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-10-light-de67df95e4e1686c.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-10.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-10.json
```

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

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/code-block`, `scroll-area`

## Files

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

```tsx
"use client"

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

import { cn } from "cn"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

/**
 * An excerpt that opens partway through a generated file, so the first row
 * reads 120 rather than 1. `startLine` only resets the gutter's CSS counter:
 * line specs keep addressing source lines, so moving the offset never
 * invalidates a `highlightedLines` value.
 */
const code = Array.from(
  { length: 26 },
  (_, index) =>
    `export const rule${index + 120} = { id: ${index + 120}, enabled: true }`
).join("\n")

/*
 * The collapse cap lives on the ScrollArea VIEWPORT and follows the block's
 * own `expanded` state through `useCodeBlockConfig`, so "Show more" releases
 * the cap and every scrollbar on this block is the shadcn one. `maxLines`
 * still marks the block collapsible; with the surface composed here it caps
 * nothing itself.
 */
function CollapsibleArea({ children }: { children: React.ReactNode }) {
  const { expanded } = useCodeBlockConfig("CollapsibleArea")

  return (
    <ScrollArea
      className={cn(
        "rounded-[inherit]",
        /* overflow-hidden makes collapsed mean collapsed - without it the
           reader could wheel through everything under the "Show more" fade.
           The 208px cap is chosen to LAND near maxLines' 8 rows, not derived
           from it. */
        !expanded &&
          "**:data-[slot=scroll-area-viewport]:max-h-52 **:data-[slot=scroll-area-viewport]:overflow-hidden"
      )}
    >
      {children}
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

export function Pattern() {
  return (
    <div className="w-full max-w-2xl">
      <CodeBlock
        code={code}
        language="typescript"
        showLineNumbers
        startLine={120}
        maxLines={8}
      >
        <CodeBlockHeader>
          <CodeBlockTitle>rules.generated.ts</CodeBlockTitle>
          <CodeBlockCopyButton className="ml-auto" />
        </CodeBlockHeader>
        <CollapsibleArea>
          <CodeBlockContent />
        </CollapsibleArea>
        <CodeBlockExpandButton />
      </CodeBlock>
    </div>
  )
}
```