Components
Save part of a design — or a whole window — once, then drop it into any project. Components ship with their images, fonts and bound variables baked in.
Each project has its own library at <project>/components/. Two file types:
| Extension | Used for |
|---|---|
.ctkcomp |
Local saves and Personal exports |
.ctkcomp.zip |
Hub uploads (allow-listed by GitHub Discussions) |
Both are zip archives containing component.json + an assets/ folder.
| Kind | Source | Insert behavior | Panel color |
|---|---|---|---|
| Fragment | A selection of widgets | Adds widgets into the current window | Default |
| Window | A whole window/dialog | Adds a new Toplevel document to the project | Dark orange |
Left side of the workspace, second tab. Folder tree with icons and search. Each row shows [icon] (Type) Name — the type tag is (Frag) for fragments, the widget kind for single-widget fragments, and (Window) for window components.
Actions:
- Drag onto canvas — insert at the drop point
- Double-click — insert at canvas center / as a new Toplevel
- Right-click — Insert / Preview / Rename / Delete / New folder
- Search — type in the header field; matching folders auto-expand
Save selection (fragment) — right-click selected widgets → Save as Component… Save window (window) — right-click empty canvas → Save Window/Dialog as Component
The Save dialog lets you pick a name + folder. Hints below the name field show:
- Bundled variables (orange) — global bindings become local in the target window
- Bundled assets (cyan) — count + total size
Dragging or double-clicking a fragment inserts the widgets straight into the current window. If the fragment binds variables that clash with the target window's locals, a conflict dialog opens — pick Rename or Skip for each clashing var. Cancel aborts the whole insert.
Window components prompt a confirmation first (since they create a new document, not new widgets in the current one). The new Toplevel inherits the component's name auto-suffixed with _2 / _3 on collision.
Bundled assets land in <project>/assets/components/<slug>/ with _2 / _3 folder suffixes on collision.
Right-click any component → Preview. Opens a read-only render of the component in a sandboxed Toplevel; assets get extracted to a temp dir for the duration of the preview only.
Both flows start with the same choice dialog (Personal Use / Publish to Community).
| Flow | Asks for | Result |
|---|---|---|
| Personal Use | Name + Author + folder |
.ctkcomp written to your chosen folder |
| Publish to Community | License agreement → Name + Author + Category + Description + folder |
.ctkcomp.zip ready to upload to the Hub |
The Publish form caps total size at 25 MB (the Hub's GitHub Discussions attachment ceiling). Description is limited to 300 characters. The license block (MIT) is embedded immutably in component.json.
Right-click in the panel → Import… picks a .ctkcomp / .ctkcomp.zip from anywhere on disk. The Import dialog shows name, size, author and date, exposes a Preview button, and lets you choose the target folder. Filename collisions trigger a 3-button Overwrite / Rename / Cancel prompt.
Browse and download community components at kandelucky.github.io/ctkMaker-component-library/. Categories follow the Component Categories guide.
See also — Component Categories · Variables · Forms and Documents