Component Library

When you index a Context Graph, Kombai draws every reusable component it finds on a canvas. Each component is drawn from its code in up to 8 states, such as its variants or sizes. From a drawing, you can open the component’s source file or the designs that use it.

​

Where to find it

• On the Context Graphs page:: open Settings and select the Context Graphs tab. When a Context Graph finishes indexing, its card shows a Component library section.
• In the Canvas Gallery: a Component library entry appears beside the create tile, showing the components drawn across all of your libraries.
• From a design: if a design uses an indexed component, select the component and choose Go to component to open its drawing.

​

Turn off automatic drawing

By default, Kombai draws a Component Library while indexing the Context Graphs. To index without drawing the Component Library:

1. Open Settings.
2. Select the Context Graphs tab.
3. Turn off Draw components while indexing.

You can draw the library later from the Context Graph’s card without re-indexing.

​

Draw, redraw, and resume

A finished Context Graph’s card offers these actions, depending on the library’s state:

• Draw components: draws the library for a Context Graph indexed with drawing turned off, or indexed before the Component Library existed.
• Resume: continues a run that stopped partway, for example after a lost connection or running out of credits. It draws only the missing components. If nothing was drawn yet, the button reads Try again.
• Redraw changed: redraws components whose code changed since they were drawn.
• Restore N deleted: draws again the components you deleted from the library.
• Open library: opens the Component library page.
• Stop: stops a library that’s drawing.

​

Manage a library

Open a library with Open library on the Context Graph’s card, or from its entry in the Canvas Gallery.

• View a component’s source: select the drawing and choose View code. This opens the file the component was drawn from, including files in an indexed NPM package or Storybook source.
• Delete a drawing: select it and press Delete, or right-click it and choose Delete. Undo brings it back. After that, use Restore N deleted on the Context Graph’s card.
• Code changed: Kombai marks the drawing as changed. Use Redraw changed on the Context Graph’s card to update it.
• Code removed: the drawing stays in the library under Removed until you delete it or the component returns to the code.
• File moved: Kombai follows the move and keeps the drawing linked.