diff --git a/components/Code/index.tsx b/components/Code/index.tsx
index 1add62749..e489094cf 100644
--- a/components/Code/index.tsx
+++ b/components/Code/index.tsx
@@ -16,20 +16,20 @@ if (typeof window !== 'undefined') {
 
 function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
   const copyClass = `${rootClass}_copied`;
-  const button = createRef<HTMLButtonElement>();
+  const buttonRef = createRef<HTMLButtonElement>();
 
   const copier = () => {
     const code = codeRef.current.textContent;
 
     if (copy(code)) {
-      const el = button.current;
+      const el = buttonRef.current;
       el.classList.add(copyClass);
 
       setTimeout(() => el.classList.remove(copyClass), 1500);
     }
   };
 
-  return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
+  return <button ref={buttonRef} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
 }
 
 interface CodeProps {
diff --git a/example/Doc.tsx b/example/Doc.tsx
index c85b0a90b..59e196cd4 100644
--- a/example/Doc.tsx
+++ b/example/Doc.tsx
@@ -61,6 +61,7 @@ const Doc = () => {
   const ci = searchParams.has('ci');
   const lazyImages = searchParams.has('lazyImages');
   const safeMode = searchParams.has('safeMode');
+  const copyButtons = searchParams.has('copyButtons');
 
   const [name, doc] =
     fixture === 'edited' ? [fixture, searchParams.get('edit') || ''] : [docs[fixture].name, docs[fixture].doc];
@@ -76,6 +77,7 @@ const Doc = () => {
       const opts = {
         lazyImages,
         safeMode,
+        copyButtons,
       };
 
       try {
@@ -91,7 +93,7 @@ const Doc = () => {
     };
 
     render();
-  }, [doc, lazyImages, safeMode]);
+  }, [doc, lazyImages, safeMode, copyButtons]);
 
   return (
     <div className="rdmd-demo--display">
@@ -111,7 +113,5 @@ const Doc = () => {
     </div>
   );
 };
-/*
- */
 
 export default Doc;
diff --git a/example/Form.tsx b/example/Form.tsx
index b88b7f605..55b6e5643 100644
--- a/example/Form.tsx
+++ b/example/Form.tsx
@@ -73,6 +73,15 @@ const Form = () => {
         </fieldset>
         <fieldset className="rdmd-demo--fieldset rdmd-demo--options">
           <legend>Options</legend>
+          <div>
+            <label htmlFor="copy-buttons">Copy Buttons</label>
+            <input
+              checked={searchParams.has('copyButtons')}
+              id="copy-buttons"
+              onChange={onCheck('copyButtons')}
+              type="checkbox"
+            />
+          </div>
           <div>
             <label htmlFor="safe-mode">Safe Mode</label>
             <input
diff --git a/lib/compile.ts b/lib/compile.ts
index 967bd6e28..eae3b2421 100644
--- a/lib/compile.ts
+++ b/lib/compile.ts
@@ -2,7 +2,7 @@ import { compileSync, CompileOptions } from '@mdx-js/mdx';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkGfm from 'remark-gfm';
 
-import transformers, { variablesTransformer } from '../processor/transform';
+import { defaultTransforms, variablesTransformer } from '../processor/transform';
 import { rehypeToc } from '../processor/plugin/toc';
 import MdxSyntaxError from '../errors/mdx-syntax-error';
 import { rehypePlugins } from './ast-processor';
@@ -11,16 +11,23 @@ export type CompileOpts = CompileOptions & {
   lazyImages?: boolean;
   safeMode?: boolean;
   components?: Record<string, string>;
+  copyButtons?: boolean;
 };
 
-const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transformers, variablesTransformer];
+const { codeTabsTransformer, ...transforms } = defaultTransforms;
 
