---
title: Summary box (React) - USWDS + Tailwind
description: Highlight key information or next steps from a longer page with a summary box.
---

# Summary box

Highlight key information or next steps from a longer page with a summary box.

## Examples

```tsx
import { SummaryBox } from '@uswds-tailwind/react/summary-box'

export default function SummaryBoxDemo() {
  return (
    <SummaryBox.Root>
      <SummaryBox.Heading>Key information</SummaryBox.Heading>
      <SummaryBox.Content className="prose">
        <ul>
          <li>If you are under 18, you cannot apply.</li>
          <li>You must be a U.S. citizen or permanent resident.</li>
          <li>You must have a valid Social Security number.</li>
        </ul>
      </SummaryBox.Content>
    </SummaryBox.Root>
  )
}
```

## Component API

Place a Heading and Content inside Root to emphasize key information.

### Root `<div>`

Place Heading before Content.

### Heading `<div>`

Names the summary box. Place a heading element inside at the appropriate page level.

### Content `<div>`

Put summary text and supporting links below Heading.