> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/angular/widgets.md).
# Widgets
Pre-built widget components that you can integrate with your dashboards or social feeds.
Pages comes with 24 pre-built widget components that you can easily integrate with your dashboards in no time. These can be found in `dashboard/widgets`folder and each widget folder is named after its `@Component`'s `selector.`Widgets are based off [pgcard component](/angular/ui-components/cards.md)
## Importing
Widgets are available throughout all the pre-built dashboards via `dashboard.module.ts`. But if you are planning use them outside you will have to import them as below.
```typescript
// Using ImageWidgetComponent as an example. Same steps apply to other widgets
import { ImageWidgetComponent } from './widgets/image-widget/image-widget.component';
@NgModule({
declarations: [ImageWidgetComponent,...]
})
export class AppModule(){}
```
## bar-tile-widget
Features a stacked bar chart made with `echarts` component:
```http
```
## graph-live-widget
Features a looping vertical slider with stock market updates.
```http
```
## graph-options-widget
Features a line chart with toggle buttons.
```http
```
## graph-tile-flat-widget
Features a line chart with sales stats.
```http
```
## graph-tile-widget
Features a line chart with area filled in.
```http
```
## graph-widget
Features a line chart with multiple series of data.
```http
```
| **Property** | **Description** | **Type** | **Default** |
| ------------ | ------------------------------------------------------------------ | -------- | ----------- |
| `IsAlt` | Toggles three boxes with stock trading highlights and a search bar | boolean | false |
## image-widget
Features a background image and an text overlay.
```http
```
## image-widget-basic
Features a background image and a text overlay. Intended to use for showing minimal content.
```http
```
## plain-live-widget
Features a rotating text
```http
```
## plain-widget
Features quick weather info
```http
```
## progress-tile-flat-widget
Features a large title text and a progress bar
```http
```
## project-progress-widget
Features multiple progress bars in a tab view.
```http
```
## quick-stats-widget
Features quick stats in extra large text and a progress bar.
```http
```
## realtime-widget
Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.
```http
```
## social-image-tile-widget
Shows an image in the style of a social feed post.
```http
```
## social-post-tile-widget
Shows a social post with text and an image.
```http
```
## stacked-bar-widget
Features a [pg-tabset](/angular/ui-components/tabs.md) component with stacked bar charts representing multiple data sources for quick comparison.
```http
```
## stat-tile-widget
This is also another mini widget similar to `quick-stats-widget` and `progress-tile-flat widget`. Sample widget illustrates stock trading stats
```http
```
## table-basic-widget
Features a basic table layout.
```http
```
## table-widget
This is another variation of `table-basic-widget.`
```http
```
## todo-list-widget
Show todo-list items with checkboxes.
```http
```
## weather-widget
Shows weekly weather data together with animated weather icons from [Skycons](https://github.com/darkskyapp/skycons).
```http
```
| **Property** | **Description** | **Type** | **Default** |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `Type` | By default weather widget shows two highlighted columns with weather data to the right in extra large screens. Set this to "compact" to disable them. | string | undefined |
## weekly-sales-widget
This is also another mini widget showing weekly sales data.
```http
```
