ToolJet/docs/versioned_docs/version-2.68.0/tooljet-concepts/components.md

---
id: what-are-components
title: Components
---

Components in ToolJet serve as the building blocks for creating applications. They are pre-designed elements that you can drag and drop onto the canvas in the App-Builder. ToolJet comes with 45+ built-in components. 

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/J3-wpo4J76U?si=D2ovxqa42HUGZ4PC&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Customizing Components

Components are highly customizable and interactive. Once you place a component on the canvas, you can easily modify its properties, styles, and behaviors through the properties panel on the right side of the App-Builder. This allows you to make your application dynamic and responsive. 

<div style={{textAlign: 'center'}}>
    <img className="screenshot-full" src="/img/tooljet-concepts/what-are-components/component-config.gif" alt="Component Configuration" />
</div>

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Using Components With Data

In ToolJet, components can be easily connected to various data sources like databases, APIs, and third-party services through **[queries](what-are-queries)**. Once the data is fetched, you can bind it to components like tables, charts, and more. 

<div style={{textAlign: 'center'}}>
    <img className="screenshot-full" src="/img/tooljet-concepts/what-are-components/adding-data-to-component.png" alt="Adding Data To Component" />
</div>

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Custom Components

ToolJet allows for the creation of custom components using React. This feature is invaluable for developers who require functionalities beyond the 45+ built-in components that ToolJet offers. To create a custom component, you can drag and drop a **[Custom Component](/docs/widgets/custom-component/)** on the canvas and configure its data and code. 

<div style={{textAlign: 'center'}}>
    <img className="screenshot-full" src="/img/tooljet-concepts/what-are-components/custom-components.png" alt="Custom Components" />
</div>
By incorporating custom React components, you can significantly extend the capabilities of your ToolJet applications, allowing for a more tailored and unique user experience. 

</div>


To explore the full list of components in ToolJet, go through the **[Component Library](/docs/widgets/bounded-box)**.