Skip to main content

​
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

StoryReference
JSON ConfigStorybook
Bash ScriptStorybook
Java ScriptStorybook
Log OutputStorybook
With Max HeightStorybook
No Copy ButtonStorybook
Custom TitleStorybook
Multiple BlocksStorybook

​
API And Props

Prop or ControlSourceNotes
codeStorybook controlSee source story for accepted values
languageStorybook controlSee source story for accepted values
titleStorybook controlSee source story for accepted values
showCopyStorybook controlSee source story for accepted values
maxHeightStorybook controlSee 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

StateAsset
Equa dark themeEquaCodeBlock dark theme
Light themeEquaCodeBlock light theme

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

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