Trace and Code Block in Figma
The new shadcn/ui Trace and Code Block components are now available in the shadcncraft Pro Figma kit, with editable states and light and dark examples.
Added Trace and Code Block to the shadcncraft Pro Figma kit, matching the anatomy of the new shadcn/ui components.
Trace
- Reusable Trace, TraceLine, TraceCollapsibleTrigger and TraceCollapsible components.
- Default, running, error and pending statuses, hover and focus states, and open and closed variants.
- Editable titles, descriptions, icons and expanded content.
- Light and dark examples for activity, sources, reasoning and tool output.
Code Block
- Composable header, content, line, footer and copy-button components.
- Default and small sizes, plus default and destructive variants.
- Line numbers, added and removed lines, highlighted lines, and copy/copied states.
- Light and dark examples for code, terminal output, diffs and use inside a Trace.
Both additions use the kit's style variables and document their matching React data-slot names. Download the latest Pro Figma kit from your customer portal.
Explore Trace in Figma, explore Code Block in Figma, or read the announcement.
