> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/explore-all-components.md).

# Explore All Components

{% hint style="success" %}

#### **Build any of these components with your AI assistant**

Avonni ships a hosted MCP server and agent skills that give Claude, Cursor, and GitHub Copilot real knowledge of every component on this page. Describe what you want ("a Kanban of Opportunities grouped by stage", "a Map of my Accounts with a search bar") and get a ready-to-review component.

<a href="/dynamic-components/build-with-ai/overview.md" class="button primary" data-icon="wand-magic-sparkles">Discover Build with AI</a>
{% endhint %}

## Data Display

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Calendar</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-b97b7abba62b20fd8caa294d65e75386584d325e%2FDesign%20sans%20titre%20(74).png?alt=media">Design sans titre (74).png</a></td><td><a href="/dynamic-components/components/calendar.md">Calendar</a></td></tr><tr><td><strong>Carousel</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-6158483fb80d8c3421d01b382c935afae2706dd4%2FDesign%20sans%20titre%20(76).png?alt=media">Design sans titre (76).png</a></td><td><a href="/dynamic-components/components/carousel.md">Carousel</a></td></tr><tr><td><strong>Data LWC Container</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-b9efbd7c20bae83d054e863392345c52dc91fa8f%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(31).png?alt=media">Mastering the Avonni Dynamic Components Package (31).png</a></td><td><a href="/dynamic-components/components/data-lwc-container.md">Data LWC Container</a></td></tr><tr><td><strong>Data Table</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-177f6a93b380f03f819901f002da22ae6e94d51b%2FDesign%20sans%20titre%20(72).png?alt=media">Design sans titre (72).png</a></td><td><a href="/dynamic-components/components/data-table.md">Data Table</a></td></tr><tr><td><strong>Kanban</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-b61620f73c2963373709cff23b7821bdc2293ad2%2FDesign%20sans%20titre%20(73).png?alt=media">Design sans titre (73).png</a></td><td><a href="/dynamic-components/components/kanban.md">Kanban</a></td></tr><tr><td><strong>List</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-a4a76fc2874d3161aaf6f725e5a594d1c8898306%2FDesign%20sans%20titre%20(75).png?alt=media">Design sans titre (75).png</a></td><td><a href="/dynamic-components/components/list.md">List</a></td></tr><tr><td><strong>Map</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-d08520d6332df9943443b982ea9b56ff8a48c099%2FDesign%20sans%20titre%20(86).png?alt=media">Design sans titre (86).png</a></td><td><a href="/dynamic-components/components/map.md">Map</a></td></tr><tr><td><strong>Pivot Table</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-0cc5536b0efda80a948f430c484d05e0add573e9%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(32).png?alt=media">Mastering the Avonni Dynamic Components Package (32).png</a></td><td><a href="/dynamic-components/components/pivot-table.md">Pivot Table</a></td></tr><tr><td><strong>Relationship Graph</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-ea673bcc8bf7d7f96b73307d9fee863525d9ab47%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(33).png?alt=media">Mastering the Avonni Dynamic Components Package (33).png</a></td><td><a href="/dynamic-components/components/relationship-graph.md">Relationship Graph</a></td></tr><tr><td><strong>Timeline</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-b2e4cfc43c114f8d7c32a2a5b9b6212d7ae736c1%2FDesign%20sans%20titre%20(87).png?alt=media">Design sans titre (87).png</a></td><td><a href="/dynamic-components/components/timeline.md">Timeline</a></td></tr><tr><td><strong>Tree</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-96e1aa4c7268a1ccdb672c67773019da52823e68%2FDesign%20sans%20titre%20(91).png?alt=media">Design sans titre (91).png</a></td><td><a href="/dynamic-components/components/tree.md">Tree</a></td></tr><tr><td><strong>Vertical Navigation</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-437aa50dc877276a28d459f992431f7eef86d930%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(34).png?alt=media">Mastering the Avonni Dynamic Components Package (34).png</a></td><td><a href="/dynamic-components/components/vertical-navigation.md">Vertical Navigation</a></td></tr></tbody></table>

## Presentation

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Alert</strong></td><td></td></tr><tr><td><strong>Audio Player</strong></td><td></td></tr><tr><td><strong>Avatar</strong></td><td></td></tr><tr><td><strong>Avatar Group</strong></td><td></td></tr><tr><td><strong>Badge</strong></td><td></td></tr><tr><td><strong>Barcode</strong></td><td></td></tr><tr><td><strong>Blockquote</strong></td><td></td></tr><tr><td><strong>Chip Container</strong></td><td></td></tr><tr><td><strong>Formatted Address</strong></td><td></td></tr><tr><td><strong>Formatted Name</strong></td><td></td></tr><tr><td><strong>Formatted Value</strong></td><td></td></tr><tr><td><strong>Help Text</strong></td><td></td></tr><tr><td><strong>Icon</strong></td><td></td></tr><tr><td><strong>Illustration</strong></td><td></td></tr><tr><td><strong>Image</strong></td><td></td></tr><tr><td><strong>Image List</strong></td><td></td></tr><tr><td><strong>Loading Spinner</strong></td><td></td></tr><tr><td><strong>Metric</strong></td><td></td></tr><tr><td><strong>PDF Viewer</strong></td><td></td></tr><tr><td><strong>Pill Container</strong></td><td></td></tr><tr><td><strong>Progress Bar</strong></td><td></td></tr><tr><td><strong>Progress Circle</strong></td><td></td></tr><tr><td><strong>Progress Indicator</strong></td><td></td></tr><tr><td><strong>Scoped Notification</strong></td><td></td></tr><tr><td><strong>Separator</strong></td><td></td></tr><tr><td><strong>Status</strong></td><td></td></tr><tr><td><strong>Text</strong></td><td></td></tr><tr><td><strong>Video Player</strong></td><td></td></tr><tr><td><strong>Visual Picker</strong></td><td></td></tr></tbody></table>

