OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Code Block

Displays a code block with an optional header and output area.

helloWorld();

 <CodeBlock.Root>
  <CodeBlock.Content>helloWorld();</CodeBlock.Content>
</CodeBlock.Root>

Anatomy

Import the component and piece the parts together.

 import { CodeBlock } from '@workos-inc/design-system';

export default () => (
  <CodeBlock.Root>
    <CodeBlock.Output />
    <CodeBlock.Header />
    <CodeBlock.Content>
      <CodeBlock.LineGroup>
        <CodeBlock.Line />
      </CodeBlock.LineGroup>
    </CodeBlock.Content>
  </CodeBlock.Root>
);

API Reference

The Code Block component is made up of six parts: Root, Output, Header, Content, Line Group, and Line. View source

Root

Groups the Code Block parts. This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb.

Output

An optional area to display the output of the Code Block, like a rendered React component or a result of a bash command. This component is based on the output element.

An optional area to display elements related to the Code Block, like its title, tabs, or current language. This component is based on the div element.

Content

Code contents of the Code Block. This component is based on the pre element.

There is no automatic syntax highlighting – pick any tech that fits your project.

Line Group

Provides layout and gutters to the Lines. The gutters may show automatic line numbers or indicate a CLI interface. This component is based on the table element.

Prop	Type	Default
`gutter`	`"numbers" \| "cli" \| "none"`	`"numbers"`

Line

An optional component that renders a line of code. Must be used within a Line Group. This component is based on the tr element.

Prop	Type	Default
`color`	`"yellow" \| "green" \| "red"`	`–`

Examples

With Output

Use the Output part to display the result of running the Code Block code.

I love Bash

 echo "I love Bash"

 <CodeBlock.Root>
  <CodeBlock.Output>
    <Box p="5">
      <Code variant="ghost">I love Bash</Code>
    </Box>
  </CodeBlock.Output>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="cli">
      <CodeBlock.Line>
        <span className="token builtin class-name">echo</span>
        <span className="token"> </span>
        <span className="token string">"I love Bash"</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

With Header

Use the Header part to display related information, like the Code Block title and language.

Install the WorkOS SDKBash

 npm install @workos-inc/node

 <CodeBlock.Root>
  <CodeBlock.Header>
    <Text size="2" weight="bold">
      Install the WorkOS SDK
    </Text>
    <Text color="gray" size="1">
      Bash
    </Text>
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="cli">
      <CodeBlock.Line>
        <span className="token function">npm</span>
        <span className="token"> </span>
        <span className="token function">install</span>
        <span className="token"> </span>
        <span className="token">@workos-inc/node</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

With Tabs

The Code Block design can accommodate Tabs in the header.

Bash

 npm install @workos-inc/node
yarn @workos-inc/node

 <Tabs.Root defaultValue="npm">
  <CodeBlock.Root>
    <CodeBlock.Header>
      <Tabs.List>
        <Tabs.Trigger value="npm">npm</Tabs.Trigger>
        <Tabs.Trigger value="yarn">Yarn</Tabs.Trigger>
      </Tabs.List>
      <Text color="gray" size="1">
        Bash
      </Text>
    </CodeBlock.Header>
    <CodeBlock.Content>
      <Tabs.Content value="npm">
        <CodeBlock.LineGroup gutter="cli">
          <CodeBlock.Line>
            <span className="token function">npm</span>
            <span className="token"> </span>
            <span className="token function">install</span> @
            <span className="token">workos</span>-
            <span className="token">inc</span>/
            <span className="token">node</span>
          </CodeBlock.Line>
        </CodeBlock.LineGroup>
      </Tabs.Content>
      <Tabs.Content value="yarn">
        <CodeBlock.LineGroup gutter="cli">
          <CodeBlock.Line>
            <span className="token function">yarn</span> @
            <span className="token">workos</span>-
            <span className="token">inc</span>/
            <span className="token">node</span>
          </CodeBlock.Line>
        </CodeBlock.LineGroup>
      </Tabs.Content>
    </CodeBlock.Content>
  </CodeBlock.Root>
</Tabs.Root>

With command line gutters

