> 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

Every Avonni Dynamic Component in one place, grouped by what you need: show records, plan, chart, collect input, guide users, display content and more.

Every component you can drop into a Dynamic Component, grouped by what you want to do on the page. Open a card to see its properties, data sources and interactions.

{% hint style="info" %}
Want to build something step by step? The [Components tutorials](/dynamic-components/tutorials/components.md) walk through real components, one at a time.
{% endhint %}

{% 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 %}

## Show records in tables and lists

Put Salesforce records on a page so users can read, compare, pick and edit them.

<table data-view="cards"><thead><tr><th></th><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>Data Table</strong></td><td>Show open deals, then let users search, filter, edit inline, group and act on the rows.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F6DmwXrE4MGgucp3U0itA%2Fdc-hub-cover-data-table.png?alt=media">dc-hub-cover-data-table.png</a></td><td><a href="/dynamic-components/components/data-table.md">Data Table</a></td></tr><tr><td><strong>Pivot Table</strong></td><td>Summarize pipeline by region and stage with totals, then open the records behind a cell.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCWodVNJWXkB8lPmKr1Eb%2Fdc-hub-cover-pivot-table.png?alt=media">dc-hub-cover-pivot-table.png</a></td><td><a href="/dynamic-components/components/pivot-table.md">Pivot Table</a></td></tr><tr><td><strong>List</strong></td><td>Show records as a list or grid with images, inline actions and drag to reorder.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fl09KTiuFSgAgrgI7DRGZ%2Fdc-hub-cover-list.png?alt=media">dc-hub-cover-list.png</a></td><td><a href="/dynamic-components/components/list.md">List</a></td></tr><tr><td><strong>Tree Grid</strong></td><td>Open a parent record onto its children in an expandable table.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9P5bvRKUBDReMb9JlrPM%2Fdc-hub-cover-tree-grid.png?alt=media">dc-hub-cover-tree-grid.png</a></td><td><a href="/dynamic-components/components/tree-grid.md">Tree Grid</a></td></tr><tr><td><strong>Record Detail</strong></td><td>Show and edit the fields of one record in a clean, sectioned layout.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F2nWavXPpMmkYnWbF017B%2Fdc-hub-cover-record-detail.png?alt=media">dc-hub-cover-record-detail.png</a></td><td><a href="/dynamic-components/components/record-detail.md">Record Detail</a></td></tr><tr><td><strong>Field</strong></td><td>Show a single field from a record, with the right format for its type.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FetpFeoeH1EVOhpKC6xHm%2Fdc-hub-cover-field.png?alt=media">dc-hub-cover-field.png</a></td><td><a href="/dynamic-components/components/field.md">Field</a></td></tr><tr><td><strong>Tree</strong></td><td>Browse hierarchies, such as accounts and their contacts, in an expandable tree.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fj24WTKlCaPFAmGYMMVNZ%2Fdc-hub-cover-tree.png?alt=media">dc-hub-cover-tree.png</a></td><td><a href="/dynamic-components/components/tree.md">Tree</a></td></tr><tr><td><strong>Image List</strong></td><td>Show records as pictures with titles, for a visual catalog or gallery.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FjDG4VNGyLuG95Dor7sth%2Fdc-hub-cover-image-list.png?alt=media">dc-hub-cover-image-list.png</a></td><td><a href="/dynamic-components/components/image-list.md">Image List</a></td></tr><tr><td><strong>Repeater</strong></td><td>Repeat any layout of components once for each record, to build your own cards.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fg1s3cGJTOoXBjajjW9e8%2Fdc-hub-cover-repeater.png?alt=media">dc-hub-cover-repeater.png</a></td><td><a href="/dynamic-components/components/repeater.md">Repeater</a></td></tr></tbody></table>

## Plan on calendars, boards and maps

Lay records out by date, stage or place, and let users move them where they belong.

