---
title: Callout
description: Render notices with optional titles and descriptions
type: reference
summary: Use Callout directly or compose its container, title, and description primitives.
url: /docs/components/callout
source: apps/template/content/docs/components/callout.mdx
related:
  - /docs/components
---

# Callout

import { Callout } from "@vercel/geistdocs/components/callout";

<div className="not-prose my-6 rounded-lg border border-gray-400 bg-background-100 p-6">
> Restart the dev server after changing configuration.
</div>

```tsx
import { Callout } from "@vercel/geistdocs/components/callout";

export function Notice() {
  return <Callout title="Note">Restart the dev server after changing configuration.</Callout>;
}
```

The subpath also exports `CalloutContainer`, `CalloutTitle`, and `CalloutDescription`. These components are included in the default MDX component map.