> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# EquaCodeBlock

> Design system reference for EquaCodeBlock, including Storybook, Figma, screenshots, and usage guidance

# EquaCodeBlock

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaCodeBlock.stories.tsx`, Line: 6

## Purpose

Monospace code and command output surfaces for AI and developer flows.

## Storybook

| Story           | Reference                                                                       |
| --------------- | ------------------------------------------------------------------------------- |
| JSON Config     | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--json-config)     |
| Bash Script     | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--bash-script)     |
| Java Script     | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--java-script)     |
| Log Output      | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--log-output)      |
| With Max Height | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--with-max-height) |
| No Copy Button  | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--no-copy-button)  |
| Custom Title    | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--custom-title)    |
| Multiple Blocks | [Storybook](http://localhost:6006/?path=/story/equa-codeblock--multiple-blocks) |

## API And Props

| Prop or Control | Source            | Notes                                |
| --------------- | ----------------- | ------------------------------------ |
| `code`          | Storybook control | See source story for accepted values |
| `language`      | Storybook control | See source story for accepted values |
| `title`         | Storybook control | See source story for accepted values |
| `showCopy`      | Storybook control | See source story for accepted values |
| `maxHeight`     | Storybook control | See source story for accepted values |

Sources:

* `equa-patternlib-nextjs/src/components/codeblock/codeblock.tsx`, Line: 5
* `equa-patternlib-nextjs/stories/EquaCodeBlock.stories.tsx`, Line: 6

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-code-block/equa-codeblock--json-config-equa.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=97cd9eeea16007d0de502063b673e021" alt="EquaCodeBlock dark theme" width="1366" height="900" data-path="images/design-system/components/equa-code-block/equa-codeblock--json-config-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-code-block/equa-codeblock--json-config-light.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=3c6969926af51810b72ecba834f0e2f3" alt="EquaCodeBlock light theme" width="1366" height="900" data-path="images/design-system/components/equa-code-block/equa-codeblock--json-config-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.