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.

 <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>
);

Props

CodeBlock.Content

`height`

string | number

`maxHeight`

string | number

`wrap`

prepre-wrap

CodeBlock.LineGroup

`gutter`

nonenumberscli

CodeBlock.Line

`color`

yellowredbluegreenfocused

Usage

With Output

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

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

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

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

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

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

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

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

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

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

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

Variants

Admin Portal

2 variants found

CodeBlock in Iam Policyadmin-portal

/p/:portalSessionId/log-streams/:logStreamId/s3

CodeBlock in Iam Policyadmin-portal

/p/:portalSessionId/log-streams/:logStreamId/s3

Context

CodeBlock.Content

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

CodeBlock.LineGroup

Prop	Type	Default	Required
`gutter`	`"none" \| "numbers" \| "cli"`	—	no

CodeBlock.Line

Prop	Type	Default	Required
`color`	`"yellow" \| "red" \| "blue" \| "green" \| "focused"`	—	no

Usage

Used 40 times across 2 packages

Dashboard

Admin Portal

Variant Distribution

wrap

pre

100%

Where it's used

11 files

packages/dashboard/src/components/code-highlighter.tsx6

packages/dashboard/src/legacy-pages/[environmentId]/actions/test/index.tsx6

packages/admin-portal/src/components/saml-session-saml-request.tsx4

packages/admin-portal/src/components/saml-session-saml-response.tsx4

packages/dashboard/src/components/chromeless-codeblock/index.tsx2

packages/dashboard/src/components/configuration/custom-attributes/view-attributes-payloads-dialog.tsx2

packages/dashboard/src/components/flags/onboarding-card.tsx2

/code-editor

packages/dashboard/src/app/(private)/code-editor/demo.tsx5

/p/:portalSessionId/log-streams/:logStreamId/generic-https

packages/admin-portal/src/app/p/[portalSessionId]/log-streams/[logStreamId]/generic-https/event-structure.tsx4

/p/:portalSessionId/log-streams/:logStreamId/s3

packages/admin-portal/src/app/p/[portalSessionId]/log-streams/[logStreamId]/s3/iam-policy.tsx4

Show 1 more files

Code Block

On this page

Anatomy

Props

CodeBlock.Content

`height`

`maxHeight`

`wrap`

CodeBlock.LineGroup

`gutter`

CodeBlock.Line

`color`

Usage

With Output

With Header

With Tabs

With command line gutters

With line numbers

With highlighted lines

With height constraints

Variants

Admin Portal

Context

Full API Reference

CodeBlock.Content

CodeBlock.LineGroup

CodeBlock.Line

Usage Statistics

Usage

Variant Distribution

Where it's used