diff --git a/docs/resources/ui-building-blocks/components/built-in-components/calendar.md b/docs/resources/ui-building-blocks/components/built-in-components/calendar.md
new file mode 100644
index 00000000..e204cd4c
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/calendar.md
@@ -0,0 +1,396 @@
+---
+slug: calendar
+title: Calendar
+tags: []
+description: Learn how to add Calendar widget in your FlutterFlow project.
+---
+
+# Calendar
+The Calendar widget shows days in a month and a week. You can use the Calendar widget to filter the event list by date. For example, showing appointments on a specific date.
+
+
+## Adding Calendar to your project
+
+To add the Calendar widget to your project:
+
+1. Drag the **Calendar** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+2. On running the app, the calendar widget shows today's date by default. To set a different date, follow the instructions as below.
+3. Move to the Properties Panel and scroll down to the **Calendar** section.
+4. Find the **Initial Date** property, click **Unset,** and set the date from the variable (app state, API, etc.).
+
+
+
+
+
+
+## Show/save the selected date
+
+When you select/change any date on the calendar, you can display it on the page or save it in a variable/Field (as Timestamp datatype) for later access.
+
+Let's build an example of showing the selected date in a Text widget that looks like the one below:
+
+
+
+
+
+
+The steps to show the selected date in the Text widget are as follows:
+
+### 1. Create an app state variable
+
+Changing the date on the calendar widget emits the selected date in a variable called *calendarSelectedDay*. You can't use this value directly in the Text widget because the Text widget can only accept String values. Hence it would help if you created an app state variable that will store the *calendarSelectedDay* value and then display the selected date in a Text widget (using Date Format Options).
+
+To create the app state variable, please find the instructions [here](../../../../resources/data-representation/app-state#create-app-state-variable).
+
+It should look something like this:
+
+
+
+### 2. Saving selected date in app state variable
+
+To save the selected date in an app state variable, you can utilize the ***On Date Selected*** event and then add actions to update the app state variable:
+
+Here are the steps in detail:
+
+1. Select the **Calendar** widget from the widget tree or canvas area.
+2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action flow Editor** in a new popup window.
+ 1. Click on the **+ Add Action**.
+ 2. On the right side, search and select the [**Update App State**](../../../../resources/data-representation/app-state#update-app-state-variable) action.
+ 3. Set the **Select field to update** to the App State variable **name**.
+ 4. Choose the **Select Update Type** to **Set Value**.
+ 5. Set the **Value Source** to **From Variable**.
+ 6. Set the **Source** to **Widget State**.
+ 7. Set the **Available Options** to the **calendarSelectedDay**.
+ 8. If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to set the start or end date by setting the **Range Part** to **Start** or **End**. For a single date selection (which is by default), the start and end date would be the same.
+
+
+
+
+
+
+
+### 3. Showing date in Text widget from an app state variable
+
+To show the selected date in the Text widget:
+
+1. Select the **Text**, move to the properties panel, and click **Set from Variable**.
+2. Select **Source** as **App State** and **Available Options** to the App State Variable **name**.
+3. (Optional) Set the **Timestamp Format** to display the date in a specific format.
+4. (Optional) Set the default value if you wish to.
+5. Click **Confirm**.
+
+
+
+
+
+
+
+## Using a calendar to filter the list
+
+You might need to use the calendar widget to filter the list of events (appointments, meetings, tickets, etc.). You can do so by applying the filter on the backend query and passing the selected date as a parameter.
+
+Let's build an example that shows the Todos list (from the Firestore collection) based on date. Here's how it looks:
+
+
+
+
+
+
+The steps to use the calendar to filter the list are as follows:
+
+### 1. Prepare data
+
+Before you use the calendar to filter the list, you need to have a list of items with at least one field that holds the date. This date will be used to match against the date selected from the calendar. Skip if you already have data in such a format.
+
+
+You can create a Firestore collection with a date field like the one below:
+
+
+
+### 2. Building UI
+
+Your UI must include at least two calendars and ListView widgets. Here's how you add it:
+
+1. Add the **Calendar** widget. To provide a better user experience, you can switch to the week view.
+2. Add the **ListView** and show the data from the Firestore collection.
+
+
+
+
+
+
+
+### 3. Apply date filter on backend query
+
+Finally, you can add a filter on the existing backend query or a new one and provide the selected date from the calendar.
+
+To apply filter by date:
+
+1. Select **ListView** from the widget tree or the canvas area.
+2. Click on the **Backend Query** tab (on the right side of your screen).
+3. Query a collection. Skip if you have already done so.
+4. Scroll down and click on the **+ Filter** button at the bottom
+5. Find the **Field Name**, click on the Unset, and select the field on which you would like to apply the filter.
+6. Find the **Relation** dropdown, click on the **Unset** and choose the relation as **Equal To**.
+7. Set the **Value Source** to **From Variable**.
+8. Set the **Source** to **Widget State**.
+9. Set the **Available Options** to the **calendarSelectedDay**.
+10. If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to include the start or end date by setting the **Range Part** to **Start** or **End**. For a single date selection (by default), the start and end date would be the same.
+11. Click **Confirm**.
+12. After this, you can display the actual data in UI elements.
+
+
+
+
+
+
+## Customizing calendar
+
+The Properties Panel can be used to customize the appearance and behavior of your widget.
+
+### Changing icon color
+
+You can change the color of the icons displayed on the top right side of the calendar. to do that:
+
+1. Select **Calendar** from the widget tree or the canvas area.
+2. Move to the Properties panel and scroll down to the **Calendar** section.
+3. Find the **Icon Colors** property, click on the box next to **Unset**, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
+
+
+
+
+
+
+### Separate title and icons
+
+By default, the calendar title (displaying the current month-year) and the icon for changing the month are positioned on the same row. If you wish to place them in separate rows, navigate to the **Properties Panel > Calendar >** and **enable the Two-row Header** option.
+
+
+
+
+
+
+### Changing row height
+
+Changing the row height allows you to adjust the calendar height as per your design.
+
+To change the row height:
+
+1. Select **Calendar** from the widget tree or the canvas area.
+2. Move to the Properties panel and scroll down to the **Calendar** section.
+3. Find the **Row Height** property and enter the value.
+
+
+
+
+
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/carousel.md b/docs/resources/ui-building-blocks/components/built-in-components/carousel.md
new file mode 100644
index 00000000..793cdc8a
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/carousel.md
@@ -0,0 +1,327 @@
+---
+slug: carousel
+title: Carousel
+tags: []
+description: Learn how to add Carousel widget in your FlutterFlow project.
+---
+
+# Carousel
+The Carousel widget, often called an image slider, is a popular design element used to display a series of images or content in a horizontal or sometimes vertical format. The primary purpose of a carousel slider is to showcase multiple pieces of information, such as images, product features, news articles, or testimonials, within limited screen space.
+
+
+
+
+
+
+## Adding Carousel widget
+
+To add the Carousel widget to your app:
+
+1. Add the **Carousel** widget from the **Layout Elements** tab.
+2. By default, it adds four slides and shows the first one in the canvas. In the widget tree, it is represented as **Carousel Page**. To see another slide in the canvas, move to the **Properties Panel >** set the **Active Page** to the slide you want to see.
+3. To add a new slide, move to the **Properties Panel > Active Page >** click **+ Add Page**.
+4. To delete any slide, select the **Carousel Page** from the widget tree or the canvas area and press the **Delete** key on the keyboard.
+5. By default, Carousel Page contains an Image widget; however, you can customize it as per your requirements.
+
+
+
+
+
+
+## Customizing
+
+You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
+
+### Changing the scroll direction
+
+By default, the Carousel comes with a horizontal scroll for the slides. To change the scroll direction to vertical, move to the **Properties Panel > Carousel Properties >** set the **Axis** to **Vertical**.
+
+
+
+
+
+
+### Trigger action on slide chang
+
+You might want to trigger an action when the slide is swiped. For example, If your carousel has an auto-play feature, you can listen for slide change events to pause or resume auto-play. You could also have a custom indicator below the Carousel and have it synchronize with the current slide to provide users with clear feedback about their position within the carousel.
+
+To trigger action on page or slide change:
+
+1. Select the widget from the widget tree or canvas area.
+2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
+3. You will notice that the **Type of Action** (aka callback) is already set to **On Page Change**. That means actions added under this will be called whenever the slide is swiped.
+4. Now you can add any action here.
+
+Here is an example showing the snackbar message whenever the slide is swiped.
+
+
+
+
+
+
+### Setting initial page index
+
+You might want to display a specific slide as soon as it is loaded. To do so, move to the **Properties Panel > Carousel Properties >** enter the **Initial Page Index** value. Please **note** that the slide index starts from 0. So, if you want to set slide 1, you should enter 0. If you want to set slide 2, you should enter 1, and so on.
+
+
+
+### Loop carousel contents
+
+By default, the content of the carousel loops continuously. To stop this behavior, move to the **properties panel > Carousel Properties >** disable **Loop carousel contents**.
+
+
+
+
+
+
+### Wrap items in a center widget
+
+If you want all items in a center position, move to the **properties panel > Carousel Properties >** enable **Wrap items in Center Widget**.
+
+
+
+### Changing Viewport and Shrink factor
+
+You can use the **Viewport Fraction** to change the size of a single item, i.e., the item in the center. The **Shrink Factor** lets you adjust the size of other items, i.e., items that are not in focus. Both the properties accept the value between 0 and 1. where 1 is full size, and 0.5 is half of the actual size.
+
+
+
+
+
+
+### Enabling autoplay
+
+When autoplay is enabled, the carousel will automatically transition from one slide to the next at regular intervals, determined by the following options:
+
+- **Duration**: The amount of time (in milliseconds) that it takes to transition from the current slide to the next.
+- **Delay**: The amount of time (in milliseconds) that the item remains in the center before moving to the next one.
+
+
+
+
+
+
+### Change slide on button press
+
+You might want to allow users to change the slide on button press (e.g., next, previous, and skip buttons) in addition to the swipe. You can do so by adding the **Control Carousel** action on the Tap of a Button widget.
+
+
+
+
+
+
+Here's how you do it:
+
+1. First, [add the Carousel](#adding-carousel-widget) widget.
+2. Add buttons to go to the previous and next pages.
+3. Now select any button and define the [Control Carousel](#control-carousel-action) action.
+
+---
+
+## Control Carousel [Action]
+
+By using this action, you can gain more control over the scrolling behavior of the Carousel widget. For instance, you can enable your users to move to the next or previous slide with a single tap of a button.
+
+
+
+
+
+
+### Types of action
+
+These are the types of actions you can add on the Carousel widget.
+
+- **Previous**: Scroll to the previous slide.
+- **Next**: Scroll to the next slide.
+- **First**: Scroll to the first slide.
+- **Last**: Scroll to the last slide.
+- **Jump to**: Scroll to a specific slide in the Carousel widget. Please note that the slide index starts from 0. So, if you want to jump to slide 1, you should enter 0. If you want to jump to slide 2, you should enter 1, and so on.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/_category_.json b/docs/resources/ui-building-blocks/components/built-in-components/chart/_category_.json
new file mode 100644
index 00000000..f1f949d5
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/chart/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Chart",
+ "position": 1
+}
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/bar-chart.md b/docs/resources/ui-building-blocks/components/built-in-components/chart/bar-chart.md
new file mode 100644
index 00000000..2fbc7ce6
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/chart/bar-chart.md
@@ -0,0 +1,237 @@
+---
+slug: bar-chart
+title: Bar Chart
+tags: []
+description: Learn how to add Bar Chart widget in your FlutterFlow project.
+sidebar_position: 1
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Bar Chart
+
+The Bar Chart shows the rectangular bars on a graph whose height varies as per its numeric value and has equal width. This can be used to display categorical information.
+
+For example, you could use the Bar chart to display each year's income and expense value together.
+
+
+## Adding bar chart
+
+Adding a chart comprises of following steps:
+
+1. [Preparing data](#1-preparing-data)
+2. [Adding bar chart widget](#2-adding-bar-chart-widget)
+
+### 1. Preparing data
+
+Before adding the chart widget, you need to prepare the data in the format that the chart widget accepts. The bar chart widget requires label values (runs horizontally from left to right) and Y coordinate values (runs vertically from bottom to top). Together these values (labels and Y coordinate) are used to draw bars on a chart. You can store and retrieve these values in the following ways:
+
+1. [Firestore Documents](#11-firestore-documents)
+2. [Numbers Lists](#12-numbers-lists)
+
+#### 1.1 Firestore Documents
+
+If you use Firebase as the backend, you can create a collection and add the list of documents. Each document entry can be used to draw bars on the chart. Hence you must add at least two fields (one with DataType String and another with DataType Double) in a document that will act as the labels, and the Y coordinates value to draw a bar.
+
+The figure below illustrates the sample collection that draws the two bars (income and expense) for each year.
+
+
+
+:::warning
+The above collection schema is used for simplification. You are free to have your own schema that works best for you.
+:::
+
+Here's how the data is used to draw bars on a chart:
+
+
+
+
+#### 1.2 Numbers Lists
+
+The bar chart widget can draw a bar using a list of labels and numbers. You need at least two separate lists with DataType String and Double. One list stores a list of labels to be displayed on the X-axis, whereas the other stores a list of values on the Y-axis. The chart widget uses both variables to draw the bar.
+
+:::info
+The variable can be an app state variable or the action output variable of an API call.
+:::
+
+The figure below illustrates the sample app state variables that draw the two bars (income and expense) for each year.
+
+
+
+:::warning
+A number of values in the Y-axis variable should match the number of labels in the X-axis variable.
+:::
+
+Here's how the number list is used to draw bars on a chart:
+
+
+
+To create the app state variable, please find the instructions [here](../../../../../resources/data-representation/app-state#create-app-state-variable).
+
+### 2. Adding bar chart widget
+
+To add the bar chart widget to your project:
+
+1. Drag the **Chart** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+2. Move to the property panel and set the **Chart Type** to **Bar**.
+3. For the Bar Chart, a single **Chart Data** is a **Bar** drawn on the chart. The bar is drawn by providing the data to this. To show the first bar, open the **Chart Data 1** section, and set the **Data Source** to [Firestore Documents](#11-firestore-documents) or [Numbers List](#12-numbers-lists).
+4. If you select **Firestore Documents**:
+ 1. Make sure you have access to a list of documents. The list of documents can be retrieved by querying a collection at any top-level widget, such as the **Page** or **Column** widget. You can also query a collection on the Chart widget itself. To query collection on a page:
+ 1. Select the **page** and then click on the **Backend Query** tab (on the right side of your screen).
+ 2. Set the **Query Type** to **Query Collection**.
+ 3. Scroll down to find the **Collection** dropdown and set it to your collection.
+ 4. Set the **Query Type** to **List of Documents**.
+ 5. To order the labels, you can perform Ordering on a query.
+ 6. Click **Save**.
+ 2. Set the Source to the **collection_name Documents > Documents (List/)** and click **Confirm** (e.g. *transactions Documents > Documents (List/)*).
+ 3. Set the **Bar Labels Field,** whose values will be used as labels, and lay out horizontally from left to right (e.g., day, week, month, year).
+ 4. Set the **Bar Values Field,** whose values will be used to draw bars on a chart. This will draw bars for the first chart data (e.g., income data).
+5. If you select **Numbers Lists**:
+ 1. Under the **Bar Labels**, click on the **UNSET** and set it to a variable whose values will be used as labels and lay out horizontally from left to right (e.g., day, week, month, year).
+ 2. Further options are displayed as per the selected source. For example, if you choose **App State**, The **Available Option** field is displayed that allows you to select the actual variable.
+ 3. Under the **Bar Values**, click on the **UNSET** and set it to a variable whose values will be used to draw bars on a chart. This will draw bars for the first chart data (e.g., income data).
+6. Click **Add Data** to show bars for multiple categories (e.g., income and expense). The bars for each new category are displayed next to the previous one. **Note**: When you click **Add Data**, you can only set **Bar Values Field** since the **Bar Labels Field** is already provided in the first **Chart Data**.
+7. Scroll down to the **Chart Properties** section and adjust the **Width** and **Height** properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Customizing bars
+
+You can customize the look and feel of bars to match your design.
+
+### Customize bar for an individual chart data
+
+You can customize the bar for each specific chart data to help users easily identify the information.
+
+To customize the bar for each chart data:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and open the **Chart Data** > **Bar Properties**.
+3. To change the **Bar Color**, click on the box next to the already selected color, select any dark/light color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly.
+4. To add a border around the bar, enter the **Border Width** value and change its **Border Color**.
+
+
+
+
+
+
+
+### Customize all bars
+
+To customize all bars together:
+
+1. To change the bar width, scroll down the **Bar Styling properties > Bar Width** and enter the value.
+2. To add space between two bars or two bars category (if you have multiple chart data), enter the value in the **Group Spacing** property.
+3. If you have multiple chart data and want to add space between two adjacent bars, you can enter a value in the **Bar Spacing** property.
+4. To combine multiple chart data and display it as a single bar, enable the **Stack Bars**.
+5. To change how the bars should be distributed horizontal direction, choose from the **Main Axis Alignment** options.
+
+
+
+
+
+
+
+
+## Customizing chart
+
+You can [customize the chart](../chart/overview#customizing-chart) to match your design by changing the background color, setting axis bounds, showing grids, displaying borders, and more.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md b/docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md
new file mode 100644
index 00000000..d73c0b24
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md
@@ -0,0 +1,495 @@
+---
+slug: overview
+title: Chart
+tags: []
+description: Learn how to add Chart widget in your FlutterFlow project.
+sidebar_position: 1
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Chart
+The chart widget is used to represent the information in a graphical format. You can use it to display complex information in an easily understandable format.
+
+
+## Types of chart
+
+You can add the following types of charts:
+
+1. [Line Chart](line-chart.md)
+2. [Bar Chart](bar-chart.md)
+3. [Pie Chart](pie-chart.md)
+
+
+## Customizing chart
+
+Using *Chart* Properties (inside the properties panel), you can customize the appearance and behavior of the widget.
+
+:::info
+The following instructions will have a similar effect on the Bar chart.
+:::
+
+### Showing legend
+
+Legend helps users identify the data drawn over the chart. It's a small box that shows the chart data name/text next to its color (a color used to draw a line or bar).
+
+
+
+To show legend:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel and open **Chart Data 1**.
+3. Enter the **Legend** name. This will be displayed as the name of the line or bar.
+4. If you have multiple chart data (e.g., Chart Data 1, Chart Data 2, and so on), set the legend for them as well.
+5. Scroll down to **Chart Properties** and enable the **Show Legend** property.
+
+
+
+
+
+
+
+### Customizing legend box
+
+You can change the appearance of the legend box by following the instructions below:
+
+1. First, [enable the legend](#showing-legend).
+2. Scroll down to the **Legend Properties** section.
+3. To change the dimension of the legend box, enter the **Width** and **Height** values.
+4. The legend box typically appears over the chart on the bottom right side. To change its position, use the **Horizontal** and **Vertical** **Alignment** slider.
+5. To change the background color, find the **Background Color** property and click on the box next to **Unset**, select the color, then click **Use Color** or click on **Unset** and enter a Hex Code directly.
+6. To customize the border, use the **Border Color**, **Border Width,** and **Border Radius**.
+7. To add space between legend text and its box border, adjust **Padding** property.
+
+
+
+
+
+
+### Customizing legend text and indicator
+
+To customize the legend text and indicator:
+
+1. First, [enable the legend](#showing-legend).
+2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md#common-text-styling-properties).
+3. To add space between the indicator and the text, adjust the **Text Padding** property.
+4. You can change the indicator size by entering a value inside the **Indicator Size** property.
+5. To create rounded corners around the indicator, you can use the **Indicator Border Radius** property.
+
+
+
+
+
+
+### Changing background color
+
+The default background color for the chart widget is white. To change the background color:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Find the **Background Color** property, click on the box next to **Unset**, select any dark/light color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
+
+
+
+
+
+
+
+### Set axis bounds
+
+Axis Bounds specify limits on the axis. You can set the minimum and maximum limits on the X and Y axes.
+
+You can set four types of bounds on a chart:
+
+1. **Min X** (only applicable in Line Chart): Specifies a number at which the X-axis should start.
+2. **Min Y**: Specifies a number at which the Y-axis should start.
+3. **Max X** (only applicable in Line Chart): Specifies a number at which the X-axis should end.
+4. **Max Y**: Specifies a number at which the Y-axis should end.
+
+:::info
+If you don't specify the axis bounds, the start and end numbers for the X and Y axis are set as per the min and max of the actual data.
+:::
+
+To set the axis bounds:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Find the **Axis Bounds** section and enter the **Min X**, **Min Y**, **Max X**, and **Max Y** values.
+
+
+
+
+
+
+The line chart with bounds set to **Min X:0 ,Min Y:0, Max X:7 and Max Y:100** looks like this:
+
+
+
+
+
+### Showing grid
+
+To display the grid on the chart background:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Find the **Show Grid** toggle and **enable** it.
+
+### Showing border
+
+To display a border around the chart:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Find the **Show Border** toggle and **enable** it.
+4. Find the **Border Color** property, click on the box next to **Black**, select the color, and then click **Use Color** or click on **Black** and enter a Hex Code directly.
+5. Now, find the **Border Width** property below and enter the value. (e.g. 2,5,10)
+
+### Showing tooltip
+
+Sometimes it becomes difficult to identify the exact Y value. To overcome this, you can enable the tooltip. Enabling the tooltip will display the Y value when you interact with the chart. You can also add background color to the tooltip.
+
+To enable tooltip:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Find the **Show Border** toggle and **enable** it.
+4. To change the background color, find the **Tooltip Background Color** property, click on the box next to **Unset**, select any dark/light color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly.
+
+
+
+
+
+
+### Customizing X axis (Show name, number, and labels)
+
+You can customize the X axis to display names and numbers on it.
+
+### Displaying name on X-Axis
+
+To show the name on the axis, such as day, week, and month:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Scroll down to the **X Axis Properties** and enter the value in the **Text** input box. You can also set the name from a variable by clicking on the **Set from Variable text**.
+4. You can also customize the appearance of the name text.
+
+
+
+
+
+
+### Displaying numbers or labels on the X axis
+
+Displaying numbers or labels on the axis helps you quickly understand the graph.
+
+**For Line Chart**
+
+If you have set the [Axis bounds](#set-axis-bounds), the start and end numbers are displayed as per the value set in **Min X** and **Max X**. Otherwise, they are shown as per the min and max values of the actual data. You can also specify the intervals between the numbers.
+
+To display numbers on the X-axis:
+
+1. Select the **Chart** widget, head over to the properties panel, and scroll down to the **Chart Properties** section.
+2. Scroll down to the **X Axis Properties** and enable the **Show Label** option.
+3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate **Number Format Options**.
+4. Enter the value in the **Label Interval** input box.
+5. You can also customize the appearance of the numbers.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+:::info
+
+For the bar chart, you can only display labels on X-axis.
+
+:::
+
+### Customizing Y axis (Show name and numbers)
+
+You can customize the Y axis to display names and numbers on it.
+
+### Displaying name on Y-axis
+
+To show the name on the axis, such as progress, number of users, and sales:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and scroll down to the **Chart Properties** section.
+3. Scroll down to the **Y-Axis Properties** and enter the value in the **Text** input box. You can also set the name from a variable by clicking on the **Set from Variable text**.
+4. You can also customize the appearance of the name text.
+
+
+
+
+
+
+
+### Displaying numbers on the Y axis
+
+Just like X-axis, If you have set the [Axis bounds](#set-axis-bounds), the start and end numbers are displayed as per the value set in **Min Y** and **Max Y**. Otherwise, they are shown as per the min and max value of the actual data. You can also specify the intervals between the numbers.
+
+To display numbers on the Y axis:
+
+1. Select the **Chart** widget, head over to the properties panel, and scroll down to the **Chart Properties** section.
+2. Scroll down to the **Y Axis Properties** and enable the **Show Label** option.
+3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate **Number Format Options**.
+4. Enter the value in the **Label Interval** input box.
+5. You can also customize the appearance of the numbers.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/line-chart.md b/docs/resources/ui-building-blocks/components/built-in-components/chart/line-chart.md
new file mode 100644
index 00000000..9b0748dd
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/chart/line-chart.md
@@ -0,0 +1,195 @@
+---
+slug: line-chart
+title: Line Chart
+tags: []
+description: Learn how to add Line Chart widget in your FlutterFlow project.
+sidebar_position: 0
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Line Chart
+
+The Line Chart connects the data points on a graph with a line. This is typically used to display information that evolves over time.
+
+For example, you could use this widget to show progress over some time. This will plot the progress value on a chart that becomes easily digestible for the users instead of just showing numbers in a tabular format.
+
+## Adding line chart
+
+Adding a chart comprises of following steps:
+
+1. [Preparing Data](#1-preparing-data)
+2. [Adding Chart widget](#2-adding-chart-widget)
+
+### 1. Preparing Data
+
+Before adding the chart widget, you need to prepare the data in the format that the chart widget accepts. The line chart widget requires an X coordinate (runs horizontally from left to right) and a Y coordinate (runs vertically from bottom to top) value. Together these values (x,y) are used to mark a point in the chart. You can store and retrieve these values in the following ways:
+
+1. [Firestore Documents](#11-firestore-documents)
+2. [Numbers Lists](#12-numbers-lists)
+
+#### 1.1 Firestore Documents
+
+If you use Firebase as the backend, you can create a collection and add the list of documents. Each document entry is used to plot a single point on the chart. Hence you must add at least two fields (with DataType Integer or Double) in a document that acts as the X and Y coordinates to plot the point.
+
+The figure below illustrates the sample collection that will draw a single line on the chart:
+
+
+
+:::warning
+The above collection schema is used for simplification. You are free to have your own schema that works best for you.
+:::
+
+Here's how the data is used to mark a point in a chart:
+
+
+
+
+#### 1.2 Numbers Lists
+
+The chart widget can plot a point using a list of numbers. You must create at least two separate lists with DataType Integer or Double. One list stores all X-axis values, whereas the other stores a list of all Y-axis values. The chart widget uses both variables to create pair of (x,y), which are then used to mark a point in the chart.
+
+:::info
+The variable can be an app state variable or the action output variable of an API call.
+:::
+
+:::warning
+You must have at least two variables to draw a single line.
+:::
+
+The figure below illustrates what the app state variables should look like:
+
+
+
+Here's how the number list is used to mark a point in a chart:
+
+
+
+To create the app state variable, please find the instructions [here](../../../../../resources/data-representation/app-state#create-app-state-variable).
+
+### 2. Adding Chart widget
+
+To add the chart widget to your project:
+
+1. Drag the **Chart** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree. **Note**: The Line Chart is the default chart type.
+2. Move to the property panel and scroll down to the **Chart Data** section.
+3. For the Line Chart, **Chart Data** is a **line** drawn on the chart. The line is drawn by providing data to this. To show the first line, open the **Chart Data 1** section, and set the **Data Source** to [Firestore Documents](#11-firestore-documents) or [Number List](#12-numbers-lists).
+4. If you select **Firestore Documents**:
+ 1. Make sure you have access to a list of documents. The list of documents can be retrieved by querying a collection at any top-level widget, such as **Page** or **Column** widget. You can also query a collection on the Chart widget itself. To query collection on a page:
+ 1. Select the **page** and then click on the **Backend Query** tab (on the right side of your screen).
+ 2. Set the **Query Type** to **Query Collection**.
+ 3. Scroll down to find the **Collection** dropdown and set it to your collection.
+ 4. Set the **Query Type** to **List of Documents**.
+ 5. Click **Save**.
+ 2. Set the Source to the **collection_name Documents > Documents (List\)** and click **Confirm** (e.g. *progress Documents > Documents (List\)*).
+ 3. Set the **X Value Field,** whose values will lay out horizontally from left to right (e.g., day, week, month).
+ 4. Set the **Y Value Field,** whose values will lay out vertically from bottom to top (e.g., progress, number of users, sales).
+5. If you select **Numbers Lists**:
+ - Under the **X Data**, click on the **UNSET** and set it to a variable whose values will lay horizontally from left to right (e.g., day, week, month).
+ - Further options are displayed as per the selected Source. For example, if you choose **App State**, The **Available Option** field is displayed that allows you to select the actual variable.
+ - Under the **Y Data**, click on the **UNSET** and set it to a variable whose values will lay out vertically from bottom to top (e.g., progress, number of users, sales).
+6. Click **Add Data** to show multiple lines on a chart. Each new line is stacked on top of the previous line.
+7. Scroll down to the **Chart Properties** section and adjust the **Width** and **Height** properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Customizing line
+
+You can customize the look and feel of each line drawn on a chart widget to match your design. The Line Properties (inside the Chart Data) section is used the customize the line.
+
+To customize the line:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, open the **Chart Data** section and then open the **Line Properties** section.
+3. To change the **Line Color**, click on the box next to the already selected color, select any dark/light color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly.
+4. To change the thickness of the line, change the value in the **Line Thickness** input box.
+5. By default, all the data points are connected with a smooth curve line; to disable this, simply **turn off** the **Curved Lines** property. This will draw a straight line between two points.
+ 1. If you keep this property enabled, you may notice that for some data points the curve goes beyond/above the actual value. To prevent this, you can **enable** the **Prevent curve from overshooting**.
+6. To see the point at the exact location on the chart, you can turn on the **Show Dots** property.
+7. To fill the area below the line with a custom color, turn on the **Fill Below Line** property and set the **Fill Color** by clicking on the box next to **Unset**, select any dark/light color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly.
+
+
+
+
+
+
+
+## Customizing chart
+
+You can [customize the chart](../chart/overview#customizing-chart) to match your design such as changing the background color, setting axis bounds, show grids, displaying borders, and more.
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/pie-chart.md b/docs/resources/ui-building-blocks/components/built-in-components/chart/pie-chart.md
new file mode 100644
index 00000000..cf52a989
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/chart/pie-chart.md
@@ -0,0 +1,240 @@
+---
+slug: pie-chart
+title: Pie Chart
+tags: []
+description: Learn how to add Pie Chart widget in your FlutterFlow project.
+sidebar_position: 2
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Pie Chart
+The Pie Chart divides the circle (aka Donut) into slices/sections representing different categories. Each section shows the size of the data. It is typically used to display how a total amount is distributed between sections.
+
+For example, you could use the Pie Chart to show which animal dominates the pet world.
+
+
+## Adding pie chart
+
+Adding a pie chart comprises of the following steps:
+
+1. [Preparing data](#1-preparing-data)
+2. [Adding pie chart widget](#2-adding-pie-chart-widget)
+
+### 1. Preparing data
+
+Before adding the chart widget, you need to prepare the data in the format that the chart widget accepts. The pie chart widget requires labels and section values. Together these values are used to draw slices on a chart. You can store and retrieve these values in the following ways:
+
+1. [Firestore Documents](#11-firestore-documents)
+2. [Numbers Lists](#12-numbers-lists)
+3. [Single Value](#13-single-value)
+
+#### 1.1 Firestore Documents
+
+If you use Firebase as the backend, you can create a collection and add the list of documents. Each document entry can be used to draw sections on the chart. Hence you must add at least two fields (one with DataType String and another with DataType Integer or Double) in a document. The field with String DataType will be used as labels, whereas the field with Integer or Double DataType will be used as section values.
+
+The figure below illustrates the sample collection that draws three sections on the pie chart.
+
+
+
+:::warning
+The above collection schema is used for simplification. You are free to have your own schema that works best for you.
+:::
+
+Here's how the data is used to draw sections on a pie chart:
+
+
+
+#### 1.2 Numbers Lists
+
+The pie chart widget can draw sections using a list of labels and numbers. You need at least two different lists with DataType String and Integer or Double. One list stores a list of labels, whereas the other stores a list of section values.
+
+:::info
+The variable can be an app state variable or the action output variable of an API call.
+:::
+
+The figure below illustrates the sample app state variables that draw three sections on the pie chart.
+
+
+
+:::warning
+The number of section values should match the number of labels.
+:::
+
+Here's how the number list is used to draw sections on a chart:
+
+
+
+To create the app state variable, please find the instructions [here](../../../../../resources/data-representation/app-state#create-app-state-variable).
+
+#### 1.3 Single Value
+
+When you have a fixed number of labels (aka static labels, which won't change over time), you can use this option. This option allows you to define labels and their section value from a variable.
+
+:::info
+The variable can be an app state variable or the action output variable of an API call.
+:::
+
+Here's how the three separate app state variables are used to draw sections on a chart:
+
+
+
+### 2. Adding pie chart widget
+
+To add the pie chart widget to your project:
+
+1. Drag the **Chart** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+2. Move to the property panel and set the **Chart Type** to **Pie**.
+3. For the Pie Chart, a single **Chart Data** is a **Section** drawn on the chart. The section is drawn by providing the data to this. Open the **Chart Data 1** section, and set the **Data Source** among the [Firestore Documents](#11-firestore-documents), [Numbers List](#12-numbers-lists), and [Single Value](#13-single-value).
+4. If you select **Firestore Documents**:
+ 1. Make sure you have access to a list of documents. The list of documents can be retrieved by querying a collection at any top-level widget, such as the **Page** or **Column** widget. You can also query a collection on the Chart widget itself. To query collection on a page:
+ 1. Select the **page** and then click on the **Backend Query** tab (on the right side of your screen).
+ 2. Set the **Query Type** to **Query Collection**.
+ 3. Scroll down to find the **Collection** dropdown and set it to your collection.
+ 4. Set the **Query Type** to **List of Documents**.
+ 5. Click **Save**.
+ 2. Under the **Data**, click on the **UNSET** and set the source to the **collection_name Documents > Documents (List/)** and click **Confirm** (e.g., *pets Documents > Documents (List/)*).
+ 3. Set the **Legend Labels Field,** whose values will be used as labels.
+ 4. Set the **Section Values Field,** whose values will be used to draw sections on a chart.
+ 5. To set the section color, scroll down to **Pie Chart Properties > Pie Chart Color** and click on **Add Color**. **Note**: Make sure the number of colors you have must be equal to or greater than the number of labels. Otherwise, all sections would have the same colors.
+5. If you select **Numbers Lists**:
+ 1. Under the **Legend Labels**, click on the **UNSET** and set it to a variable whose values will be used as labels.
+ 2. Further options are displayed as per the selected source. For example, if you choose **App State**, The **Available Option** field is displayed allowing you to select the actual variable.
+ 3. Under **Section Values**, click on the **UNSET** and set it to a variable whose values will be used to draw sections on a chart.
+ 4. To set the section color, scroll down to **Pie Chart Properties > Pie Chart Color** and click on **Add Color**. **Note**: Make sure the number of colors you have must be equal to or greater than the number of labels. Otherwise, all sections would have the same colors.
+6. If you select **Single Value**:
+ 1. Under **Section Value**, click on the **UNSET** and set it to a variable whose value will be used to draw the first section.
+ 2. Further options are displayed as per the selected source. For example, if you choose **App State**, The **Available Option** field is displayed allowing you to select the actual variable.
+ 3. Click **Add Data** to show multiple sections (e.g., Dogs, Cats, Birds). **Note**: This option is only available when using Single Value.
+7. Scroll down to the **Chart Properties** section and adjust the **Width** and **Height** properties.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Customizing section
+
+You can customize the look and feel of each section to match your design by following the instructions below:
+
+1. Select the **Chart** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and open the **Chart Data** > **Pie Chart Properties**.
+3. To change the size of the circle, enter the value in the **Pie Chart Radius** property.
+4. To add a border around the section, enter the **Border Width** value and change its **Border Color**.
+5. To create an inner circle (hole) inside the main circle(Donut), enter the size into the **Donut Hole Radius** property.
+ 1. To change the **Donus Hole Color**, click on the box next to the already selected color, select any dark/light color, and then click **Use Color** or click on an already selected color enter a Hex Code directly.
+6. To display the section value or its percentage, set the **Section Lable Type** to **Value** or **Percent** respectively.
+
+
+
+
+
+
+## Showing legend
+
+Legend helps users identify the data drawn over the chart. It's a small box that shows the chart data name/text (label) next to its color (a color used to draw a section).
+
+To show and customize the legend follow the instructions [here](../chart/overview#showing-legend).
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/choicechips.md b/docs/resources/ui-building-blocks/components/built-in-components/choicechips.md
new file mode 100644
index 00000000..2ac6cef1
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/choicechips.md
@@ -0,0 +1,234 @@
+---
+slug: choice-chips
+title: ChoiceChips
+tags: []
+description: Learn how to add ChoiceChips in your FlutterFlow app.
+---
+
+
+# ChoiceChips
+The ChoiceChips widget allows users to select a single option from a group of chips. Each chip is presented with an icon and accompanying text, making it easy to represent various choices.
+
+You could use this widget to implement a filter feature in an e-commerce app to let users select different product attributes like size, color, or price range.
+
+
+## Adding ChoiceChips widget
+
+To add the ChoiceChips widget to your app:
+
+1. Add the **ChoiceChips** widget from the **Form Elements** tab.
+2. By default, this widget adds a single option named **Option 1**. To change the name, move to the Properties Panel, and scroll down to the **Define Options** section. Find the **Option 1** property and change the **name** and **icon**.
+3. To add more options, click on the **Add Option** text and set the name and icon for new options.
+4. To set any chip as selected by default, find the **Initial Option** property and enter the chip name.
+ 1. To set this value dynamically, open the **Set from Variable** menu and set the variable.
+ 2. When [multiselect](#allow-multiselect) is enabled, you can also set the list of options to pre-select.
+
+
+
+
+
+
+## Trigger action on change
+
+See how to [trigger an action when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+
+## Select or clear all choices [Action]
+
+Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the **Clear All/Select All** action.
+
+:::info
+Before you add this action, ensure you [**allow multiselect**](#allow-mulitselect) on this widget.
+:::
+
+## Customizing
+
+You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
+
+### Allow multiselect
+
+You might want to allow users to select multiple choices to filter the result.
+
+To allow multiselect, select the **ChoiceChips** widget, move to the properties panel, find the **Allow Multiselect** property and enable it.
+
+
+
+
+
+
+### Disable ChoiceChips
+
+Sometimes, you may want to present the choices in a read-only mode, preventing users from making any changes.
+
+To do so, move to the **Properties Panel** **>** turn on **Disable >** click **Unset,** and set the [**Conditions**](../../../../resources/functions/conditional-logic). This can be the [**Single Condition**](../../../../resources/functions/conditional-logic#single-condition) or [**Combine Conditions**](../../../../resources/functions/conditional-logic#multiple-conditions-andor) based on your requirement. **Note:** The ChoiceChips widget will be disabled only when condition(s) is true.
+
+
+
+
+
+
+### Adding Space between Chips
+
+To add a space between the chips, you can use the **Chip Spacing** ad **Row Spacing** property.
+
+- **Chip Spacing**: This adds horizontal gaps between individual chips.
+- **Row Spacing**: This adds vertical gaps between the chips in a row.
+
+
+
+
+
+
+### Align chips
+
+When you have chips in multiple rows, you can align them using the **Alignment** property. This is similar to setting main axis alignment for the Row widget.
+
+
+
+
+
+
+### Customizing selected and unselected chip style
+
+Various properties under the **Selected Chip Style** and **Unselected Chip Style** section allow you to customize chips to match your design. Here's how you do it:
+
+1. To change the background color, use the **Color** property.
+2. To change the icon's color and size, use the **Icon Color** and **Icon Size** property.
+3. To add a shadow or to create a sense of depth for the chip, you can use the **Elevation** property.
+4. To customize the border, use the **Border Color**, **Border Width** (thickness), and **Border Radius** (rounded corner) properties.
+5. To create some space around the label, use the **Label Padding** property.
+6. To change the label text styling, use the **Selected Text Style** property.
+
+
+
+
+
+
+7. Similarly, you can customize the properties under the **Unselected Chip Style**.
+
+
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/count-controller.md b/docs/resources/ui-building-blocks/components/built-in-components/count-controller.md
new file mode 100644
index 00000000..f972e562
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/count-controller.md
@@ -0,0 +1,152 @@
+---
+slug: count-controller
+title: CountController
+tags: []
+description: Learn how to add CountController in your FlutterFlow app.
+---
+
+# CountController
+
+The CountController widget is used to increment and decrement the count or number.
+
+You could use the CountController widget to set the quantity of any product when buying in an e-commerce app.
+
+## Adding CountController to your project
+
+Here's an example of how you can use a CountController widget in your project:
+
+1. First, drag the **CountController** widget from the **Form Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+2. Move to the properties panel (in the right) and scroll down to the **Count Controller Properties**.
+3. The number on CountController appears as soon as it is loaded, called the Initial Count, 0 by default. To change this initial count, enter the value in the **Initial Count** input box. You can also set this value dynamically by having it **Set from Variable**. This can be used to display the default quantity of a product in an E-commerce app.
+4. The Step Size property sets the value by which the count should be increased or decreased. The default value is 1. To change this, enter the value in the **Step Size** input box.
+5. To allow users to set the valid count or quantity, you can limit the CountController range (min and max count) by specifying the value in the **Minimum** and **Maximum** input boxes.
+
+
+
+
+
+
+## Trigger action on count change
+
+Let's see how to trigger an action when the count changes on this widget. This is helpful when you want to update the latest count in your backend (make API call, create/update Firestore document) as the count changes.
+
+
+
+
+
+
+To do so:
+
+1. Select **CountController**, select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
+2. You will notice that the **Type of Action** (aka callback) is already set to **On Count Changed**. That means actions added under this will be called whenever the count changes.
+3. Now you can add any action here.
+
+Here is an example of updating the count in an [app state variable](../../../../resources/data-representation/app-state).
+
+
+
+
+
+
+## Customizing CountController
+
+The Properties Panel can be used to customize the appearance and behavior of your widget.
+
+### Customizing icon
+
+To customize the decrement icon:
+
+1. Select the **CountController** widget from the widget tree or the canvas area.
+2. Move to the properties panel, and find the **Style Properties** section.
+3. To change the icon, click on the already selected icon and then search and select the new icon.
+4. To change the icon size, enter the value in the **Icon Size** property.
+5. To change the icon color, find the **Icon Color** property, click on the box next to the selected color, select the color, and click **Use Color** or click on **Unset** and enter a Hex Code directly.
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md b/docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md
new file mode 100644
index 00000000..881bfcb5
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md
@@ -0,0 +1,227 @@
+---
+slug: credit-card-form
+title: CreditCardForm
+tags: []
+description: Learn how to add CreditCardForm in your FlutterFlow app.
+---
+# CreditCardForm
+The CreditCardForm widget allows users to enter their credit card details such as card number, expiry date, and CVV.
+
+## Adding CreditCardForm widget
+
+Here's an example of how you can add the CreditCardForm widget to your project:
+
+1. First, drag the **CreditCardForm** widget from the **Form Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+2. When you type in, the card number gets obscured (number becomes •, i.e., dot). To disable this feature and allows users to see the full number, move to the properties panel, find the **Obscure Card Number** toggle and turn it off.
+
+
+
+
+
+
+## Customizing
+
+You can customize the behavior and appearance of this widget using the various properties available under the properties panel.
+
+### Obscuring CVV
+
+By default, the CVV number is visible when you type in. It's essential that you obscure (number becomes •, i.e. dot) it.
+
+To obscure the CVV:
+
+1. Select the **CreditCardForm** widget from the widget tree or the canvas area.
+2. Move to the properties panel, find the **Obscure CVV** toggle and turn it on.
+
+
+
+
+
+
+### Adding background color
+
+To change the background color of the fields:
+
+1. Select **CreditCardForm** from the widget tree or the canvas area.
+2. Move to the Properties panel and scroll down to the **Input Decoration Properties** section.
+3. Find the **Fill** toggle and turn it on.
+4. Now find the **Fill Color** property, click on the box next to **Unset**, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
+
+
+
+
+
+
+### Customizing border
+
+To customize the border around the credit card fields:
+
+1. Select **CreditCardForm** from the widget tree or the canvas area.
+2. Move to the Properties panel and scroll down to the **Input Decoration Properties** section.
+3. Select from the **Input Border Type** dropdown.
+ 1. Choose **Outline** to place a border around the entire field.
+ 2. Choose **Underline** to place a border only on the bottom of the field.
+ 3. Choose **None** to eradicate the border.
+4. Scroll down a bit to find the **Border Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
+5. Find the **Border Width** property below, and enter the desired value.
+6. Now, Enter the **Border Radius** property and enter the value as 50. By default, the value 50 will be set for all corners, which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon to change each corner separately.
+
+
+
+
+
+
+### Add content padding
+
+Content padding adds space between the field text and the border.
+
+To add the content padding:
+
+1. Select **CreditCardForm** from the widget tree or the canvas area.
+2. Move to the Properties panel (on the right side of your screen) and scroll down to the **Input Decoration Properties** section.
+3. Find the **Content Padding** property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.
+
+
+
+
+
+
+### Reducing field height
+
+You might want to reduce the field height to match your design. Using the dense property, you can reduce the field height to a predefined size.
+
+To reduce the field height:
+
+1. Select **CreditCardForm** from the widget tree or the canvas area.
+2. Move to the Properties panel (on the right side of your screen) and scroll down to the **Input Decoration Properties** section.
+3. Find the **Dense** toggle and turn it on.
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/datatable.md b/docs/resources/ui-building-blocks/components/built-in-components/datatable.md
new file mode 100644
index 00000000..d505f0ab
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/datatable.md
@@ -0,0 +1,542 @@
+---
+slug: datatable
+title: DataTable
+tags: []
+description: Learn how to add DataTable widget in your FlutterFlow project.
+---
+
+# DataTable (Paginated)
+
+The DataTable is a widget used to display data in a table format. It organizes information into rows and columns, similar to a spreadsheet, making it easier to read and understand large amounts of data.
+
+For example, you could use it to display a list of employees in a company, with each row representing an individual employee and the columns showing the employee's name, age, department, and salary.
+
+Additionally, this widget supports pagination, which can handle large datasets by displaying them in manageable chunks.
+
+
+
+## Adding DataTable widget
+
+Let's see how to add a DataTable widget by building an example that shows a list of all employees in a company. Here's how it looks:
+
+
+
+
+
+
+The steps to add DataTable and display the employees' details are:
+
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **DataTable** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+2. It adds two types of predefined widgets:
+ 1. **DataTableHeader**: This refers to the top row of the table, which displays the names of the columns. To change its text, click on the **DataTableHeader > Text** widget, move to the properties panel and give it a name.
+ 2. **DataTableCell**: This displays the actual data. By default, it comes with the Text widget. However, you can replace it with any other widget based on your requirements.
+ 
+
+3. By default, it shows three columns. To show more, select the **DataTable** widget, move to the **properties panel > Paginated Data Table Properties >** enter the **Number of Columns** you want.
+4. For the demonstration purpose, let's display data from Firestore:
+ 1. First, ensure you have created a collection.
+ 2. *It's **important to note** that, unlike other widgets, you cannot directly have a backend query on the DataTable widget. Because if you do so, you won't have access to the query result (list of employees) for further use, such as sorting and searching. Hence, getting the backend query result on a parent widget and then using that result to populate DataTable is advisable.*
+ 3. For this example, on page load, we'll add a Query Collection action and save the result in a page state variable.
+ 4. On the **DataTable** widget, generate dynamic children using the page state variable (which holds a list of employees).
+ 5. Display data in the **DataTableCell > Text**.
+
+
+
+
+
+
+## Sorting
+
+The way sorting works in a DataTable is as follows: first, you mark the column to sort. Then, whenever a user clicks on a header, you receive an *OnSortChanged* callback with two properties: `Sorted Column Index` and `Is Ascending`. You consume both properties in a custom function to write a sorting logic.
+
+- **`Sorted Column Index`** specifies the column by which the data should be sorted (0 for first column, 1 for the second column and so on).
+- **`Is Ascending`** determines the sort direction (true for ascending order, false for descending order).
+
+:::info
+**Remember**, sorting is not performed automatically by the DataTable widget. It provides you the flexibility to implement your own sorting logic through a Custom Function.
+:::
+
+Let's extend the previous example and see how you can enable sorting on columns. Here's how it looks:
+
+
+
+
+
+
+To enable sorting:
+
+1. Select the **DataTableHeader**, move to the **Properties Panel**, and turn on the **Sortable** toggle. Apply this to each column you want to sort
+2. Select the DataTable widget, select **Actions** from the Properties panel, and open **Action Flow Editor**.
+3. Select the **On Sort Changed**. Actions added under this will be triggered whenever the user clicks on any column header that has sorting enabled.
+4. For this example, we update the same page state variable (that populates the DataTable) with the sorted data using the following custom function.
+
+
+```dart
+List sortMyData(
+ List listToSort,
+ bool isAsc,
+ int sortColumIndex,
+) {
+ /// MODIFY CODE ONLY BELOW THIS LINE
+
+ // Sort by 'name' for 0, 'age' for 1, 'position' for 2 in code.
+ switch (sortColumIndex) {
+ case 0:
+ listToSort.sort((a, b) => a.name.compareTo(b.name));
+ break;
+ case 1:
+ listToSort.sort((a, b) => a.age.compareTo(b.age));
+ break;
+ case 2:
+ listToSort.sort((a, b) => a.position.compareTo(b.position));
+ break;
+ default:
+ break;
+ }
+ if (!isAsc) {
+ listToSort = listToSort.reversed.toList();
+ }
+ return listToSort;
+
+ /// MODIFY CODE ONLY ABOVE THIS LINE
+}
+```
+
+
+
+
+
+
+## Searching
+
+You can add search functionality to the DataTable widget using our Simple Search feature. However, for this specific widget, instead of using a [Conditional Builder](../../../../ff-concepts/layout/responsive-widgets/conditional-builder-widget.md) widget, you can directly utilize the [Conditional Value](../../../../resources/control-flow/functions/conditional-logic.md#conditional-value-ifthenelse) to determine which result to display based on the `IsShowFullList` variable.
+
+
+
+## Selecting rows
+
+You might want to allow users to select one or more of its rows for tasks like editing, deleting, or performing specific actions on the selected data. For example, preparing a list of promoted employees from the main employee listing.
+
+
+
+
+
+
+To achieve this, create a page state variable to store the selected list. Upon button click, update this variable with the chosen selections from the DataTable. **Note that** the DataTable provides a list of selected row indices; you'll need a [custom function](../../../../ff-concepts/adding-customization/cloud-functions.md) to retrieve the actual rows corresponding to these indices.
+
+Here are the exact steps:
+
+1. First, create a [page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state) variable that will hold the list of selected rows.
+2. Select the **DataTable**, move to the **Properties Panel > Paginated Data Table Properties >** turn on the **Selectable** toggle.
+3. On button click, [update the page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#update-page-state-action) variable with the selected rows. While adding this action, use the following custom function to retrieve the selected items based on the indices. You can get the list of selected rows indices via **Widget State > DataTable Selected Rows**.
+4. Optionally, you could pass this variable to a new page to display the selection.
+
+Custom function:
+
+```dart
+List findPromotedEmps(
+ List allEmps,
+ List selecteEmpsIndex,
+) {
+ // MODIFY CODE ONLY BELOW THIS LINE
+ // return allEmps based on selecteEmpsIndex
+ List promotedEmps = [];
+ for (int i = 0; i < selecteEmpsIndex.length; i++) {
+ int index = selecteEmpsIndex[i];
+ if (index >= 0 && index < allEmps.length) {
+ EmployeesRecord emp = allEmps[index];
+ promotedEmps.add(emp);
+ }
+ }
+ return promotedEmps;
+ /// MODIFY CODE ONLY ABOVE THIS LINE
+ }
+```
+
+
+
+
+
+
+## Get notified on page changed
+
+You might want to get a callback whenever a user taps on the next page of the DataTable. For example, to make an API call to retrieve the data for the next page.
+
+
+
+
+
+
+To do so:
+
+1. Select the **DataTable** widget.
+2. Select **Actions** from the Properties panel and open **Action Flow Editor**.
+3. Select **On Page Changed**. This callback gives you the **Current Row Index**, which is the index of the first row of a new page. For example, if you have 25 items (0-24) on the current page, the **Current Row Index** value will be 25. This is helpful in APIs that fetch a fixed set of data by specifying a starting position ([offset](https://developer.box.com/guides/api-calls/pagination/offset-based/)).
+4. Now, add an action to call the paginated API (that returns the result in chunks). See [how to add the paginated API](../../../../resources/control-flow/backend-logic/api/rest-api.md#query-parameters) call by adding query parameters. For this example, we use this API: https://reqres.in/api/users?per_page=7&page=1. **Note**: this API uses page-based rather than offset-based pagination, requiring manual adjustment of the page variable.
+5. On the success of the API call, you can add an action to append the new data in the current list. For this, you can add the following custom function to add new results to existing data.
+
+```dart
+List addAlldatatoList(
+ List currentUsersList,
+ List newUsersList,
+) {
+ /// MODIFY CODE ONLY BELOW THIS LINE
+
+ // add all newUsersList to currentUsersList
+ currentUsersList.addAll(newUsersList);
+ return currentUsersList;
+
+ /// MODIFY CODE ONLY ABOVE THIS LINE
+}
+```
+
+
+
+
+
+
+## Get notified on rows per page changed
+
+Sometimes, you might want to get a callback when a user changes the number of rows to display on a page. This is helpful for dynamically adjusting data fetch requests based on user preferences.
+
+This is how you do it:
+
+1. Select the **DataTable** widget.
+2. Select **Actions** from the **Properties panel** and open **Action Flow Editor**.
+3. Select **On Rows Per Page Changed**. Any actions added under this will be triggered when the number of displayed rows is changed.
+4. Now, you can add any action here.
+
+
+
+## Customizing
+
+You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
+
+### Configure paginated DataTable
+
+To configure the paginated DataTable, move to the **Properties Panel > Paginated Data Table Properties** and then:
+
+- To hide the pagination, turn on the **Hide Paginator** toggle.
+- To display buttons to navigate to the first and last page of the DataTable, turn on the **Show First And Last Buttons**.
+- To have a normal DataTable without pagination, turn off the **Paginated** toggle.
+
+
+
+
+
+
+
+:::info
+Typically, setting the size explicitly isn't necessary for a DataTable, as it's designed to showcase large datasets and should utilize all available space. However, to enable horizontal scrolling in the DataTable (when content exceeds screen width), you must specify the **Min Width**.
+:::
+
+
+
+
+
+
+### Adjust row and column spacing
+
+To modify the row and column spacing, move to the **Properties Panel > Layout Properties** and then tweak the following properties:
+
+- **Header Row Height**: This changes the height of the header.
+- **Data Row Height**: This changes the height of all the rows.
+- **Column Spacing**: This changes the distance between columns.
+
+
+
+
+
+
+### Customize DataTable color
+
+To modify the DataTable color, navigate to the **Properties Panel > Style Properties**, where you can set colors for various elements:
+
+- **Header Row Color**: This changes the background color of the header row.
+- **Row Color**: This sets the background color for all rows.
+- **Alternate Row Color**: This allows for a different background color for alternate rows.
+- **Sort Icon Color**: This alters the color of the sort icon used in sortable columns.
+
+
+
+
+
+
+### Adjust border radius
+
+To add the rounded corner to the DataTable, navigate to the **Properties Panel > Style Properties > Border Radius** and then:
+
+1. Enter values for TL (Top left), TR (top right), BL (bottom left), and BR (bottom right).
+2. To apply the same radius on all sides, switch to the **Uniform Radius** option. You can then adjust the radius by either moving the slider or entering the desired value directly.
+
+
+
+### Add dividers
+
+To add horizontal and vertical dividers inside the DataTable, navigate to the **Properties Panel > Style Properties >** turn on the **Horizontal** and **Vertical Dividers**.
+
+After enabling, you can also change its **Color** and **Thickness**.
+
+
+
+### Customize checkbox colors
+
+When rows are selectable, you can customize the appearance of the checkbox by adjusting the following color properties:
+
+- **Selected Fill Color**: Sets the background color of the checkbox when it is selected.
+- **Unselected Fill Color**: Sets the background color of the checkbox when it is not selected.
+- **Unselected Border Color**: Changes the border color of the checkbox when it is not selected.
+- **Selected Border Color**: Changes the border color of the checkbox when it is selected.
+- **Check Color**: Alters the color of the checkbox mark itself when selected, providing visual feedback to users about their selection status.
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/getting-started.md b/docs/resources/ui-building-blocks/components/built-in-components/getting-started.md
deleted file mode 100644
index 6b351fc9..00000000
--- a/docs/resources/ui-building-blocks/components/built-in-components/getting-started.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Getting Started
----
-
-# Built-in Components
-
-Built-in components in FlutterFlow are predefined elements designed for various use cases, such as
-map functionalities, layouts, and more. These ready-to-use components help streamline development,
-allowing you to implement complex features quickly and efficiently.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/add-dividers.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/add-dividers.avif
new file mode 100644
index 00000000..f453eb38
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/add-dividers.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/adjust-row-border.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/adjust-row-border.avif
new file mode 100644
index 00000000..3a23d343
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/adjust-row-border.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-2.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-2.avif
new file mode 100644
index 00000000..2dd52cb5
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-2.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-calendar.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-calendar.avif
new file mode 100644
index 00000000..94744e20
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-calendar.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable.avif
new file mode 100644
index 00000000..bc39d0c2
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variables.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variables.avif
new file mode 100644
index 00000000..671d16e4
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variables.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/bar-collection-to-document.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/bar-collection-to-document.avif
new file mode 100644
index 00000000..21acd093
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/bar-collection-to-document.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/calendar-prepare-data.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/calendar-prepare-data.avif
new file mode 100644
index 00000000..885688e0
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/calendar-prepare-data.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-with-axis-bound.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-with-axis-bound.avif
new file mode 100644
index 00000000..8f0d0d10
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-with-axis-bound.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-without-axis-bound.png b/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-without-axis-bound.png
new file mode 100644
index 00000000..2508b917
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-without-axis-bound.png differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/collection-to-document.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/collection-to-document.avif
new file mode 100644
index 00000000..d3fe2591
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/collection-to-document.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/customize-unselected-choice.png b/docs/resources/ui-building-blocks/components/built-in-components/imgs/customize-unselected-choice.png
new file mode 100644
index 00000000..7322a127
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/customize-unselected-choice.png differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/data-table-header.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/data-table-header.avif
new file mode 100644
index 00000000..8e3d32f6
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/data-table-header.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data-to-chart.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data-to-chart.avif
new file mode 100644
index 00000000..c01799c4
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data-to-chart.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data.avif
new file mode 100644
index 00000000..a673de09
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif
new file mode 100644
index 00000000..552ae1cf
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/legend.webp b/docs/resources/ui-building-blocks/components/built-in-components/imgs/legend.webp
new file mode 100644
index 00000000..e64eb5f4
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/legend.webp differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/loopcard.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/loopcard.avif
new file mode 100644
index 00000000..c2988597
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/loopcard.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/numbers-to-chart.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/numbers-to-chart.avif
new file mode 100644
index 00000000..172f4415
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/numbers-to-chart.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/paginated-data-table-fi.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/paginated-data-table-fi.avif
new file mode 100644
index 00000000..90004cc2
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/paginated-data-table-fi.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable-2.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable-2.avif
new file mode 100644
index 00000000..b3dcb31c
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable-2.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable.avif
new file mode 100644
index 00000000..33c7c766
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-collection-document.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-collection-document.avif
new file mode 100644
index 00000000..5da8976d
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-collection-document.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-firestored-data.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-firestored-data.avif
new file mode 100644
index 00000000..b94a6849
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-firestored-data.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-single-value.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-single-value.avif
new file mode 100644
index 00000000..0f7d06ff
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-single-value.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/searching-through-table.avif b/docs/resources/ui-building-blocks/components/built-in-components/imgs/searching-through-table.avif
new file mode 100644
index 00000000..0a01e346
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/searching-through-table.avif differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-selected-date.png b/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-selected-date.png
new file mode 100644
index 00000000..d66ce946
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-selected-date.png differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-unselected-date.png b/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-unselected-date.png
new file mode 100644
index 00000000..48699393
Binary files /dev/null and b/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-unselected-date.png differ
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/pincode.md b/docs/resources/ui-building-blocks/components/built-in-components/pincode.md
index 6fe245ae..460b3c92 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/pincode.md
+++ b/docs/resources/ui-building-blocks/components/built-in-components/pincode.md
@@ -13,7 +13,7 @@ The PinCode widget allows you to enter the PIN or OTP. You could use this widget
To add a PinCode widget:
-1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette) and locate the **PinCode** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **PinCode** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
2. To increase the pin length (number of values users can enter), move to the properties panel, see the **Pin Length** property, and enter the value. **Note**: You can only set this value up to 8.
3. If you are using this widget to get a secret PIN from users, you can obscure it with a special character. To do so, enable the **Obscure Text** toggle and select the **Obscuring Character** among the *,-,?, and •.
4. You can also enable/disable the **Hint Text** toggle and select the **Hint Character** displayed when you haven't entered anything.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/progressbar.md b/docs/resources/ui-building-blocks/components/built-in-components/progressbar.md
new file mode 100644
index 00000000..952ab0e9
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/progressbar.md
@@ -0,0 +1,272 @@
+---
+slug: progressbar
+title: ProgressBar
+tags: []
+description: Learn how to add ProgressBar widget in your FlutterFlow project.
+---
+
+# ProgressBar
+The ProgressBar widget is used to represent the progress of any task. You can use the ProgressBar widget to build a UI that shows the downloading or uploading of files, sales this week, hours spent, overall score, etc.
+
+## Adding ProgressBar
+
+Here's how you can add the ProgressBar widget to your project:
+
+1. Add the **ProgressBar** widget by dragging it from the **Base Elements** tab or directly from the widget tree and align it in the center.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Progress Bar Shape** dropdown and set it to either **Circular** or **Linear**.
+ - **Circular**: The ProgressBar is displayed in a Circle shape. This is the default shape set to the ProgressBar.
+ - **Linear**: The ProgressBar is displayed in a rectangular shape and laid out horizontally on the screen.
+4. To set the progress, find the **Progress Value** input box and enter the value between 0 and 1.0. For example, a value of 0.3 will fill 30% of the portion on the ProgressBar.
+5. To change the progress text (displayed in the center), scroll down to the **Text** section, find the Text property, and enter the value.
+
+
+
+
+
+
+
+## Customizing circular progress bar
+
+The Properties Panel can be used to customize the appearance and behavior of the Circular Progress Bar.
+
+### Changing size
+
+You may want to change the default size of the Circular ProgressBar to match your design. You can do so using the *Diameter* property.
+
+To change the size of the Circular progress bar:
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Diameter** property. Now, there are two ways to change the size:
+ - To set to an **exact size,** select **PX** and enter the desired values.
+ - To set the size as a **% of the screen size**, select **%** and enter the desired value.
+
+
+
+
+
+
+### Changing thickness
+
+Changing the thickness property allows you to change the size of the progress bar belt.
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Thickness** property and enter the value.
+
+
+
+
+
+
+### Changing start angle
+
+By default, the progress bar starts filling the progress from the top-center position (i.e., 0 degree). However, you can set it to start the progress bar from a specific angle using the *Start Angle* property.
+
+To change the start angle:
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Start Angle (degree)** property and enter the value in degree. For example, entering a value of 90 fills the progress bar from the right. Whereas the value of 180 fills the progress bar from the bottom.
+
+
+
+
+
+
+## Customizing linear progress bar
+
+The Properties Panel can be used to customize the appearance and behavior of the Linear Progress Bar.
+
+### Changing size
+
+You can change the default size using the *Width* property.
+
+To change the size of the Linear Progress Bar:
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Width** property. Now, there are two ways to change the size:
+ - To set to an **exact size,** select **PX** and enter the desired values.
+ - To set the size as a **% of the screen size**, select **%** and enter the desired value.
+
+
+
+
+
+
+### Changing thickness
+
+Changing the thickness property allows you to change the height of the progress bar.
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **Thickness** property and enter the value.
+
+
+
+
+
+
+### Changing end radius
+
+By default, the progress bar appears in a rectangular shape. However, you can make it rounded rectangular using the *End Radius* property.
+
+To change the end radius:
+
+1. Select **ProgressBar** from the widget tree or the canvas area.
+2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Progress Bar Properties** section.
+3. Find the **End Radius** property and enter the value.
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/swipeablestack.md b/docs/resources/ui-building-blocks/components/built-in-components/swipeablestack.md
new file mode 100644
index 00000000..1e946304
--- /dev/null
+++ b/docs/resources/ui-building-blocks/components/built-in-components/swipeablestack.md
@@ -0,0 +1,299 @@
+---
+slug: swipeable-stack
+title: SwipeableStack
+tags: []
+description: Learn how to add SwipeableStack widget in your FlutterFlow project.
+---
+
+# SwipeableStack
+
+The SwipeableStack is a widget designed to stack cards or content layers that users can swipe in any direction. It is commonly used in dating apps like Tinder for profile browsing.
+
+
+
+
+
+
+## Adding SwipeableStack widget
+
+To add a Stack widget:
+
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **SwipeableStack** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+2. By default, it adds four cards and is represented as **SwipeableStack Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the card you want to see.
+3. To add a new card, move to the **Properties Panel > Active Page >** click **+ Add Page**.
+4. To delete any card, select the **SwipeableStack Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard.
+5. By default, SwipeableStack Page contains an Image widget; however, you can customize it as per your requirement. For example, if you want to create a Tinder like user experience, you could wrap (`⌘` + B) the default image widget inside the Stack widget and then add some more widgets.
+
+
+
+
+
+
+
+## Swipe card on the button press
+
+You might want to allow users to swipe the cards with a button press—for instance, swiping a card left through an 'unlike' or 'reject' button, and right with a 'like' or 'accept' button.
+
+
+
+
+
+
+Here's how you can swipe the card with a button press:
+
+1. First add the [SwipeableStackwidget](#adding-swipeablestack-widget).
+2. Add a couple of buttons inside.
+3. Now, [add the Control SwipeableStack action](#control-swipeable-stack-action).
+
+## Get notified on swipe
+
+You might want to get a callback when the child widget (e.g., card) gets swiped and then add further actions. For example, updating the item (like or unlike flag) in the backend based on the swipe type (left or right).
+
+Here is how you can get a callback when the child widgets get swiped:
+
+1. Select the **SwipeableStack** widget.
+2. Select **Actions** from the Properties panel and open **Action Flow Editor**.
+3. Select the swipe type (among the **OnWidgetSwipe, OnLeftSwipe, OnRightSwipe, OnUpSwipe, On Down Swipe**) on which you would like to get a callback. If the swipe direction is not important to you, select **On Widget Swipe**.
+4. Now you can add any action that will be triggered upon receiving the selected callback—for example, showing the Snackbar message on swipe.
+
+
+
+
+
+
+
+## Customizing
+
+You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
+
+### Loop cards
+
+To loop the cards in SwipeableStack, move to the **Properties Panel > SwipeableStack Properties >** turn on the **Loop** toggle.
+
+
+
+### Customize card display count and scale
+
+You can adjust how many cards are visible in the stack at one time and how they are scaled. This customization enhances the UX by letting you create a more engaging and visually appealing card stack, where the depth and hierarchy of cards can be easily perceived by users.
+
+To do so, move to the **Properties Panel > SwipeableStack Properties >** enter the value in **Card Display Count** and **Next Card Scale**. For *Next Card Scale,* experiment with values ranging from 0.9 to 0.99 to achieve the desired visual effect.
+
+
+
+
+
+
+### Change swipe threshold
+
+A "threshold" typically refers to the sensitivity of swipe gestures. It determines how much a user needs to swipe a card for it to be considered a complete swipe action. It accepts value between 0 and 1; the threshold set closer to 1 requires the user to swipe or drag the card further across the screen to trigger a swipe action.
+
+To do so, move to the **Properties Panel > SwipeableStack Properties >** enter the value in **Swipe Threshold** property.
+
+
+
+
+
+
+### Set card swiping angle
+
+You can control the tilt or rotation effect of cards as they are swiped. The *Max Angle* property allows you to set the maximum rotation angle a card can reach during a swipe gesture.
+
+To do so, move to the **Properties Panel > SwipeableStack Properties >** enter the value (0-360) in **Max Angle** property.
+
+
+
+
+
+
+### Change back card offset
+
+You can control how the subsequent cards are visually offset relative to the top card, creating a layered effect. This enhances the visual depth and appeal of the card stack within the app.
+
+To change the offset of the back cards move to the **Properties Panel > SwipeableStack Properties > Back Card Offset >** enter the values in **Horizontal** and **Vertical** boxes.
+
+
+
+
+
+
+---
+## Control Swipeable Stack [Action]
+
+Using this action, you can swipe the widgets inside the SwipeableStack widget. For example, swiping the card left or right with the tap of a button.
+
+### Types of card swipe
+
+There are the following types of card swipes you can add:
+
+- **Trigger Left Swipe**: Moves the current card from right to left.
+- **Trigger Right Swipe**: Moves the current card from left to right.
+- **Trigger Up Swipe**: Moves the current card upwards from bottom to top.
+- **Trigger Down Swipe**: Moves the current card downwards from top to bottom.
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/overview.md b/docs/resources/ui-building-blocks/components/overview.md
index 6a3e71d4..5832dd08 100644
--- a/docs/resources/ui-building-blocks/components/overview.md
+++ b/docs/resources/ui-building-blocks/components/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-sidebar_position: 1
+sidebar_position: 0
---
# Components
diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md b/docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md
index 51003b79..9aa4c937 100644
--- a/docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md
+++ b/docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md
@@ -1,7 +1,7 @@
---
title: Creating a Component
sidebar_position: 1
-slug: creating-components.md
+slug: creating-components
keywords: [Custom Components]
tags: [Components]
---
diff --git a/docs/resources/ui-building-blocks/imgs/set-initial-index.png b/docs/resources/ui-building-blocks/imgs/set-initial-index.png
new file mode 100644
index 00000000..09f30ddb
Binary files /dev/null and b/docs/resources/ui-building-blocks/imgs/set-initial-index.png differ
diff --git a/docs/resources/ui-building-blocks/imgs/wrap-items-in-center-widget.png b/docs/resources/ui-building-blocks/imgs/wrap-items-in-center-widget.png
new file mode 100644
index 00000000..8d6986df
Binary files /dev/null and b/docs/resources/ui-building-blocks/imgs/wrap-items-in-center-widget.png differ