Figma code snippet (markdown) components

Code blocks are the part of a documentation page people actually read. They also carry the highest stakes of anything on the screen, because a truncated string or a wrapped line in a curl command is a support ticket. Beyond docs they turn up in API references, changelogs, developer marketing pages, the onboarding step that hands over an API key, and in editor mockups where the block is pretending to be an IDE rather than a place to copy from.

Three layouts for three different jobs

The component ships in one 720px width with three types. The Horizontal layout runs a 49px line number gutter down the left of the code, which is the version to use when the surrounding prose refers to a line by number. The Vertical layout drops the gutter and instead fades the block out under a gradient mask across its last 160px, with a 104px show more button sitting in a 68px footer.

Vertical with tabs adds a 36px header holding a row of file tabs, each 28px tall and around 46px wide, plus a utility button of its own. All three keep a pair of 28px utility buttons in the top right of the code area, which is where copy lives and where people look for it.

The tabbed version, and what it is really for

Those tabs are not decoration. They solve the install instruction problem: npm, yarn and pnpm, or Python and Node and Go, all showing the same step. Each tab is its own small component with current, hover and focus states, so a prototype can switch between two package managers convincingly.

Note that these are content switchers inside one block rather than page level horizontal tabs, which is why they sit at 28px and use a compact chip instead of an underline. When there are more than about four languages to show, a select above the block ages better than a row that scrolls.

Typography is most of the work

A code block is a typography component wearing a container. Set a real monospace family, then spend the time on line height and letter spacing, because code is read in vertical columns of indentation as much as in lines. Roughly 1.5 line height keeps nesting legible without spreading a twelve line function across a whole screen.

The other half is color. Syntax highlighting is decorative until it drops below the 4.5:1 contrast ratio for normal text, and the offender is almost always the comment grey on a dark background, the one token designers pick to look subtle and end up making unreadable. The whole file exists in light and dark, which matters more here than elsewhere, because a syntax palette cannot be flipped from one to the other by inverting the greys.

Fill it with code that compiles

Placeholder text is acceptable in a card. It is not acceptable here, because every engineer reviewing the mockup will read the code first and the layout second, and a snippet with mismatched brackets destroys the credibility of the screen it sits on.

Paste something real, keep it under fifteen lines so the block does not need the show more button on its first appearance, and pick an example that shows the shape of the API rather than its simplest possible call. This holds double when the snippet is inside a device mockup in a hero image, where the code is being read at a glance by exactly the audience that will notice.

When it is time to build, Untitled UI React code snippets are open source, built with Tailwind CSS and React Aria, with copy to clipboard and the tab switching already wired.