Components
Toolcraft has an extensive library of UI components to build your own design applications. Battle-tested in commercial brand and design work. Carefully designed and engineered, with lots of small details so you can focus on design tasks in a workspace that looks and works great. So you can design better, faster, and spend fewer tokens.
Keep in mind that with Toolcraft, you own the code. It’s your app and your controls. The components’ styling and logic live in your project folder, so you can modify anything you need.
See components in a complete workspace in our Case Studies.
If you’re missing a component, request it through the .
Slider
A control that lets users select a value from a given range. Use small increments for fine adjustments, or exact steps that snap to the nearest value. You can also select a range with two handles, use a stepped range like the Band pass example, or display text instead of numbers.
Range
Two inputs for setting the start and end of a range. Use them for minimum and maximum values, percentages, or other limits. Short values use a compact layout, while longer ones get more space. Your agent will pick the compact or full-width layout based on your app context.
Text
A basic text input that comes in handy in apps like blog cover generators, where users can enter a title or label. Use it as a single full-width input or in a two-column layout.
Textarea
A multiline text control for descriptions, prompts, code, formulas, snippets, and other structured values.
Select
A dropdown for choosing one value from a list of options.
Segmented
A compact switch between a small set of options.
Switch
Turn a setting on or off.
Checkbox
Select an option or enable an optional setting.
Color
Choose colors and edit their values, with optional opacity controls.
Color palette
Pick a color family and shade from a predefined palette.
Gradient
Create a gradient with editable color stops, opacity, and angle.
Curves
Shape tonal response with editable channel curves.
Channel mixer
Remap red, green, and blue output channels with individual sliders.
Font picker
Choose a font and adjust its weight, size, spacing, and color.
Vector
Adjust two-dimensional coordinates with numeric inputs and a draggable pad.
Anchor grid
Choose an anchor or transform origin on a three-by-three grid.
Orientation gizmo
Rotate a three-dimensional view using signed axis handles.
Image picker
Choose an image from a collection in small, medium, or large layouts.
File upload
Drop or select images and files, with previews and multiple-file variants.
Model upload
Import a 3D model and inspect it alongside its controls.
Actions
Run related commands with text or icon buttons.
Collection actions
Add and remove items in an editable collection.
Controls panel
A complete panel bringing controls, sections, and reset actions together.
Canvas
The interactive workspace for images, models, and generated output.
Layers
Organize objects with selection, visibility, groups, and drag reordering.
Keyframes
Arrange keyframes and adjust their timing and easing.
Toolbar
Workspace actions for navigation, history, and canvas tools.
Settings transfer
Save and restore settings from the controls panel.