# Customizing blocks

> Replace the component for any block type.

Pass `components` to replace the built-in component for any block type:

```typescript
import { NotionRenderer, RichText, type BlockProps } from "notionic"

function Callout({ block, context, children }: BlockProps<"callout">) {
  return (
    <aside className="rounded-lg border p-4">
      <RichText text={block.callout.rich_text} context={context} />
      {children}
    </aside>
  )
}

<NotionRenderer blocks={blocks} components={{ callout: Callout }} />
```

## What a component gets

- **`block`**: the block, typed for its type, so `block.callout` is typed.
- **`children`**: the block's nested blocks, already rendered, or `undefined`.
- **`context`**: pass it to `RichText` and other helpers, so links and headings resolve the same way everywhere.

## Equations inside text

Equations inside text have their own key, `inline_equation`, whose component gets the LaTeX as `expression`:

```typescript
<NotionRenderer
  blocks={blocks}
  components={{ inline_equation: ({ expression }) => <code>{expression}</code> }}
/>
```

## Reusing the defaults

`defaultComponents` holds the built-in components, to wrap or fall back to:

```typescript
import { defaultComponents } from "notionic"

const Code = defaultComponents.code!
```