Code Preview

To be used inside a <CodeGroup /> component to display a preview of some rendered code.

Hello World!

Props

Props	Type	Default	Description
`label`	`String`	`undefined`	Label of the code preview tab. This prop is `required`
`active`	`Boolean`	`false`	TODO
`column`	`Boolean`	`false`	Flex layout direction

Slots

Slot	Description
`default`	A slot where you can add your code block.

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    codePreview: {
      gap: '{space.4}',
      padding: '{space.4}',
    },
  }
})

Edit this page on GitHub

ElementsCode GroupThis component uses slots to create a tab panel of your code examples (in CodePreview) or preview (using markdown code snippet synthax).ElementsDisclosureDisclosure is a component that can be used to hide or show content. The disclosure will be hidden by default, but the user can click on the disclosure title to show the content.