-const compile = (text: string, { components, ...opts }: CompileOpts = {}) => {
+const compile = (text: string, { components, copyButtons, ...opts }: CompileOpts = {}) => {
   try {
     const vfile = compileSync(text, {
       outputFormat: 'function-body',
       providerImportSource: '#',
-      remarkPlugins,
+      remarkPlugins: [
+        remarkFrontmatter,
+        remarkGfm,
+        ...Object.values(transforms),
+        [codeTabsTransformer, { copyButtons }],
+        variablesTransformer,
+      ],
       rehypePlugins: [...rehypePlugins, [rehypeToc, { components }]],
       ...opts,
     });
diff --git a/processor/transform/code-tabs.ts b/processor/transform/code-tabs.ts
index 16550ebc5..bef4c786c 100644
--- a/processor/transform/code-tabs.ts
+++ b/processor/transform/code-tabs.ts
@@ -5,54 +5,55 @@ import { NodeTypes } from '../../enums';
 
 const isCode = (node: Node): node is Code => node?.type === 'code';
 
-const codeTabsTransformer = () => (tree: Node) => {
-  visit(tree, 'code', (node: Code) => {
-    const { lang, meta, value } = node;
-
-    node.data = {
-      hProperties: { lang, meta, value },
-    };
-  });
-
-  visit(tree, 'code', (node: Code, index: number, parent: BlockContent) => {
-    if (parent.type === 'code-tabs' || !('children' in parent)) return;
-
-    const length = parent.children.length;
-    let children = [node];
-    let walker = index + 1;
-
-    while (walker <= length) {
-      const sibling = parent.children[walker];
-      if (!isCode(sibling)) break;
-
-      const olderSibling = parent.children[walker - 1];
-      if (olderSibling.position.end.offset + sibling.position.start.column !== sibling.position.start.offset) break;
-
-      children.push(sibling);
-      walker++;
-    }
-
-    // If there is a single code block, and it has either a title or a
-    // language set, let's display it by wrapping it in a code tabs block.
-    // Othewise, we can leave early!
-    if (children.length === 1 && !(node.lang || node.meta)) return;
-
-    const codeTabs: CodeTabs = {
-      type: NodeTypes.codeTabs,
-      children,
-      data: {
-        hName: 'CodeTabs',
-      },
-      position: {
-        start: children[0].position.start,
-        end: children[children.length - 1].position.end,
-      },
-    };
-
-    parent.children.splice(index, children.length, codeTabs);
-  });
-
-  return tree;
-};
+const codeTabsTransformer =
+  ({ copyButtons }: { copyButtons?: boolean } = {}) =>
+  (tree: Node) => {
+    visit(tree, 'code', (node: Code) => {
+      const { lang, meta, value } = node;
+      node.data = {
+        hProperties: { lang, meta, value, copyButtons },
+      };
+    });
+
+    visit(tree, 'code', (node: Code, index: number, parent: BlockContent) => {
+      if (parent.type === 'code-tabs' || !('children' in parent)) return;
+
+      const length = parent.children.length;
+      let children = [node];
+      let walker = index + 1;
+
+      while (walker <= length) {
+        const sibling = parent.children[walker];
+        if (!isCode(sibling)) break;
+
+        const olderSibling = parent.children[walker - 1];
+        if (olderSibling.position.end.offset + sibling.position.start.column !== sibling.position.start.offset) break;
+
+        children.push(sibling);
+        walker++;
+      }
+
+      // If there is a single code block, and it has either a title or a
+      // language set, let's display it by wrapping it in a code tabs block.
+      // Othewise, we can leave early!
+      if (children.length === 1 && !(node.lang || node.meta)) return;
+
+      const codeTabs: CodeTabs = {
+        type: NodeTypes.codeTabs,
+        children,
+        data: {
+          hName: 'CodeTabs',
+        },
+        position: {
+          start: children[0].position.start,
+          end: children[children.length - 1].position.end,
+        },
+      };
+
+      parent.children.splice(index, children.length, codeTabs);
+    });
+
+    return tree;
+  };
 
 export default codeTabsTransformer;
diff --git a/processor/transform/index.ts b/processor/transform/index.ts
index aacdeb55d..ebaedc81c 100644
--- a/processor/transform/index.ts
+++ b/processor/transform/index.ts
@@ -1,8 +1,9 @@
 import calloutTransformer from './callouts';
-import codeTabsTransfromer from './code-tabs';
+import codeTabsTransformer from './code-tabs';
 import embedTransformer from './embeds';
 import imageTransformer from './images';
 import gemojiTransformer from './gemoji+';
+
 import divTransformer from './div';
 import injectComponents from './inject-components';
 import readmeComponentsTransformer from './readme-components';
@@ -21,4 +22,12 @@ export {
   tablesToJsx,
 };
 
-export default [calloutTransformer, codeTabsTransfromer, embedTransformer, imageTransformer, gemojiTransformer];
+export const defaultTransforms = {
+  calloutTransformer,
+  codeTabsTransformer,
+  embedTransformer,
+  imageTransformer,
+  gemojiTransformer,
+};
+
+export default Object.values(defaultTransforms);