Trace and Code Block arrive in Base v3.2
Base v3.2 is out. It adds Trace and Code Block, the newest shadcn/ui components, and moves the kit to the sRGB color profile. Pro v3.10 moves to sRGB too.
Trace and Code Block
The Base kit now includes Trace and Code Block, matching the anatomy of the new shadcn/ui components.
- Trace: Trace, TraceLine, TraceCollapsibleTrigger and TraceCollapsible. Default, running, error and pending statuses, hover and focus states, and open and closed variants.
- Code Block: header, content, line, footer and copy-button parts. Two sizes, default and destructive variants, line numbers, added, removed and highlighted lines.
- Examples: light and dark examples for activity, reasoning, tool output, terminal output and diffs.
Both use the kit's style variables, so they follow all 8 shadcn styles, and they document their matching React data-slot names.
sRGB color profile
Both kits now use Figma's sRGB color profile instead of the old Legacy setting. sRGB is the color space the web and shadcn/ui use, so the colors you pick in Figma match what ships in your React app. It also gets the kits ready for Quick setup in the shadcncraft Figma plugin, which themes the kit in a few clicks.
Working in a file you copied from an older kit? Open the file menu, choose File color profile → Assign to sRGB. Your color values stay the same.
Get the update
Download Base v3.2 or Pro v3.10 from your customer portal. Updates are free for life with every bundle. New to Pro? See the bundles.
