Working with components in Prototyper

Learn how to utilise different components in Prototyper

Overview of Components in Prototyper

Prototyper offers a wide range of components that you can use to enhance your designs. These components are designed to be easily integrated and customizable to fit your project's needs. Below is an overview of the different components available in Prototyper:

Accordion

The Accordion component allows you to create collapsible sections in your design. This is useful for organizing content in a compact and user-friendly manner.

Alert

The Alert component is used to display important messages to users. It can be customized to show different types of alerts such as success, error, warning, and info.

Avatar

The Avatar component is used to display user profile pictures or icons. It can be customized with different sizes and shapes.

Badge

The Badge component is used to display small pieces of information, such as notifications or status indicators. It can be styled to match the design of your project.

Button

The Button component is a fundamental element used for user interactions. It can be customized with different styles, sizes, and actions.

Calendar

The Calendar component allows users to select dates or view date-related information. It is highly customizable and can be integrated with other components for enhanced functionality.

Card

The Card component is a versatile container that can hold various types of content such as text, images, and actions. It is useful for organizing information in a visually appealing way.

Checkbox

The Checkbox component is used for user input, allowing users to select one or more options from a list. It can be styled to fit the design of your project.

Dialog

The Dialog component is used to display modal windows for user interactions. It can be used for confirmations, forms, or any other type of user input.

The Dropdown component allows users to select an option from a list. It can be customized with different styles and integrated with other components.

Input

The Input component is used for user input, such as text fields, password fields, and more. It is highly customizable and can be styled to match your design.

List

The List component is used to display a list of items. It can be styled and customized to fit the design of your project.

The Modal component is used to create overlay windows for user interactions. It can be used for forms, notifications, or any other type of content.

Progress Bar

The Progress Bar component is used to display the progress of a task. It can be customized with different styles and sizes.

Radio Button

The Radio Button component is used for user input, allowing users to select one option from a list. It can be styled to fit the design of your project.

Slider

The Slider component is used for user input, allowing users to select a value from a range. It can be customized with different styles and sizes.

Switch

The Switch component is used for user input, allowing users to toggle between two states. It can be styled to fit the design of your project.

Table

The Table component is used to display data in a tabular format. It can be customized with different styles and integrated with other components.

Tabs

The Tabs component is used to organize content into separate sections that can be navigated through tabs. It is useful for organizing large amounts of content in a compact space.

Tooltip

The Tooltip component is used to display additional information when users hover over an element. It can be customized with different styles and positions.

Referencing Components in Your Designs

In Prototyper, you can reference these components in your designs by simply talking to them. For example, you can say "Add a Button component here" or "Insert a Calendar component in this section." Prototyper's intuitive interface makes it easy to integrate and customize these components to fit your project's needs.

By leveraging these components, you can create sophisticated and user-friendly designs with ease. Explore the possibilities and enhance your projects with Prototyper's versatile components.