<table data-view="cards"><thead><tr><th></th><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>Show events in day, week or month views, and create or reschedule them by dragging.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FZVIOBAS65T9cgSpJo0pD%2Fdc-hub-cover-calendar.png?alt=media">dc-hub-cover-calendar.png</a></td><td><a href="/dynamic-components/components/calendar.md">Calendar</a></td></tr><tr><td><strong>Kanban</strong></td><td>Build a pipeline board with column totals and move cards from stage to stage.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FwpoB18nHeWepx8x1rdI5%2Fdc-hub-cover-kanban.png?alt=media">dc-hub-cover-kanban.png</a></td><td><a href="/dynamic-components/components/kanban.md">Kanban</a></td></tr><tr><td><strong>Map</strong></td><td>Put accounts on a map with pins, search, routes and territories.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F07uYlQxrPwlYud0VTLGU%2Fdc-hub-cover-map.png?alt=media">dc-hub-cover-map.png</a></td><td><a href="/dynamic-components/components/map.md">Map</a></td></tr><tr><td><strong>Timeline</strong></td><td>Turn a list of events or tasks into a vertical or horizontal timeline.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FstDFCYQd1DB4j10DWNGa%2Fdc-hub-cover-timeline.png?alt=media">dc-hub-cover-timeline.png</a></td><td><a href="/dynamic-components/components/timeline.md">Timeline</a></td></tr><tr><td><strong>Carousel</strong></td><td>Show products or highlights as a slideshow of cards with autoplay.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FiUzPIRUgsdVmIKqIINkH%2Fdc-hub-cover-carousel.png?alt=media">dc-hub-cover-carousel.png</a></td><td><a href="/dynamic-components/components/carousel.md">Carousel</a></td></tr></tbody></table>

## Charts and key numbers

Turn your data into pictures and numbers that managers read at a glance.

<table data-view="cards"><thead><tr><th></th><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>Chart</strong></td><td>Turn your data into bar, line, pie, gauge and other interactive charts.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FHqzdXDUFEGfVFxTqWcPZ%2Fdc-hub-cover-chart.png?alt=media">dc-hub-cover-chart.png</a></td><td><a href="/dynamic-components/components/chart.md">Chart</a></td></tr><tr><td><strong>Metric</strong></td><td>Show a key number, such as a KPI, with a label that gives it context.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpDedA7WDXZNlNhSiNYbW%2Fdc-hub-cover-metric.png?alt=media">dc-hub-cover-metric.png</a></td><td><a href="/dynamic-components/components/metric.md">Metric</a></td></tr><tr><td><strong>Relationship Graph</strong></td><td>Draw how accounts, contacts and opportunities connect in an interactive graph.</td><td></td><td><a href="/dynamic-components/components/relationship-graph.md">Relationship Graph</a></td></tr></tbody></table>

## Collect input

Ask for text, numbers and simple answers, and use them in the rest of the component.

<table data-view="cards"><thead><tr><th></th><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>Input Text</strong></td><td>Capture a single line of text, with length limits and a required state.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FiMEqMoyAgoYPgs1kAMUv%2Fdc-hub-cover-input-text.png?alt=media">dc-hub-cover-input-text.png</a></td><td><a href="/dynamic-components/components/input-text.md">Input Text</a></td></tr><tr><td><strong>Text Area</strong></td><td>Capture longer notes or comments over several lines.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FVVgHhMSiXrwFUaT3rCNJ%2Fdc-hub-cover-text-area.png?alt=media">dc-hub-cover-text-area.png</a></td><td><a href="/dynamic-components/components/text-area.md">Text Area</a></td></tr><tr><td><strong>Input Email</strong></td><td>Collect an email address and check its format as the user types.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FYQ1DmFFOPbvdb22iZUDn%2Fdc-hub-cover-input-email.png?alt=media">dc-hub-cover-input-email.png</a></td><td><a href="/dynamic-components/components/input-email.md">Input Email</a></td></tr><tr><td><strong>Input Password</strong></td><td>Collect a password or secret with the characters masked.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FvtP2q0J5bJ7R1ekvqB0k%2Fdc-hub-cover-input-password.png?alt=media">dc-hub-cover-input-password.png</a></td><td><a href="/dynamic-components/components/input-password.md">Input Password</a></td></tr><tr><td><strong>Input Phone</strong></td><td>Collect a phone number and check its format.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F8UUifePmo7caViFlD3y8%2Fdc-hub-cover-input-tel.png?alt=media">dc-hub-cover-input-tel.png</a></td><td><a href="/dynamic-components/components/input-tel.md">Input Phone</a></td></tr><tr><td><strong>Input URL</strong></td><td>Collect a web address and check that it is valid.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FGlDKygocvtxgxDn626RD%2Fdc-hub-cover-input-url.png?alt=media">dc-hub-cover-input-url.png</a></td><td><a href="/dynamic-components/components/input-url.md">Input URL</a></td></tr><tr><td><strong>Input Search</strong></td><td>Add a search box that filters a table, list or map on the same page.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FVEXxhFYTzlO1w48QZ2f2%2Fdc-hub-cover-input-search.png?alt=media">dc-hub-cover-input-search.png</a></td><td><a href="/dynamic-components/components/input-search.md">Input Search</a></td></tr><tr><td><strong>Input Number</strong></td><td>Capture a number, currency or percentage with limits and steps.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FheSj0glJuiGMmZzhHCeu%2Fdc-hub-cover-input-number.png?alt=media">dc-hub-cover-input-number.png</a></td><td><a href="/dynamic-components/components/input-number.md">Input Number</a></td></tr><tr><td><strong>Counter</strong></td><td>Let users set a quantity with plus and minus buttons.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F63SA3ByY07a73Kzy7nWM%2Fdc-hub-cover-counter.png?alt=media">dc-hub-cover-counter.png</a></td><td><a href="/dynamic-components/components/counter.md">Counter</a></td></tr><tr><td><strong>Range Slider</strong></td><td>Let users pick a minimum and a maximum, such as a price range.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FqzKBjz6xOUguOdwa6Hcf%2Fdc-hub-cover-range-slider.png?alt=media">dc-hub-cover-range-slider.png</a></td><td><a href="/dynamic-components/components/range-slider.md">Range Slider</a></td></tr><tr><td><strong>Rating</strong></td><td>Collect feedback with star ratings.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FgU4xnEPdUIeAL1kSmcxe%2Fdc-hub-cover-rating.png?alt=media">dc-hub-cover-rating.png</a></td><td><a href="/dynamic-components/components/rating.md">Rating</a></td></tr><tr><td><strong>Checkbox</strong></td><td>Ask a yes or no question, such as accepting terms or marking a task done.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FiNdOrglfG7CnlJzIFl1Z%2Fdc-hub-cover-checkbox.png?alt=media">dc-hub-cover-checkbox.png</a></td><td><a href="/dynamic-components/components/checkbox.md">Checkbox</a></td></tr><tr><td><strong>Checkbox Button</strong></td><td>Offer a yes or no choice as a button that stays highlighted when selected.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F8UpR34aJ66db034Qp6iL%2Fdc-hub-cover-checkbox-button.png?alt=media">dc-hub-cover-checkbox-button.png</a></td><td><a href="/dynamic-components/components/checkbox-button.md">Checkbox Button</a></td></tr><tr><td><strong>Checkbox Group</strong></td><td>Let users tick several options from a short list.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9emhtVj4IWgb8QORYilg%2Fdc-hub-cover-checkbox-group.png?alt=media">dc-hub-cover-checkbox-group.png</a></td><td><a href="/dynamic-components/components/checkbox-group.md">Checkbox Group</a></td></tr><tr><td><strong>Toggle</strong></td><td>Switch a setting on or off, such as an active status or a reminder.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FtagHVwtPgfVI4NfI4hI4%2Fdc-hub-cover-toggle.png?alt=media">dc-hub-cover-toggle.png</a></td><td><a href="/dynamic-components/components/toggle.md">Toggle</a></td></tr><tr><td><strong>Segmented Control</strong></td><td>Pick one option from a short row of connected buttons, such as a view mode.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F0vEVJIUHrdCt0OShGUEj%2Fdc-hub-cover-segmented-control.png?alt=media">dc-hub-cover-segmented-control.png</a></td><td><a href="/dynamic-components/components/segmented-control.md">Segmented Control</a></td></tr></tbody></table>

## Pick dates and times

Let users choose when something happens, from a single day to a time slot.

<table data-view="cards"><thead><tr><th></th><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>Date Picker</strong></td><td>Let users pick a date on a calendar, with important dates marked.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F6ZLA9psfDKhLoSGBipfQ%2Fdc-hub-cover-date-picker.png?alt=media">dc-hub-cover-date-picker.png</a></td><td><a href="/dynamic-components/components/date-picker.md">Date Picker</a></td></tr><tr><td><strong>Date Range</strong></td><td>Let users pick a start and end date together, for filters and bookings.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F66rgS920IkAWgb7MGDq2%2Fdc-hub-cover-date-range.png?alt=media">dc-hub-cover-date-range.png</a></td><td><a href="/dynamic-components/components/date-range.md">Date Range</a></td></tr><tr><td><strong>Date Time Picker</strong></td><td>Offer free appointment slots and store the chosen start and end times.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FnZy7fZ0aQlusgMZELwOh%2Fdc-hub-cover-date-time-picker.png?alt=media">dc-hub-cover-date-time-picker.png</a></td><td><a href="/dynamic-components/components/date-time-picker.md">Date Time Picker</a></td></tr><tr><td><strong>Input Date</strong></td><td>Capture a single date in a compact field.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCrs3HWlBV9kfijC6QsRp%2Fdc-hub-cover-input-date.png?alt=media">dc-hub-cover-input-date.png</a></td><td><a href="/dynamic-components/components/input-date.md">Input Date</a></td></tr><tr><td><strong>Input Datetime</strong></td><td>Capture a date and a time together in one field.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fxw2VlZFjZARl2EbLgwsr%2Fdc-hub-cover-input-datetime.png?alt=media">dc-hub-cover-input-datetime.png</a></td><td><a href="/dynamic-components/components/input-datetime.md">Input Datetime</a></td></tr><tr><td><strong>Input Time</strong></td><td>Capture a time of day, such as an arrival or a shift start.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FSSxxfEvaiHDg633rTbwM%2Fdc-hub-cover-input-time.png?alt=media">dc-hub-cover-input-time.png</a></td><td><a href="/dynamic-components/components/input-time.md">Input Time</a></td></tr><tr><td><strong>Time Range Picker</strong></td><td>Let users pick a start and end time, such as opening hours.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FYrkuRrE9d8OLuk7OCQdQ%2Fdc-hub-cover-time-range.png?alt=media">dc-hub-cover-time-range.png</a></td><td><a href="/dynamic-components/components/time-range.md">Time Range Picker</a></td></tr></tbody></table>

## Choose from options

Offer a choice as a list, a set of cards or a record lookup.

<table data-view="cards"><thead><tr><th></th><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>Combobox</strong></td><td>Let users pick one or several options from a list, a picklist or a query, with search.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FqtclaeFgXMsJsnQViW8I%2Fdc-hub-cover-combobox.png?alt=media">dc-hub-cover-combobox.png</a></td><td><a href="/dynamic-components/components/combobox.md">Combobox</a></td></tr><tr><td><strong>Dual Listbox</strong></td><td>Let users move items between two lists to build a selection.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fe0ye4kWaM9nwQGVrOxgn%2Fdc-hub-cover-dual-listbox.png?alt=media">dc-hub-cover-dual-listbox.png</a></td><td><a href="/dynamic-components/components/dual-listbox.md">Dual Listbox</a></td></tr><tr><td><strong>Visual Picker</strong></td><td>Turn a choice, such as a support plan, into cards with images and tags.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FWdllfpRzJIhPOBeDA4QL%2Fdc-hub-cover-visual-picker.png?alt=media">dc-hub-cover-visual-picker.png</a></td><td><a href="/dynamic-components/components/visual-picker.md">Visual Picker</a></td></tr><tr><td><strong>Vertical Visual Picker</strong></td><td>Show choices as a vertical list of rich rows with avatars and images.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FTEfBXo4xxq5ZzGIZUGUg%2Fdc-hub-cover-vertical-visual-picker.png?alt=media">dc-hub-cover-vertical-visual-picker.png</a></td><td><a href="/dynamic-components/components/vertical-visual-picker.md">Vertical Visual Picker</a></td></tr><tr><td><strong>Record Picker</strong></td><td>Let users search and pick a Salesforce record, such as an account or a contact.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FBJQ5y2ahgPX6DnwuUl0q%2Fdc-hub-cover-record-picker.png?alt=media">dc-hub-cover-record-picker.png</a></td><td><a href="/dynamic-components/components/record-picker.md">Record Picker</a></td></tr><tr><td><strong>Color Input</strong></td><td>Let users choose a color from a palette or a custom value.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Foa5DH9mnJHudKlUE4kbD%2Fdc-hub-cover-color-input.png?alt=media">dc-hub-cover-color-input.png</a></td><td><a href="/dynamic-components/components/color-input.md">Color Input</a></td></tr><tr><td><strong>Icon Picker</strong></td><td>Let users search and pick an icon from the Lightning Design System library.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FU7MGlORwnqWbmRiGB4MX%2Fdc-hub-cover-icon-picker.png?alt=media">dc-hub-cover-icon-picker.png</a></td><td><a href="/dynamic-components/components/icon-picker.md">Icon Picker</a></td></tr></tbody></table>

## Capture files, signatures and device input

Collect files, signatures, photos, scans and voice notes. The scanners and camera work on the Salesforce mobile app.

