> For the complete documentation index, see [llms.txt](https://docs.blup.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blup.in/wiki/design-ui/tools-section.md).

# Toolkit

## Toolkit

<figure><img src="/files/K4Vw3EsGCN59pnjFCBZp" alt=""><figcaption><p>Toolkit</p></figcaption></figure>

This segment encompasses all the necessary tools for constructing the UI. We'll delve into each tool individually, providing detailed explanations for features like the selection cursor, rectangle, text, and more.

### Selector Cursor

<figure><img src="/files/N4RitcVdv2vWO1Sksrxt" alt=""><figcaption><p>Selection Cursor</p></figcaption></figure>

The Selector Cursor within the Blup is your precision powerhouse.&#x20;

With a click, the standard cursor transforms into a selector cursor, tailored for picking and modifying components seamlessly. Empowering you to apply diverse properties from the panel, optimizes your workflow.&#x20;

Press '**V'** or 'Escape' for a smooth transition back to the selector cursor.

### Rectangle Toggle

<figure><img src="/files/RhAquc5gGN1SvcHQqZig" alt=""><figcaption><p>Rectangle Toogle</p></figcaption></figure>

The versatile Rectangle Toggle is utilized to generate rectangular shapes within the canvas or pages.&#x20;

When hovering over the rectangle button, a GIF showcasing the various functionalities achievable with the rectangle toggle&#x20;

Upon clicking the button and shifting the cursor to the pages section, it transforms into a cross cursor, facilitating the drawing of rectangular shapes on the screens akin to other designer tools on the market. The dimensions of the rectangle can be adjusted during its creation.&#x20;

Additionally, the properties panel located to the right of the screen offers the option to modify various other properties of the selected rectangle.&#x20;

Thanks to Blup's seamless integration with Windows/Mac OS, any images, GIFs, or videos present in your file explorer can be effortlessly dragged and dropped into any rectangle.

### Text Toggle

<figure><img src="/files/uGCqa3pdaX3TXOVudXvy" alt=""><figcaption><p>Text Toggle</p></figcaption></figure>

Crucial for textual components, the Text Toggle feature within the Blup tool serves as your creative ally.&#x20;

Hover over it for a demonstration, and Click to switch the cursor to a text cursor, enabling typing anywhere on the page.&#x20;

Easily adjust the font size by switching back to the selector cursor and click-dragging the bottom of the text cell.&#x20;

Delve into advanced customization options in the right-side panel.

{% hint style="info" %} <mark style="color:blue;">Note: Text is used to show information to the user</mark>
{% endhint %}

### EYE - Dynamic Content Visibility

<figure><img src="/files/AiT78Rtd0cIObKuR72MW" alt=""><figcaption><p>Eye - Dynamic Content Visibility</p></figcaption></figure>

The EYE tool in the Blup tool dynamically controls content visibility.&#x20;

Toggle elements based on runtime criteria, enhancing adaptability and interactivity in your design. It's a key player in crafting responsive and user-centric interfaces.

### Toolkit Tact - Flexible Palette Placement&#x20;

Toolkit Tact is your tool for personalized workspace within the Blup tool.&#x20;

Move the toolkit palette across the canvas as per your preferences and workflow needs. It offers flexibility for an adaptable and efficient design experience.

<figure><img src="/files/ErDk0hIAAaV7Xe9TmJp4" alt=""><figcaption><p>toolkit tact</p></figcaption></figure>

This toolkit ensures your UI designs are not just functional but visually compelling and user-friendly. Dive in and unleash your creativity within the Blup tool!

If you have any ideas to make Blup better you can share them through our [Discord community channel ](https://discord.com/channels/940632966093234176/965313562425823303)

## Music to go with.

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}