> 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/lwc-components/core-components/core-components.md).

# Overview

Core Components are Avonni's base UI building blocks — avatars, badges, cards, pickers, sliders, progress indicators, media players, layout, and more. Each is a presentational Lightning Web Component you reference as an `avonni-<name>` tag in your own component's HTML template and configure through its attributes.

## Documented components

* [Alert Banner](/lwc-components/core-components/alert-banner.md) — dismissible inline notification banner.
* [Audio Player](/lwc-components/core-components/audio-player.md) — audio playback with custom controls.
* [Avatar](/lwc-components/core-components/avatar.md) — identity display with image, initials, status, and actions.
* [Avatar Group](/lwc-components/core-components/avatar-group.md) — a collection of avatars with overflow handling.
* [Badge](/lwc-components/core-components/badge.md) — compact status / category indicator.
* [Barcode](/lwc-components/core-components/barcode.md) — render barcodes and QR codes from a value.
* [Blockquote](/lwc-components/core-components/blockquote.md) — styled quote / callout block.
* [Card](/lwc-components/core-components/card.md) — flexible content container with media and slots.
* [Carousel](/lwc-components/core-components/carousel.md) — sliding panels of items with indicators and actions.
* [Chip Container](/lwc-components/core-components/chip-container.md) — collection of chips with optional reordering.
* [Choice Set](/lwc-components/core-components/choice-set.md) — single/multi choice input (buttons or list).
* [Color Gradient](/lwc-components/core-components/color-gradient.md) — gradient color selector.
* [Color Palette](/lwc-components/core-components/color-palette.md) — swatch-based color selector.
* [Color Picker](/lwc-components/core-components/color-picker.md) — full color input with palettes and opacity.
* [Combobox](/lwc-components/core-components/combobox.md) — searchable single/multi-select dropdown.
* [Counter](/lwc-components/core-components/counter.md) — numeric input with increment/decrement controls.
* [Date Picker](/lwc-components/core-components/date-picker.md) — date input with a calendar dropdown.
* [Date Range](/lwc-components/core-components/date-range.md) — start/end date or datetime input.
* [Date Time Picker](/lwc-components/core-components/date-time-picker.md) — date and time slot selection.
* [Dual Listbox](/lwc-components/core-components/dual-listbox.md) — move items between source and selected lists.
* [Dynamic Menu](/lwc-components/core-components/dynamic-menu.md) — button menu with rich, searchable items.
* [Expandable Section](/lwc-components/core-components/expandable-section.md) — collapsible content section.
* [Filter Menu](/lwc-components/core-components/filter-menu.md) — filter dropdown (list, range, date types).
* [Filter Menu Group](/lwc-components/core-components/filter-menu-group.md) — a group of coordinated filter menus.
* [Header](/lwc-components/core-components/header.md) — page/section header with slots for actions and details.
* [Icon Picker](/lwc-components/core-components/icon-picker.md) — searchable SLDS icon selector.
* [Illustration](/lwc-components/core-components/illustration.md) — empty-state illustration with text.
* [Layout](/lwc-components/core-components/layout.md) — responsive flex layout container.
* [Layout Item](/lwc-components/core-components/layout-item.md) — sized, alignable child of Layout.
* [Metric](/lwc-components/core-components/metric.md) — KPI value with formatting, trend, and avatar.
* [Microphone](/lwc-components/core-components/microphone.md) — audio recording with optional save.
* [Pill Container](/lwc-components/core-components/pill-container.md) — collection of pills with actions and reordering.
* [Progress Bar](/lwc-components/core-components/progress-bar.md) — linear progress indicator with reference lines.
* [Progress Circle](/lwc-components/core-components/progress-circle.md) — circular progress indicator.
* [Progress Indicator](/lwc-components/core-components/progress-indicator.md) — multi-step progress tracker.
* [Rating](/lwc-components/core-components/rating.md) — star/icon rating input.
* [Signature Pad](/lwc-components/core-components/signature-pad.md) — capture handwritten signatures.
* [Slider](/lwc-components/core-components/slider.md) — single or range value slider.
* [Status](/lwc-components/core-components/status.md) — value mapped to predefined visual states.
* [Vertical Visual Picker](/lwc-components/core-components/vertical-visual-picker.md) — stacked card-style choices.
* [Video Player](/lwc-components/core-components/video-player.md) — video playback (hosted, YouTube, Vimeo).
* [Visual Picker](/lwc-components/core-components/visual-picker.md) — card/tile selection control.
* [Visual Picker Link](/lwc-components/core-components/visual-picker-link.md) — link-style visual picker.

## What a component page covers

Each page opens with the component's `avonni-*` tag and a one-line description, then splits into two tabs:

* **Develop** — overview, configuration guidelines, copy-paste code examples, key considerations, and troubleshooting.
* **Specifications** — the API reference: attributes, methods, slots, custom events, and styling hooks (only the sections a component actually has).


---

# 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/lwc-components/core-components/core-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.