<table data-view="cards"><thead><tr><th></th><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>Input Pen (Signature)</strong></td><td>Capture a signature or a drawing on a touchscreen and save it as a file.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FtqblqBP4DGL57Ed2v4ua%2Fdc-hub-cover-input-pen-signature.png?alt=media">dc-hub-cover-input-pen-signature.png</a></td><td><a href="/dynamic-components/components/input-pen-signature.md">Input Pen (Signature)</a></td></tr><tr><td><strong>File Upload</strong></td><td>Let users attach files to a record, with a drop zone and a file list.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F40IRHJnYHOZJ7SOldh37%2Fdc-hub-cover-file-upload.png?alt=media">dc-hub-cover-file-upload.png</a></td><td><a href="/dynamic-components/components/file-upload.md">File Upload</a></td></tr><tr><td><strong>Input File</strong></td><td>Collect one or several files in a standard file field.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FM6zEjkI4Dm8NDmfqcGSX%2Fdc-hub-cover-input-file.png?alt=media">dc-hub-cover-input-file.png</a></td><td><a href="/dynamic-components/components/input-file.md">Input File</a></td></tr><tr><td><strong>Microphone</strong></td><td>Record a voice note from the device and save it with the record.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F2Bhgb0ZO4wJkTK1UmTZ6%2Fdc-hub-cover-microphone.png?alt=media">dc-hub-cover-microphone.png</a></td><td><a href="/dynamic-components/components/microphone.md">Microphone</a></td></tr><tr><td><strong>Camera</strong></td><td>Take a photo with the device camera and attach it to a record.</td><td></td><td><a href="/dynamic-components/components/camera.md">Camera</a></td></tr><tr><td><strong>Document Scanner</strong></td><td>Scan a paper document with the mobile camera and save it as a file.</td><td></td><td><a href="/dynamic-components/components/document-scanner.md">Document Scanner</a></td></tr><tr><td><strong>Barcode Scanner</strong></td><td>Scan a barcode or QR code on mobile and use the value in the component.</td><td></td><td><a href="/dynamic-components/components/barcode-scanner.md">Barcode Scanner</a></td></tr><tr><td><strong>NFC Tag Scanner</strong></td><td>Read an NFC tag on mobile, for example to look up an asset.</td><td></td><td><a href="/dynamic-components/components/nfc-tag-scanner.md">NFC Tag Scanner</a></td></tr></tbody></table>

## Guide the user

Help users find their way: buttons, menus, tabs, headers and steps.

<table data-view="cards"><thead><tr><th></th><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>Button</strong></td><td>Add a button that runs interactions, opens a page, or starts a flow.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FEjQCXIM88bDj1zVnnOf3%2Fdc-hub-cover-button.png?alt=media">dc-hub-cover-button.png</a></td><td><a href="/dynamic-components/components/button.md">Button</a></td></tr><tr><td><strong>Button Group</strong></td><td>Put several related buttons in one group, for filters or view switches.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FS1Tyi1vu2nOkdvNkOlw3%2Fdc-hub-cover-button-group.png?alt=media">dc-hub-cover-button-group.png</a></td><td><a href="/dynamic-components/components/button-group.md">Button Group</a></td></tr><tr><td><strong>Button Icon</strong></td><td>Add a compact icon-only button for a quick action.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fxj79vd3VxgatOa5ltZ6P%2Fdc-hub-cover-button-icon.png?alt=media">dc-hub-cover-button-icon.png</a></td><td><a href="/dynamic-components/components/button-icon.md">Button Icon</a></td></tr><tr><td><strong>Button Menu</strong></td><td>Tuck several related actions into one button that opens a menu.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fjbl47Fg343euvTM2ArA7%2Fdc-hub-cover-button-menu.png?alt=media">dc-hub-cover-button-menu.png</a></td><td><a href="/dynamic-components/components/button-menu.md">Button Menu</a></td></tr><tr><td><strong>Button Stateful</strong></td><td>Add a button that toggles between two states, such as follow and following.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FdxUgdFaTQ71XBm2cAyjA%2Fdc-hub-cover-button-stateful.png?alt=media">dc-hub-cover-button-stateful.png</a></td><td><a href="/dynamic-components/components/button-stateful.md">Button Stateful</a></td></tr><tr><td><strong>Vertical Navigation</strong></td><td>Give users a side menu to move between sections of a page.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F1oXhjCU49vBkZLFgERLN%2Fdc-hub-cover-vertical-navigation.png?alt=media">dc-hub-cover-vertical-navigation.png</a></td><td><a href="/dynamic-components/components/vertical-navigation.md">Vertical Navigation</a></td></tr><tr><td><strong>Navigation Container</strong></td><td>Pair a menu with a content area that changes as users pick an item.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FX9YKeq2ggde8vKKxOqsr%2Fdc-hub-cover-navigation-container.png?alt=media">dc-hub-cover-navigation-container.png</a></td><td><a href="/dynamic-components/components/navigation-container.md">Navigation Container</a></td></tr><tr><td><strong>Tabs</strong></td><td>Split a busy page into tabs so users see one topic at a time.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FP4nlgFdzMZLffXceMo8F%2Fdc-hub-cover-tabs.png?alt=media">dc-hub-cover-tabs.png</a></td><td><a href="/dynamic-components/components/tabs.md">Tabs</a></td></tr><tr><td><strong>Tabbed Container</strong></td><td>Show a different set of components in each tab of one container.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F5JK981HX12hHfJQ1svzU%2Fdc-hub-cover-tabbed-container.png?alt=media">dc-hub-cover-tabbed-container.png</a></td><td><a href="/dynamic-components/components/tabbed-container.md">Tabbed Container</a></td></tr><tr><td><strong>Progress Indicator</strong></td><td>Show where users are in a multi-step process, such as a sales path.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fm26um31a6veCZCPyIUgC%2Fdc-hub-cover-progress-indicator.png?alt=media">dc-hub-cover-progress-indicator.png</a></td><td><a href="/dynamic-components/components/progress-indicator.md">Progress Indicator</a></td></tr><tr><td><strong>Visual Picker Link</strong></td><td>Show a clickable tile with an icon and a progress bar that opens a page.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FWwWK94orEu2XKPi2r30x%2Fdc-hub-cover-visual-picker-link.png?alt=media">dc-hub-cover-visual-picker-link.png</a></td><td><a href="/dynamic-components/components/visual-picker-link.md">Visual Picker Link</a></td></tr><tr><td><strong>Header</strong></td><td>Put a title, subtitle, icon, image and action links at the top of a page.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCve3AMARd9M4S0B6GdAP%2Fdc-hub-cover-header.png?alt=media">dc-hub-cover-header.png</a></td><td><a href="/dynamic-components/components/header.md">Header</a></td></tr></tbody></table>

