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',
}
}
},
}
})
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.