Default Components

The Insert menu's Default Components is a collection of interactive code components, each built for speed and ease of customization.

To see the Default Components, open the Insert menu and click Default Components. To add a component to your project, click on the component and then click Insert.

Button

Add interactive buttons with built-in hover and pressed states. Customize everything from the style to the action state animations.

Checkbox

Add fully customizable checkboxes that allow you to transition to frames when toggled, checked, or unchecked.

Device

View your work in clay device frames, including mobile and tablet. You can connect the component to content and open the preview to begin presenting.

GIF

Search from a library of GIFs by entering a keyword, view the looping GIFs on the canvas and add them to your prototypes.

Icon Set

Search the Feather icon library by entering a keyword, select an icon to add to your prototype and customize the size and color to fit your needs.

Custom Icon

Draw custom paths and shapes to create your own custom icons. Export them as SVG elements within the handoff panel.

Input

Add fully functioning input fields with customizable focus and blurred states. Supports password and text input field modes, and allows you to transition to frames on submit.

Loading Indicator

Add loading indicators to your prototypes. You can set a duration and link it to a layer to automatically transition on timeout.

Notes

Use this component to add comments, feedback, or to-dos on the canvas. You can select from a variety of colors and hide them in previews.

Radio Buttons

Add fully customizable radio button lists to your prototypes. You can customize the styles for the active, inactive and hover states and transition to frames based on the selected option.

Each button will also have the ability to trigger a transition to another screen.

Segmented Control

Add fully functioning segmented controls to your prototypes for switching content. You can customize everything from the style to the animations, and transition to frames based on the selected option.

Slider

Add customizable sliders with built in functionality, including the ability to set values by dragging on the knob or clicking on the track. You can customize the style and set values to fit your needs.

Tabs

Create tab menus in your prototypes without a single line of code. You can add multiple screens to the component and customize the icons to fit your needs.

Toggle

Add fully customizable toggle controls to your prototypes. You can customize the style and the animations, as well as transition to frames when toggled on or off.

Unsplash

Search for Unsplash images and use them in your prototypes. You can select different resolutions and adjust the border radius.

Video

Add MP4 videos to your prototypes. Either input a URL or upload your own local file. You can customize a variety of playback options, such as enabling autoplay, hiding the controls, or muting the sound.

Youtube

Add embedded YouTube videos to your prototypes. You can input your desired video URL and set the autoplay option to on, off or loop.