## Structure the page

Lay components out in sections, columns and cards so the page stays easy to scan.

<table data-view="cards"><thead><tr><th></th><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>Accordion</strong></td><td>Stack collapsible sections so users open only the part they need.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FRfG0aCVDFg6VkliMAni9%2Fdc-hub-cover-accordion.png?alt=media">dc-hub-cover-accordion.png</a></td><td><a href="/dynamic-components/components/accordion.md">Accordion</a></td></tr><tr><td><strong>Expandable Section</strong></td><td>Hide optional fields until the user expands the section.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FPQHCV8c4qpIcZvKkDsnE%2Fdc-hub-cover-section.png?alt=media">dc-hub-cover-section.png</a></td><td><a href="/dynamic-components/components/section.md">Expandable Section</a></td></tr><tr><td><strong>Card</strong></td><td>Group related components under a title in a card with its own actions.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fm5b8X3jyHxaLeZoqDW1U%2Fdc-hub-cover-card.png?alt=media">dc-hub-cover-card.png</a></td><td><a href="/dynamic-components/components/card.md">Card</a></td></tr><tr><td><strong>Columns</strong></td><td>Lay components out in responsive columns that stack on small screens.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FHjbDBvOg9wAUq8q25apV%2Fdc-hub-cover-columns.png?alt=media">dc-hub-cover-columns.png</a></td><td><a href="/dynamic-components/components/columns.md">Columns</a></td></tr><tr><td><strong>Container</strong></td><td>Wrap components in a box to control spacing, borders and background.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCNQRMHVLTgrSsX8Af4Jd%2Fdc-hub-cover-container.png?alt=media">dc-hub-cover-container.png</a></td><td><a href="/dynamic-components/components/container.md">Container</a></td></tr><tr><td><strong>Media Object</strong></td><td>Pair a picture with text, such as a contact photo next to their details.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F6P0eUxTiIx5gbLmjyS6W%2Fdc-hub-cover-media-object.png?alt=media">dc-hub-cover-media-object.png</a></td><td><a href="/dynamic-components/components/media-object.md">Media Object</a></td></tr><tr><td><strong>Profile Card</strong></td><td>Show a person or account as a card with a picture, details and actions.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fx88UW0OtHKWeQoTNTDN4%2Fdc-hub-cover-profile-card.png?alt=media">dc-hub-cover-profile-card.png</a></td><td><a href="/dynamic-components/components/profile-card.md">Profile Card</a></td></tr><tr><td><strong>Separator</strong></td><td>Add a line or a space between sections to make a page easier to scan.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FjGUOJOPGzudRlW2QHTqG%2Fdc-hub-cover-separator.png?alt=media">dc-hub-cover-separator.png</a></td><td><a href="/dynamic-components/components/separator.md">Separator</a></td></tr></tbody></table>

## Inform and react

Tell users what is happening, show progress and status, and present people and values.