Use gutter="cli" to display gutters that indicate a command line interface. The second and subsequent lines will indicate a multi-line input.

 curl https://api.workos.com/connections \
  --header "Authorization: Bearer sk_example_123456789 "

 <CodeBlock.Root>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="cli">
      <CodeBlock.Line>
        <span className="token function">curl</span>
        <span> </span>
        <span className="token">https</span>://
        <span className="token">api</span>.<span className="token">workos</span>
        .<span className="token">com</span>/
        <span className="token">connections</span>
        <span> </span>
        <span className="token punctuation">\</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}--</span>
        <span className="token">header</span>
        <span> </span>
        <span className="token string">
          "Authorization: Bearer sk_example_123456789 "
        </span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

With line numbers

Use gutter="numbers" to display automatic line numbers in the gutters.

 const organizationDomain = {
  object: 'organization_domain',
  id: 'org_01EHZNVPK3SFK441A1RGBFSVCT',
  domain: 'foo-corp.com',
};

 <CodeBlock.Root>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="numbers">
      <CodeBlock.Line>
        <span className="token keyword">const</span>
        <span> </span>
        <span className="token">organizationDomain</span>
        <span> </span>
        <span className="token operator">=</span>
        <span> </span>
        <span className="token punctuation">{'{'}</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">object</span>
        <span className="token operator">:</span>
        <span> </span>
        <span className="token string">'organization_domain'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">id</span>
        <span className="token operator">:</span>
        <span> </span>
        <span className="token string">'org_01EHZNVPK3SFK441A1RGBFSVCT'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">domain</span>
        <span className="token operator">:</span>
        <span> </span>
        <span className="token string">'foo-corp.com'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token punctuation">{'}'}</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

With highlighted lines

Use the color prop to highlight a code line.

 const payload = req.body;
const sigHeader = req.headers['workos-signature'];

// Verify the signature and process the event
res.status(200);

 <CodeBlock.Root>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="numbers">
      <CodeBlock.Line>
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">payload</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">body</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line color="yellow">
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">sigHeader</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">headers</span>
        <span className="token punctuation">[</span>
        <span className="token string">'workos-signature'</span>
        <span className="token punctuation">]</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line></CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token comment">
          // Verify the signature and process the event
        </span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token">res</span>
        <span className="token punctuation">.</span>
        <span className="token method function property-access">status</span>
        <span className="token punctuation">(</span>
        <span className="token number">200</span>
        <span className="token punctuation">)</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

Use the blue highlight when you need a more subtle call-out in the code block.

 const payload = req.body;
const sigHeader = req.headers['workos-signature'];

// Verify the signature and process the event
res.status(200);

 <CodeBlock.Root>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="numbers">
      <CodeBlock.Line>
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">payload</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">body</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line color="blue">
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">sigHeader</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">headers</span>
        <span className="token punctuation">[</span>
        <span className="token string">'workos-signature'</span>
        <span className="token punctuation">]</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line></CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token comment">
          // Verify the signature and process the event
        </span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token">res</span>
        <span className="token punctuation">.</span>
        <span className="token method function property-access">status</span>
        <span className="token punctuation">(</span>
        <span className="token number">200</span>
        <span className="token punctuation">)</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>

Green and red highlight colors automatically display plus and minus symbols in the gutter, indicating added and removed lines.

 const payload = req.body;
const sigHeader = req.headers['signature'];
const sigHeader = req.headers['workos-signature'];

// Verify the signature and process the event
res.status(200);

 <CodeBlock.Root>
  <CodeBlock.Content>
    <CodeBlock.LineGroup gutter="numbers">
      <CodeBlock.Line>
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">payload</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">body</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line color="red">
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">sigHeader</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">headers</span>
        <span className="token punctuation">[</span>
        <span className="token string">'signature'</span>
        <span className="token punctuation">]</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line color="green">
        <span className="token keyword">const</span>
        <span className="token"> </span>
        <span className="token">sigHeader</span>
        <span className="token"> </span>
        <span className="token operator">=</span>
        <span className="token"> </span>
        <span className="token">req</span>
        <span className="token punctuation">.</span>
        <span className="token property-access">headers</span>
        <span className="token punctuation">[</span>
        <span className="token string">'workos-signature'</span>
        <span className="token punctuation">]</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>

      <CodeBlock.Line></CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token comment">
          // Verify the signature and process the event
        </span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span className="token">res</span>
        <span className="token punctuation">.</span>
        <span className="token method function property-access">status</span>
        <span className="token punctuation">(</span>
        <span className="token number">200</span>
        <span className="token punctuation">)</span>
        <span className="token punctuation">;</span>
      </CodeBlock.Line>
    </CodeBlock.LineGroup>
  </CodeBlock.Content>
</CodeBlock.Root>