CodeTabs

Markdown

A code viewer for the files of one example, with optional numbered tour stops.

Good to know

  • With copy, the file has one Copy button: the code block inside hides its own.
Use it for
Several files of one example, with optional tour stops.
Not for
One command. Try Snippet.

CodeTabs preview

Loading example…

Installation

npm install @stackunseen/ui
import { CodeTabs } from '@stackunseen/ui/devtools';
Styles: @stackunseen/ui/styles.css

Usage and props

Files are keyed by name. A stop selects its file, marks its lines and scrolls the first one into view inside the pane, never the page; #tour-n links open their stop. Pass HighlightedCodeBlock as codeBlock for tokens; the plain block is the default.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

files: { file, language, code, label? }[] · label · value? · onValueChange? · tour?: { file, start, end, title, note }[] · stop? · onStopChange? · hashLinks? · copy? · codeBlock?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
files: { file, language, code, label? }[] · label · value? · onValueChange? · tour?: { file, start, end, title, note }[] · stop? · onStopChange? · hashLinks? · copy? · codeBlock?
Keeps honest
Files are keyed by name. A stop selects its file, marks its lines and scrolls the first one into view inside the pane, never the page; #tour-n links open their stop. Pass HighlightedCodeBlock as codeBlock for tokens; the plain block is the default.
MCP
read_component "CodeTabs" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

The file list is a tablist with arrow keys, Home and End. Stop buttons carry aria-current="step" and the open stop is announced in a polite live region.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio