Skip to content


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