Overview

Introduction

UsageComing soon

Theme

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme 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.

Prop	Type	Default
`height`	`string \| number`
`maxHeight`	`string \| number`
`wrap`	`"pre" \| "pre-wrap"`

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>

With height constraints

Use the maxHeight prop to limit the height of long code blocks and enable scrolling.

 const longCodeExample = {
  method1: 'This is a long method',
  method2: 'Another long method',
  method3: 'Yet another method',
  method4: 'More content here',
  method5: 'Even more content',
  method6: 'This will cause scrolling',
  method7: 'More scrollable content',
  method8: 'Another line to ensure overflow',
  method9: 'Even more scrollable content',
  method10: 'Another method',
  method11: 'Even more content',
  method12: 'More scrollable content',
  method13: 'This should definitely cause overflow',
  method14: 'Final method'
};

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

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method1</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'This is a long method'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method2</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Another long method'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method3</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Yet another method'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method4</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'More content here'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method5</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Even more content'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method6</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'This will cause scrolling'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method7</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'More scrollable content'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method8</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Another line to ensure overflow'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method9</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Even more scrollable content'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

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

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method11</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Even more content'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method12</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'More scrollable content'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method13</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">
          'This should definitely cause overflow'
        </span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">method14</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Final method'</span>
      </CodeBlock.Line>

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

Use the height prop to set a fixed height for code blocks.

 const fixedHeightExample = {
  name: 'Fixed height code block',
  description: 'This block has a fixed height'
};

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

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">name</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'Fixed height code block'</span>
        <span className="token punctuation">,</span>
      </CodeBlock.Line>

      <CodeBlock.Line>
        <span>{'  '}</span>
        <span className="token literal-property property">description</span>
        <span className="token operator">:</span>
        <span className="token"> </span>
        <span className="token string">'This block has a fixed height'</span>
      </CodeBlock.Line>

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