2025-08-04 06:49:49 +00:00
---
id: component-library
title: Component Library
---
**Components** are the building blocks of ToolJet applications, used to create interactive user interfaces. The **Component Library** , located on the right, contains all [available components ](#available-components ).
Components can be added to the canvas by dragging and dropping them onto the canvas at your desired location.
< img className = "screenshot-full img-full" src = "/img/app-builder/components/component-library.png" alt = "App Builder: Component library" / >
## Available Components
| Category | Components |
|:----------|:------------|
2026-02-12 10:00:38 +00:00
| **Buttons** | [Button ](/docs/widgets/button/ ), [Button Group ](/docs/widgets/button-group/ ), [Popover Menu ](/docs/widgets/popover-menu/ ) |
2025-08-04 06:49:49 +00:00
| **Data** | [Table ](/docs/widgets/table/ ), [Chart ](/docs/widgets/chart/ )|
2026-02-12 10:00:38 +00:00
| **Layouts** | [Form ](/docs/widgets/form/ ), [Modal ](/docs/widgets/modal-v2/ ), [Container ](/docs/widgets/container/ ), [Tabs ](/docs/widgets/tabs/ ), [ListView ](/docs/widgets/listview/ ), [Kanban ](/docs/widgets/kanban/ ), [Calendar ](/docs/widgets/calenda/ ) |
| **Text Inputs** | [Text Input ](/docs/widgets/text-input/ ), [Text Area ](/docs/widgets/text-area/ ), [Email Input ](/docs/widgets/email-input/ ), [Password Input ](/docs/widgets/password-input/ ), [Rich Text Editor ](/docs/widgets/rich-text-editor/ ) |
| **Number Inputs** | [Number Input ](/docs/widgets/number-input/ ), [Phone Input ](/docs/widgets/phone-input/ ), [Currency Input ](/docs/widgets/currency-input/ ), [Range Slider ](/docs/widgets/range-slider/ ), [Star Rating ](/docs/widgets/star-rating/ ) |
| **Select Inputs** | [Dropdown ](/docs/widgets/dropdown/ ), [Multi-Select ](/docs/widgets/multiselect/ ), [Toggle Switch ](/docs/widgets/toggle-switch-v2/ ), [Radio Button ](/docs/widgets/radio-button-v2/ ), [Checkbox ](/docs/widgets/checkbox/ ), [Tree Select ](/docs/widgets/tree-select/ ) |
| **Date and Time Inputs** | [Date-range Picker ](/docs/widgets/date-range-picker/ ), [Date Picker ](/docs/widgets/date-picker-v2/ ), [Time Picker ](/docs/widgets/time-picker/ ), [Date-Time Picker ](/docs/widgets/datetime-picker-v2/ ) |
| **Navigation** | [Link ](/docs/widgets/link/ ), [Pagination ](/docs/widgets/pagination/ ), [Steps ](/docs/widgets/steps/ ) |
| **Media** | [Icon ](/docs/widgets/icon/ ), [Image ](/docs/widgets/image/ ), [SVG Image ](/docs/widgets/svg-image/ ), [PDF ](/docs/widgets/pdf/ ), [Map ](/docs/widgets/map/ ) |
| **Presentation** | [Text ](/docs/widgets/text/ ), [Tags ](/docs/widgets/tags/ ), [Circular Progressbar ](/docs/widgets/circular-progress-bar/ ), [Timeline ](/docs/widgets/timeline/ ), [Divider ](/docs/widgets/divider/ ), [Vertical Divider ](/docs/widgets/vertical-divider/ ), [Spinner ](/docs/widgets/spinner/ ), [Statistics ](/docs/widgets/statistics/ ), [Timer ](/docs/widgets/timer/ ), [Progress Bar ](/docs/widgets/progress-bar/ ) |
| **Custom** | [Custom Component ](/docs/widgets/custom-component/ ), [HTML Viewer ](/docs/widgets/html/ ), [iFrame ](/docs/widgets/iframe/ ) |
| **Miscellaneous** | [Filepicker ](/docs/widgets/file-picker/ ), [Code Editor ](/docs/widgets/code-editor/ ), [Color Picker ](/docs/widgets/color-picker/ ), [Bounded Box ](/docs/widgets/bounded-box/ ), [QR Scanner ](/docs/widgets/qr-scanner/ ) |
| **Legacy** | [Modal ](/docs/3.5.0-LTS/widgets/modal/ ), [Datetime Picker ](/docs/widgets/datepicker/ ), [Radio Button ](/docs/3.5.0-LTS/widgets/radio-button/ ), [Toggle Switch ](/docs/3.5.0-LTS/widgets/toggle-switch/ ), [Dropdown ](/docs/2.50.0-LTS/widgets/dropdown/ ), [Multiselect ](/docs/widgets/multiselect/ ) |