## Containers

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Accordion</strong></td><td></td></tr><tr><td><strong>Card</strong></td><td></td></tr><tr><td><strong>Columns</strong></td><td></td></tr><tr><td><strong>Container</strong></td><td></td></tr><tr><td><strong>Header</strong></td><td></td></tr><tr><td><strong>Media Object</strong></td><td></td></tr><tr><td><strong>Navigation Container</strong></td><td></td></tr><tr><td><strong>Profile Card</strong></td><td></td></tr><tr><td><strong>Section</strong></td><td></td></tr><tr><td><strong>Tabbed Container</strong></td><td></td></tr><tr><td><strong>Tabs</strong></td><td></td></tr></tbody></table>

## Text Inputs

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Input Text</strong></td><td></td></tr><tr><td><strong>Text Area</strong></td><td></td></tr><tr><td><strong>Input Email</strong></td><td></td></tr><tr><td><strong>Input Password</strong></td><td></td></tr><tr><td><strong>Input Phone</strong></td><td></td></tr><tr><td><strong>Input Search</strong></td><td></td></tr><tr><td><strong>Input URL</strong></td><td></td></tr></tbody></table>

## Date and Time Inputs

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Date</strong></td><td></td></tr><tr><td><strong>Date Picker</strong></td><td></td></tr><tr><td><strong>Date Range</strong></td><td></td></tr><tr><td><strong>Date Time Picker</strong></td><td></td></tr><tr><td><strong>Input Date</strong></td><td></td></tr><tr><td><strong>Input Datetime</strong></td><td></td></tr><tr><td><strong>Input Time</strong></td><td></td></tr><tr><td><strong>Time Range Picker</strong></td><td></td></tr></tbody></table>

## Number Inputs

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Counter</strong></td><td></td></tr><tr><td><strong>Input Number</strong></td><td></td></tr><tr><td><strong>Range Slider</strong></td><td></td></tr><tr><td><strong>Slider</strong></td><td></td></tr></tbody></table>

## Select Inputs

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Checkbox</strong></td><td></td></tr><tr><td><strong>Checkbox Button</strong></td><td></td></tr><tr><td><strong>Checkbox Group</strong></td><td></td></tr><tr><td><strong>Checkbox Tree</strong></td><td></td></tr><tr><td><strong>Combobox</strong></td><td></td></tr><tr><td><strong>Dual Listbox</strong></td><td></td></tr><tr><td><strong>Input Choice Set</strong></td><td></td></tr><tr><td><strong>Segmented Control</strong></td><td></td></tr><tr><td><strong>Toggle</strong></td><td></td></tr></tbody></table>

## Special Inputs

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Barcode Scanner</strong></td><td><a href="/dynamic-components/components/barcode-scanner.md">Barcode Scanner</a></td><td></td></tr><tr><td><strong>Color Input</strong></td><td><a href="/dynamic-components/components/color-input.md">Color Input</a></td><td></td></tr><tr><td><strong>Document Scanner</strong></td><td><a href="/dynamic-components/components/document-scanner.md">Document Scanner</a></td><td></td></tr><tr><td><strong>Icon Picker</strong></td><td><a href="/dynamic-components/components/icon-picker.md">Icon Picker</a></td><td></td></tr><tr><td><strong>Input Pen (Signature)</strong></td><td><a href="/dynamic-components/components/input-pen-signature.md">Input Pen (Signature)</a></td><td></td></tr><tr><td><strong>Microphone</strong></td><td><a href="/dynamic-components/components/microphone.md">Microphone</a></td><td></td></tr><tr><td><strong>NFC Tag Scanner</strong></td><td><a href="/dynamic-components/components/nfc-tag-scanner.md">NFC Tag Scanner</a></td><td></td></tr><tr><td><strong>Vertical Visual Picker</strong></td><td><a href="/dynamic-components/components/vertical-visual-picker.md">Vertical Visual Picker</a></td><td></td></tr><tr><td><strong>Visual Picker</strong></td><td><a href="/dynamic-components/components/visual-picker-link.md">Visual Picker Link</a></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-87ad1be064c0e5cd894061ef53fbb0eb5f8ef036%2FDesign%20sans%20titre%20-%202025-03-22T085628.118.png?alt=media">Design sans titre - 2025-03-22T085628.118.png</a></td></tr></tbody></table>

## Buttons

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Button</strong></td><td></td></tr><tr><td><strong>Button Group</strong></td><td></td></tr><tr><td><strong>Button Icon</strong></td><td></td></tr><tr><td><strong>Button Menu</strong></td><td></td></tr><tr><td><strong>Button Stateful</strong></td><td></td></tr></tbody></table>

## Charts

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Chart</strong></td><td></td></tr></tbody></table>

## Others

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Dynamic Component</strong></td><td></td></tr><tr><td><strong>Flow</strong></td><td></td></tr><tr><td><strong>LWC Container</strong></td><td></td></tr><tr><td><strong>Record Detail</strong></td><td></td></tr><tr><td><strong>Record Picker</strong></td><td></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/explore-all-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
