Chakra Prose is finally here

I am a big fan of Chakra UI I have used it for years, it's my go to when building out basic websites as it is extremely fast to get everything up and going.

The problem was with using something like TinaCMS or Markdown is the content gets parsed as standard elements, for example <h1> and Chakra overrides all styling and expects you to use <Heading as="h1">. Which leads you to two options, override all of the styles manually or pass html through and send back Chakra specific components.

Introducing Chakra Prose

You maybe have noticed that my site, has changed a little bit when reading, the site has decent spacing, the sizes have changed and the reading experience is so much better. This is because of the new package from one of the core maintainers (https://github.com/nikolovlazar/chakra-ui-prose), this allows you to implement Prose on your site using the <Prose> component.

How to implement Chakra Prose

To add Chakra Prose firstly you need to install the package:

npm i @nikolovlazar/chakra-ui-prose

Once you have installed the package you are ready to start configuring your Chakra UI application. If you don't have a custom theme, you need to create one which you can read in detail in the Chakra documentation but here is an example of a basic one.

// 1. Import extend theme
import { extendTheme } from '@chakra-ui/react';
// 2. extend the theme
const theme = extendTheme({})
export default theme;
JSX
Then you can import this and pass it to your ChakraProvider in Next.js this is in your _app.js and will look like the following:

import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';

export default function App() {
  <ChakraProvider theme={theme}>
  <Component {...pageProps} />
</ChakraProvider>
}

To add Chakra Prose, you need to add it to your custom theme. First you need to import withProse and then add it to the extendTheme like so

import { extendTheme } from '@chakra-ui/react';
import { withProse } from '@nikolovlazar/chakra-ui-prose';
const theme = extendTheme(
    { config },
    withProse())

export default theme;

Now you application is ready for prose, and to use it you can wrap any part of your website or application in the <Prose> component. Of course on top of this, you can extend the prose theme to be customized by using the same extending that Chakra offers for example:

withProse({
    baseStyle: {
        pre: {
            fontFamily: 'monospace',
            fontSize: '1rem',
            lineHeight: '1.5',
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',
            wordWrap: 'break-word',
            overflowWrap: 'break-word',
            overflow: 'auto',
            padding: '0.2rem 0.4rem',
            margin: '0.2rem 0.4rem',
            borderRadius: '0.5rem',
            border: '1px solid #ddd',
            backgroundColor: '#000000',
            border: '1px solid #ccc',
            transition: 'all 0.2s ease-in-out',
            color: '#fff'
        }
    }
});

This would create a custom code block that you have seen throughout this blog post. I am so glad they finally created a recipe for this as it really reduces the amount of code you need to write to get a good standardized experience.