Skip to content


Table of contents
Table of contents

The Do and Dont components are used for providing good and bad examples within documentation.


To use these components in your MDX files, import them like so:

import {DoDontContainer, Do, Dont} from '@primer/gatsby-theme-doctocat'


To create a side-by-side Do/Don't example, wrap the Do and Dont components with the DoDontContainer component:

Note: Caption text should describe the image and be able to stand on its own. The alt prop should be used if a more detailed description of the image is needed.


The DoDontContainer component also accepts a stacked prop to create stacked Do/Don't examples:

Edit this page on GitHub
3 contributorsdmarceycolebemisemplums
Last edited by dmarcey on September 6, 2019