Chakra UI Prose

Chakra UI Prose is a "second-party" package that adds ready-made styles to a remote HTML content. It's "second-party" because it's created by one of Chakra UI's maintainers, but it's not part of the core Chakra UI package just yet. The reason for that is to avoid bloating the core library while we figure out how much people actually need it. If there's a demand for it, it will be part of the core Chakra UI package.

If you need this package to be part of the core library, don't forget to let us know in this discussion thread.

Chakra UI Prose is essentially a custom component that applies styles to its children content.

Integrating the Prose component is fairly easy. To get started, you need to install the package:

yarn add @nikolovlazar/chakra-ui-prose

# or

npm i @nikolovlazar/chakra-ui-prose

Then, you need to use the withProse theme extension to add the Prose component styling into your own theme:

import { extendTheme } from "@chakra-ui/react";
import { withProse } from "@nikolovlazar/chakra-ui-prose";

const theme = extendTheme(
  {
    // your own theme
  },
  withProse()
);

export default theme;

To apply the styles to the remote HTML content, you just need to wrap it with the Prose component:

import { Prose } from "@nikolovlazar/chakra-ui-prose";

const MyPage = (content) => {
  return <Prose>{content}</Prose>;
};

export default MyPage;

If you want to override the default Prose style, you can do so by providing your style overrides as an argument to the withProse extension:

const theme = extendTheme(
  {},
  withProse({
    baseStyle: {
      h2: {
        fontWeight: "light",
      },
    },
  })
);

You can refer to the default theme to understand how you can override a certain element style.

There's also a CodeSandbox available that uses the Chakra UI Prose package:

  import {
  ChakraProvider,
  extendTheme
} from "@chakra-ui/react";
import { withProse } from "@nikolovlazar/chakra-ui-prose";

import Prose from './Prose';

const theme = extendTheme(
  {},
  withProse({
    baseStyle: {
      h2: {
        fontWeight: "light"
      }
    }
  })
);

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Prose />
    </ChakraProvider>
  );
}

export default App;