<table data-view="cards"><thead><tr><th></th><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>Alert</strong></td><td>Show an important message at the top of a page so users do not miss it.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FIssuvzqWMIrmABeJSXNb%2Fdc-hub-cover-alert.png?alt=media">dc-hub-cover-alert.png</a></td><td><a href="/dynamic-components/components/alert.md">Alert</a></td></tr><tr><td><strong>Scoped Notification</strong></td><td>Show a message inside a section of the page, with an optional action.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FZroRn1IMwsLG1OIg4XiA%2Fdc-hub-cover-scope-notification.png?alt=media">dc-hub-cover-scope-notification.png</a></td><td><a href="/dynamic-components/components/scope-notification.md">Scoped Notification</a></td></tr><tr><td><strong>Progress Bar</strong></td><td>Show how far a task has got as a percentage bar.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbJvH4YaOji7RqZc7WNNT%2Fdc-hub-cover-progress-bar.png?alt=media">dc-hub-cover-progress-bar.png</a></td><td><a href="/dynamic-components/components/progress-bar.md">Progress Bar</a></td></tr><tr><td><strong>Progress Circle</strong></td><td>Show completion as a filling circular gauge.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fy1a2km5PMwEUsrMorT4t%2Fdc-hub-cover-progress-circle.png?alt=media">dc-hub-cover-progress-circle.png</a></td><td><a href="/dynamic-components/components/progress-circle.md">Progress Circle</a></td></tr><tr><td><strong>Loading Spinner</strong></td><td>Show that data is loading, so users know to wait.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FdlUN48aoP11iEomavIgc%2Fdc-hub-cover-spinner.png?alt=media">dc-hub-cover-spinner.png</a></td><td><a href="/dynamic-components/components/spinner.md">Loading Spinner</a></td></tr><tr><td><strong>Timer</strong></td><td>Let users track elapsed time with start, pause, stop and reset.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F04WA5Em5iK1O1mDzqdci%2Fdc-hub-cover-timer.png?alt=media">dc-hub-cover-timer.png</a></td><td><a href="/dynamic-components/components/timer.md">Timer</a></td></tr><tr><td><strong>Badge</strong></td><td>Label a record with a short colored tag, such as its status or priority.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FXBrTuwN4trB2jIIT9u0A%2Fdc-hub-cover-badge.png?alt=media">dc-hub-cover-badge.png</a></td><td><a href="/dynamic-components/components/badge.md">Badge</a></td></tr><tr><td><strong>Status</strong></td><td>Show a state, such as active or overdue, with a colored dot and a label.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FId65dtXj2h6JCHIi5K9l%2Fdc-hub-cover-status.png?alt=media">dc-hub-cover-status.png</a></td><td><a href="/dynamic-components/components/status.md">Status</a></td></tr><tr><td><strong>Chip Container</strong></td><td>Show tags or labels as chips that users can interact with.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FOWH3emYR1nmRF7ZKetPJ%2Fdc-hub-cover-chip-container.png?alt=media">dc-hub-cover-chip-container.png</a></td><td><a href="/dynamic-components/components/chip-container.md">Chip Container</a></td></tr><tr><td><strong>Pill Container</strong></td><td>Show a row of pills for labels or selected values, with icons and avatars.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FdCyXHkdlgPAzzDIJGmow%2Fdc-hub-cover-pill-container.png?alt=media">dc-hub-cover-pill-container.png</a></td><td><a href="/dynamic-components/components/pill-container.md">Pill Container</a></td></tr><tr><td><strong>Avatar</strong></td><td>Show a person, account or object as a picture, initials badge or icon.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FN6pnYiNmCQksVGktMZSU%2Fdc-hub-cover-avatar.png?alt=media">dc-hub-cover-avatar.png</a></td><td><a href="/dynamic-components/components/avatar.md">Avatar</a></td></tr><tr><td><strong>Avatar Group</strong></td><td>Show a team as a compact stack of avatars.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F5E3z15TNEKdZCwoe6F5z%2Fdc-hub-cover-avatar-group.png?alt=media">dc-hub-cover-avatar-group.png</a></td><td><a href="/dynamic-components/components/avatar-group.md">Avatar Group</a></td></tr><tr><td><strong>Formatted Address</strong></td><td>Display an address in a consistent format, with a map of the location.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fze4SzA4R6bSIumlS4rFc%2Fdc-hub-cover-formatted-address.png?alt=media">dc-hub-cover-formatted-address.png</a></td><td><a href="/dynamic-components/components/formatted-address.md">Formatted Address</a></td></tr><tr><td><strong>Formatted Name</strong></td><td>Display the parts of a person's name in a consistent format.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FP2aDtPxd4KvDRPbowoa3%2Fdc-hub-cover-formatted-name.png?alt=media">dc-hub-cover-formatted-name.png</a></td><td><a href="/dynamic-components/components/formatted-name.md">Formatted Name</a></td></tr><tr><td><strong>Formatted Value</strong></td><td>Display a value in the right format for its type, such as currency or date.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FTObIGitqoF5rkS4oVZrt%2Fdc-hub-cover-formatted-value.png?alt=media">dc-hub-cover-formatted-value.png</a></td><td><a href="/dynamic-components/components/formatted-value.md">Formatted Value</a></td></tr><tr><td><strong>Help Text</strong></td><td>Add an info icon that explains a field when users hover over it.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpS2iKzaWEMAfvEZGBo1d%2Fdc-hub-cover-helptext.png?alt=media">dc-hub-cover-helptext.png</a></td><td><a href="/dynamic-components/components/helptext.md">Help Text</a></td></tr></tbody></table>

