Code Group

This component uses slots to create a tab panel of your code examples (in CodePreview) or preview (using markdown code snippet synthax).

Yarn

yarn add docux

Slots

Slot	Description
`default`	Code blocks or markdown code snippets

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
   elements: {
      codeGroup: {
         margin: '0px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: '{elements.border.primary.static}',
         borderRadius: '{elements.radii.base}',
         tabs: {
            flex: '1',
            paddingY: '{space.2}',
            paddingX: '{space.4}',
            fontFamily: '{font.mono}',
            fontSize: '{text.sm.fontSize}',
            lineHeight: '{text.sm.lineHeight}',
            letterSpacing: '{letterSpacing.tight}',
            borderInlineStart: '1px solid {elements.border.primary.static}',
            borderInlineEnd: '1px solid {elements.border.primary.static}',
            textAlign: 'start',
            firstOfType: {
               border: 'none'
            },
            lastOfType: {
               border: 'none'
            },
            icon: {
               marginInlineEnd: '{space.2}',
               size: '{space.4}',
            },
            inactive: {
               color: {
                  static: {
                     initial: '{color.gray.500}',
                     dark: '{color.gray.500}'
                  },
                  hover: {
                     initial: '{color.gray.900}',
                     dark: '{color.gray.300}'
                  }
               },
               backgroundColor: {
                  initial: '{color.gray.100}',
                  dark: '{color.black}'
               },
               filter: {
                  static: 'grayscale(100%)',
                  hover: 'grayscale(0%)'
               },
               borderBlockEnd: '1px solid {elements.border.primary.static}',
            },
            active: {
               color: {
                  initial: '{color.gray.900}',
                  dark: '{color.gray.300}'
               },
               backgroundColor: {
                  initial: '{color.gray.50}',
                  dark: '{prose.code.block.backgroundColor}'
               },
               borderBlockEnd: '1px solid transparent',
            }
         }
      },
   }
})

Edit this page on GitHub

ElementsCode CollapseCodeCollapse is a component that allows you to collapse code blocks in your documentation. It is useful when you want to show a code snippet but don't want to overwhelm the reader with too much code.ElementsCode PreviewTo be used inside a <CodeGroup /> component to display a preview of some rendered code.