---
title: Customize rich text styles
category: Custom bricks
order: 7
status: published
summary: Customize the RichText render functions for bold text and links.
estimatedTime: 3 min
keywords: custom styles rich text richtext
---

## What you'll build

In this how-to, you'll customize how your `RichText` field renders bold text and links.

You'll:

- override `renderBold` to change the bold style
- override `renderLink` to style links
- import the React Bricks `Link` component

At the end, your rich text will use a pink bold style and custom blue links.

## Start from the previous guide

After the previous guide, your `TextImage` brick should look like this:

```tsx
import { RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  return (
    <>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
      />
    </>
  )
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

export default TextImage
```

Now we'll customize how bold text and links are rendered.

## Customize the bold style

First, add a `renderBold` prop to the `RichText` component:

```tsx {12-14}
<RichText
  propName="description"
  value={description}
  placeholder="Type a description..."
  renderBlock={({ children }) => (
    <p className="text-lg text-slate-600">{children}</p>
  )}
  allowedFeatures={[types.RichTextFeatures.Bold, types.RichTextFeatures.Link]}
  renderBold={({ children }) => <b className="text-pink-500">{children}</b>}
/>
```

This replaces the default bold renderer with your own markup and classes.

## Customize the link style

Now let's customize how links are rendered.

Import `Link` from `react-bricks/rsc` if you're using Next.js with the App Router, or from `react-bricks/astro` if you're using Astro, and use it inside `renderLink`:

```tsx {1, 19-27}
import { Link, RichText, Text, types } from 'react-bricks/rsc'

// ...
;<RichText
  propName="description"
  value={description}
  placeholder="Type a description..."
  renderBlock={({ children }) => (
    <p className="text-lg text-slate-600">{children}</p>
  )}
  allowedFeatures={[types.RichTextFeatures.Bold, types.RichTextFeatures.Link]}
  renderBold={({ children }) => <b className="text-pink-500">{children}</b>}
  renderLink={({ children, href, target, rel }) => (
    <Link
      href={href}
      target={target}
      rel={rel}
      className="text-sky-500 hover:text-sky-600 transition-colors"
    >
      {children}
    </Link>
  )}
/>
```

## Why use the React Bricks `Link` component

It's important to use the React Bricks `Link` component, imported from `react-bricks/rsc` in Next.js App Router projects or from `react-bricks/astro` in Astro projects, not a plain `<a>` tag and not the framework link directly in this render function.

On the admin interface, this React Bricks `Link` is visually editable and does not trigger navigation when you click it. That lets editors select and edit the link text without accidentally opening the page.

Under the hood, React Bricks uses the link component from the platform. In this project, that means the Next.js `Link` component is used for internal links.

## Why style the link explicitly

If you're using Tailwind CSS, links are unstyled by default.

So even when the link feature is enabled, you usually want to provide `renderLink` with classes to make links clearly visible and interactive.

In this example we use:

- `text-sky-500` for the default color
- `hover:text-sky-600` for the hover state
- `transition-colors` for a smoother hover effect

## A note about `rel` and security

React Bricks passes the correct `rel` value to your `renderLink` function.

So if an editor creates a link with `target="_blank"`, React Bricks can also provide the proper `rel` attribute for security reasons, such as `noopener noreferrer`.

That's why the custom render function should pass `rel={rel}` through to the `Link` component.

## Final code

Your full `TextImage.tsx` file should now look like this:

```tsx
import { Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  return (
    <>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
        renderBold={({ children }) => (
          <b className="text-pink-500">{children}</b>
        )}
        renderLink={({ children, href, target, rel }) => (
          <Link
            href={href}
            target={target}
            rel={rel}
            className="text-sky-500 hover:text-sky-600 transition-colors"
          >
            {children}
          </Link>
        )}
      />
    </>
  )
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

export default TextImage
```

## Try it in the editor

Go back to the visual editor and add or edit the `Text Image` brick.

Now you can:

- make part of the description bold and see it render in pink
- add a link and see it render with your custom link styles
- edit links visually in the admin without triggering navigation

## What's next

Your rich text now has custom rendering for both bold text and links.

From here, you can keep customizing other rich-text styles or move on to adding images and sidebar controls.