The shadcn/ui kit for Figma: Trace and Code Block

Last week shadcn/ui released two new components, Trace and Code Block. Both are now in the Pro kit for Figma, in all 8 styles and in light and dark mode. The kit is now version 3.1. The Figma to shadcn/ui plugin reads it and generates both components as shadcn/ui code.

You can open both pages in the preview file before you update.

Code Block

Code Block shows source code, terminal output and diffs. In Figma it has two variants, default and destructive, and two sizes, default and sm. shadcn uses the sm size for tool output inside a Trace.

Each line is a CodeBlock / Line instance in a slot, so you add, remove and reorder lines like any other slot content. A line is default, highlighted, added or removed, and it has its own Show Line Number toggle.

You switch the other parts on and off in the properties panel:

• Show Header shows the title, with Title Text and Show Title Icon.
• Show Actions adds the copy button, a ghost icon button whose icon swaps between Copy and Check.
• Show Floating Actions puts the copy button in the corner when there is no header.
• Show Footer adds a footer slot, with a "Show more" button by default.

The Figma lines have no syntax colors. shadcn colors code with Shiki's GitHub Light and Dark themes, and those colors are not theme tokens, so every line in the kit uses foreground. Added lines are not green either. In code they get the same tint as highlighted lines plus a + marker, and removed lines get a destructive tint with a − marker. The kit does the same.

Trace

Trace is what shadcn now uses for reasoning, tool calls and sources in agent interfaces. It's a list of steps. Each Trace / Line has an icon, a title and an optional description, such as a duration.

A line has four states: default for finished work, running, error and pending. Each state has Default, Hover and Focus variants, 12 in all.

• Running puts a shimmer on the title. Figma can't animate text, so it's a gradient bound to variables.
• Error uses the destructive color, also on hover.
• Pending sets the line to 60% opacity.

Show Trailing Icon adds an icon after the text, for example ArrowUpRight on a link to a source.

Trace / Collapsible opens a line to show nested steps or tool output. When it's open, the content sits next to a 1px rule under the icon. In the kit's example it holds a sm Code Block.

Both components have their own page in the kit with a docs frame, Light and Dark playgrounds and an entry in the Welcome page menu.

Variables for all 8 styles

Trace and Code Block use variables like every other component in the kit. The Style collection has 63 new component/code-block/* variables and 28 new component/trace/* variables, each with a value for all 8 styles. Radius, padding, text and icon sizes and the focus ring change with the style you pick.

In Luma and Rhea a Code Block has a filled background with a faint ring around it, as in shadcn's CSS for those styles. The other six styles draw an outlined box. Mira and Lyra use 12px text for titles and Trace lines, and the rest use 14px.

Six new custom tokens

A few colors in these components are tints the kit didn't have yet. I added six tokens to the Mode collection, each with a light and a dark value:

• custom/destructive-subtle is destructive at 5% in light mode and 10% in dark mode.
• custom/destructive-ring-faint is destructive at 15% and 20%.
• custom/destructive-border-subtle is destructive at 30% and 40%.
• custom/muted-foreground-subtle is muted-foreground at 70% in both modes.
• custom/input-wash is transparent in light mode and white at 5% in dark mode.
• custom/shimmer-highlight is muted-foreground at 20% in light mode and foreground in dark mode. It's the bright band in the running shimmer.

They are aliases, not fixed colors. When you change destructive, muted-foreground or foreground in your theme, the tints that use them change with it.

Typography / Code in dark mode

Typography / Code, the code sample on the Typography page, used a fixed zinc/900 background and white text, so it looked the same in light and dark mode. It now uses muted for the background and foreground for the text, and the dimmed parts of the sample use muted-foreground. It switches with the mode like everything else.

The plugin supports kit 3.x

The Figma to shadcn/ui plugin now detects kit 3.x files, 3.0 and 3.1, and reads the six new tokens. When you generate code from a frame that uses Code Block or Trace, it writes the shadcn/ui components instead of rebuilding them from divs:

• The Code Block variant and size become variant and size on CodeBlock.
• Each CodeBlock / Line becomes a CodeBlockLine with the same variant. Line numbers turn on lineNumbers, and if the first number isn't 1, the plugin also sets startLine.
• The Trace line state becomes status="running", "error" or "pending". Finished lines get no status.
• An open Trace / Collapsible becomes TraceCollapsible with defaultOpen.
• The running shimmer comes from status="running", so the plugin doesn't rebuild the gradient by hand.

In HTML and CSS mode, Code Block becomes pre and code, and Trace / Collapsible becomes details.

Get the update

Trace and Code Block are in the Pro kit in all 8 styles: Nova, Vega, Mira, Luma, Sera, Maia, Rhea and Lyra. The Plus and Premium packages include the Pro kit. If you're on Basic, you can upgrade here.

If you already work in a copy of the kit, the updates documentation explains how to bring new components into your file.

Changelog

• Kit meta/version is now 3.1 (October 2026).
• New Code Block and Trace pages, each with a Components section, a docs frame, Light and Dark playgrounds and a Welcome menu entry.
• Code Block: Variant (default, destructive) and Size (default, sm). Show Header, Show Title Icon, Title Text, Show Actions, Show Floating Actions and Show Footer, with Content and Footer slots.
• CodeBlock / Line: default, highlighted, added and removed in both sizes, with Show Line Number.
• Trace, Trace / Line (State and Interaction, 12 variants) and Trace / Collapsible (Open and Interaction, 6 variants).
• Style collection: 63 component/code-block/* and 28 component/trace/* variables with values for all 8 styles.
• Mode collection: custom/destructive-subtle, custom/destructive-ring-faint, custom/destructive-border-subtle, custom/muted-foreground-subtle, custom/input-wash and custom/shimmer-highlight.
• Six new text styles for code lines, Code Block titles and Trace text.
• Typography / Code: background, text and dimmed text bound to muted, foreground and muted-foreground.
• Figma to shadcn/ui plugin: kit 3.x detection, the six new tokens, and code generation for Code Block and Trace.