## Display content

Show text, pictures, codes, audio, video and documents.

<table data-view="cards"><thead><tr><th></th><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>Text</strong></td><td>Add rich text, such as headings, instructions and merge values from a record.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbAg3YaUjkiHDixb7XETY%2Fdc-hub-cover-text.png?alt=media">dc-hub-cover-text.png</a></td><td><a href="/dynamic-components/components/text.md">Text</a></td></tr><tr><td><strong>Blockquote</strong></td><td>Highlight a quote, such as a customer testimonial, with its author.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FuzRahYsGd7oLq7x2dAkI%2Fdc-hub-cover-blockquote.png?alt=media">dc-hub-cover-blockquote.png</a></td><td><a href="/dynamic-components/components/blockquote.md">Blockquote</a></td></tr><tr><td><strong>Icon</strong></td><td>Add a Lightning Design System icon to illustrate a section or an action.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbYv9eJ6Dy8WWVJBA9uaY%2Fdc-hub-cover-icon.png?alt=media">dc-hub-cover-icon.png</a></td><td><a href="/dynamic-components/components/icon.md">Icon</a></td></tr><tr><td><strong>Illustration</strong></td><td>Fill an empty state with a friendly illustration and a message.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fq7NR2vifYoeTmAhKcf5p%2Fdc-hub-cover-illustration.png?alt=media">dc-hub-cover-illustration.png</a></td><td><a href="/dynamic-components/components/illustration.md">Illustration</a></td></tr><tr><td><strong>Image</strong></td><td>Show a picture from a file, a URL or a record field.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F2MHwFd86spKyoMNib4t9%2Fdc-hub-cover-image.png?alt=media">dc-hub-cover-image.png</a></td><td><a href="/dynamic-components/components/image.md">Image</a></td></tr><tr><td><strong>Barcode</strong></td><td>Display a barcode or QR code generated from a value on the record.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9APEo1esIjwgskpcfiMn%2Fdc-hub-cover-barcode.png?alt=media">dc-hub-cover-barcode.png</a></td><td><a href="/dynamic-components/components/barcode.md">Barcode</a></td></tr><tr><td><strong>Audio Player</strong></td><td>Play a call recording or a voice note right on the page.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FlZuboa9JoaF8TlHn9jGZ%2Fdc-hub-cover-audio-player.png?alt=media">dc-hub-cover-audio-player.png</a></td><td><a href="/dynamic-components/components/audio-player.md">Audio Player</a></td></tr><tr><td><strong>Video Player</strong></td><td>Play a training or product video without leaving the page.</td><td></td><td><a href="/dynamic-components/components/video-player.md">Video Player</a></td></tr><tr><td><strong>PDF Viewer</strong></td><td>Preview a contract or a quote as a PDF on the page.</td><td></td><td><a href="/dynamic-components/components/pdf-viewer.md">PDF Viewer</a></td></tr></tbody></table>

## Chat, embed and connect

Add a conversation, or bring in another Dynamic Component, a flow or your own code.

<table data-view="cards"><thead><tr><th></th><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>Chat</strong></td><td>Show a conversation thread with messages, attachments and a reply box.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FWI06BhUlyZTpwA4VZd5Y%2Fdc-hub-cover-chat.png?alt=media">dc-hub-cover-chat.png</a></td><td><a href="/dynamic-components/components/chat.md">Chat</a></td></tr><tr><td><strong>Agent Chat</strong></td><td>Add a chat window where users talk to an Agentforce agent.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FqDq0u8eilb4BURqJDss7%2Fdc-hub-cover-agent-chat.png?alt=media">dc-hub-cover-agent-chat.png</a></td><td><a href="/dynamic-components/components/agent-chat.md">Agent Chat</a></td></tr><tr><td><strong>Dynamic Component</strong></td><td>Nest one Dynamic Component inside another to reuse a design.</td><td></td><td><a href="/dynamic-components/components/dynamic-component.md">Dynamic Component</a></td></tr><tr><td><strong>Flow</strong></td><td>Run a Screen Flow inside the page, with inputs from your components.</td><td></td><td><a href="/dynamic-components/components/flow.md">Flow</a></td></tr><tr><td><strong>LWC Container</strong></td><td>Place a custom Lightning web component next to your Avonni components.</td><td></td><td><a href="/dynamic-components/components/lwc-container.md">LWC Container</a></td></tr><tr><td><strong>Data LWC Container</strong></td><td>Feed your query results to a custom Lightning web component.</td><td></td><td><a href="/dynamic-components/components/data-lwc-container.md">Data LWC Container</a></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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.