# Soft wrap

> Long single-line content with a wrap toggle.

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

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

## Files

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

```tsx
"use client"

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

import { Separator } from "@/components/ui/separator"

const code = `export const contentSecurityPolicy = "default-src 'self'; script-src 'self' 'nonce-{NONCE}' https://cdn.example.com; style-src 'self' 'nonce-{NONCE}'; img-src 'self' data: https://images.example.com; font-src 'self' data:; connect-src 'self' https://api.example.com"`

export function Pattern() {
  // Controlled wrap: `wrap` plus `onWrapChange` moves the state up to the page,
  // so the toggle and the status chip read one value. `defaultWrap` would keep
  // it inside the block, leaving the header nothing to render.
  const [wrap, setWrap] = useState(true)

  return (
    <div className="w-full max-w-2xl">
      <CodeBlock
        code={code}
        language="typescript"
        wrap={wrap}
        onWrapChange={setWrap}
      >
        <CodeBlockHeader>
          <CodeBlockTitle>security-headers.ts</CodeBlockTitle>
          <div className="ml-auto flex items-center gap-1.5">
            <Badge variant="info-light">{wrap ? "Wrapped" : "Scrolling"}</Badge>
            <CodeBlockWrapToggle size="xs" />
            <Separator orientation="vertical" className="h-4" />
            <CodeBlockCopyButton />
          </div>
        </CodeBlockHeader>
      </CodeBlock>
    </div>
  )
}
```