Component Kit

Elevate Your Web Experience with Dynamic UI Elements

Enhance your web development endeavors and captivate users with dynamic and visually stunning UI elements.


Versatile Component Showcase: Intuitive and Functional UI Elements

Regular Button
Filled  Button
A filed button component created with Figma is a combined text input field and clickable button, allowing users to input data and trigger an action. It provides an intuitive and visually appealing way to interact with forms or applications.
Regular Button
Filled  Button
Outline  Button
A button group component is a collection of related buttons displayed together, providing users with a set of options to choose from. It enhances user experience by organizing and visually grouping buttons, enabling efficient selection and navigation within a user interface.
Regular Button
Filled  Button
Outline  Button
An input field component is a user interface element that allows users to enter and edit text or data. It provides a designated area where users can input information, such as names, addresses, or search queries. Input fields are fundamental for collecting user input and enabling data entry in various forms, applications, and websites.

Empowering Development with Strongly Typed Functionality

  • - Line ( 1 ) Makes the plugin's UI visible.
  • - Line ( 2 ) Changes the UI size to 500x500 px after it has been created. Note that the size can also be set in the initial options. The minimum size is 70x0.
  • - Line ( 3-6 ) Register a handler for incoming messages from the UI's <iframe> window.
  • - Line ( 10 ) Makes a font available in the plugin for use when creating and modifying text.
  • - Line ( 12-13 ) Check the type and value from the props, type and value is coming from the HTML file each one an id for specific HTML tag.
  • - Line ( 14 ) Creates a new, empty component.
  • - Line ( 15-17 ) Call a function to get object of subcomponents like the rectangle and text components depends on the HTML id.
  • - Line ( 18 ) Resize the initial component to the needed size.
  • - Line ( 19 ) Rename the component to a suitable name.
  • - Line ( 25 ) Add the subcomponents to the initial component.
  • - Line ( 41 ) Display toast notification with required message.
  • - Line ( 44 ) Close the UI for the component.

More Components are coming soon with description ...

For more details check
( Figma )

Support us with only 1$