Skip to content

Work / Trunk / Wiki / Surfaces

components-kit-import

Surfacecanonicalverified 2026-10-22

SURFACE.WEB.COMPONENTS-KIT.KIT-IMPORT

Summary

Import a kit: components from another design system, mapped onto the product's Styles before they come in.

Raw wireframe

  • .context/designs/web/components-kit/kit-import.html

Why it is drawn this way

The same systems as Styles › Import a system, plus their components: Tailwind UI, Material UI, shadcn/ui, Chakra UI, Radix Primitives, Bootstrap, Material Design 3, or upload a kit (a Figma library or a Storybook). See styles-import.

The mapping comes first. Their tokens are matched to the product's Styles (--primary → brand-500, --radius → md · 12), and a component is shown painted in the product's Styles before anything is imported.

Each component says what it would be here: shadcn's Calendar is a Date picker, already in the product from Trunk Kit, so "keep yours" is the default. Only what is new is ticked.

Import 5 components puts them in the draft and opens Review. An imported component remembers where it came from; it gets no Trunk Kit updates.

As built (2026-10-22)

  • Opens over the Kit screen at components/kit?import=1, from Kit, Kit update and the catalogue's group list. It opens on shadcn/ui.
  • A system's components are Trunk Kit's. Each of theirs is listed with the kit component it is; it comes in with that component's properties, variants, layers and interactions, under its own name (Hover card → HoverCard), and takes no kit updates.
  • The map is the paint. Each of their tokens plays a role (--primary is the fill, --radius the middle radius); the product's token for that role is the one the kit is painted with, so what the map shows is what paints. A role the product has nothing for is "kept as is": the kit's own value.
  • Keep yours. A component the product took from the kit is "in your kit"; one whose name the product has is "in your product", and if their own name is taken it cannot be ticked.
  • Upload a kit reads a Figma file's JSON as Figma's REST API writes it. It is read within limits (8 MB, nesting, no prototype keys) and against a schema. Component sets come in with their Variant, Text, Boolean and Instance swap properties; a State axis of Empty · Loading · Data · Error is the variants' state; hover · pressed · focus · disabled is Interaction states. One layer tree, with what differs in a variant its own; a prototype's Change to between variants is an interaction. Its colours map by style name, then by a near value; a style with neither is added beside the product's as figma-…. The file is kept under a name the server gives it.
  • Not built: Storybook. Text styles and effects in a Figma file are not mapped.

Related

Sources