# Widgets (app)

Widgets are pre-designed pieces of Graphic User Interface. Each widget performs a specific input/output function when communicating with your hardware or end-user.

Widgets can be found in the **Widget Box.** While in dev mode scroll the list and tap on the Widget you need to add it to the Grid. Tap the Widget to set it up.

There are 4 major types of widgets:

* **Controllers** – UI elements used to send data to hardware. For example: buttons, switches, sliders, joysticks, etc.
* **Displays** – UI elements used to visualize the incoming data. LEDs, Charts, Gauges. etc.
* **Interface** – Elements to build user-friendly UI. Tabs, Drop-down menus, various inputs, etc.
* **Other** – special widgets that don't belong to any category.

Widgets availability is based on the plans and corresponding limits.

<table><thead><tr><th width="136"></th><th width="185">Free</th><th width="191">Plus</th><th>PRO</th></tr></thead><tbody><tr><td><strong>Controllers</strong></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/button">Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/slider">Slider</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/button">Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/styled-button">Styled Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/icon-button">Icon Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/image-button">Image Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/slider">Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/vertical-slider">Vertical Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/step-slider">Step Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/vertical-step-slider">Vertical Step Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/joystick">Joystick</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/zergba">zeRGBa</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/rgb-light-control">RGB Light Control</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/step-h">Step H</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/switch">Switch</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/button">Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/styled-button">Styled Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/icon-button">Icon Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/image-button">Image Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/slider">Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/vertical-slider">Vertical Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/step-slider">Step Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/vertical-step-slider">Vertical Step Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/joystick">Joystick</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/zergba">zeRGBa</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/rgb-light-control">RGB Light Control</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/step-h">Step H</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/step-v">Step V</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/slope-control">Slope Control</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/switch">Switch</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/level-slider">Level Slider</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-controllers/level-slider-with-switch">Level Slider with Switch</a></li></ul></td></tr><tr><td><strong>Displays</strong></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/value-display">Value Display</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/led">LED</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/gauge">Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/superchart">Super Chart - Single Datastream</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/image-gallery">Image Gallery</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/value-display">Value Display</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/labeled-value">Labeled Value</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/led">LED</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/gauge">Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/radial-gauge">Radial Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/lcd">LCD</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/superchart">Super Chart - Multi Datastream</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/terminal">Terminal</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/video-stream">Video Stream</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/level-h">Level H</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/level-v">Level V</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/image-gallery">Image Gallery</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/icon">Icon</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/image-animation">Image Animation</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/value-display">Value Display</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/labeled-value">Labeled Value</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/led">LED</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/gauge">Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/radial-gauge">Radial Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/enhanced-gauge">Enhanced Gauge</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/lcd">LCD</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/simple-chart">Simple Chart</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/superchart">Super Chart - Multi Datastream</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/terminal">Terminal</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/video-stream">Video Stream</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/level-h">Level H</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/level-v">Level V</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/image-gallery">Image Gallery</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/gradient-ramp">Gradient Ramp</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/icon">Icon</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/image-animation">Image Animation</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-displays/lottie-animation">Lottie Animation</a></li></ul></td></tr><tr><td><strong>Interface</strong></td><td>-</td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/tabs">Tabs (up to 3)</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/menu">Menu</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/text-input">Text Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/numeric-input">Numeric Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/time-input">Time Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/segmented-switch">Segmented Switch</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/text">Text</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/tabs">Tabs (up to 20)</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/menu">Menu</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/map">Map</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/text-input">Text Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/numeric-input">Numeric Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/time-input">Time Input</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/segmented-switch">Segmented Switch</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/icon-segmented-switch">Icon Segmented Switch</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/text">Text</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/formatted-text">Formatted Text</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-interface/dynamic-spacer">Dynamic Spacer</a></li></ul></td></tr><tr><td><strong>Other</strong></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/webpage-image-button">WebPage Image Button</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/music-player">Music Player</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/webpage-image-button">WebPage Image Button</a></li></ul></td><td><p></p><ul><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/music-player">Music Player</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/webpage-button">WebPage Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/webpage-image-button">WebPage Image Button</a></li><li><a href="https://docs.blynk.io/en/blynk.apps/widgets-other/alias-name">Alias Name</a></li></ul></td></tr></tbody></table>