# Components

## Explore our specific component tutorials.

This page lists all Avonni Flow components library examples, organized and categorized by component. 

<table><thead><tr><th width="253">Illustration</th><th>Component</th></tr></thead><tbody><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F98EdhUaKd1MclpxH8FFz%2FExample%20-%20Activity%20Timeline%20-%20Save%20-%20Cover.png?alt=media&#x26;token=608e897e-3d9c-4c87-8358-c490a33bc447" alt=""></td><td><a href="components/timeline"><strong>Activity Timeline</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FbBriZ5DnRvWhsTaaO86t%2FExample%20-%20Alert%20-%20Cover.png?alt=media&#x26;token=ee450813-339c-4f96-b758-c71f3a09563e" alt=""></td><td><a href="components/alert"><strong>Alert</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F3JAZhXcqTuxN5cjOPisR%2FExample%20-%20List%20Sortable%20(1).png?alt=media&#x26;token=b3fd3c33-30a6-444c-8f0a-6878b58d4107" alt=""></td><td><a href="components/avatar"><strong>Avatar</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fooi6S3CvE1ajVRu8NYjy%2FExample%20-%20DAtatable%20-%20Save%20-%20Cover.png?alt=media&#x26;token=6c087dce-dd7b-4b67-ba07-0e16b6d9a367" alt=""></td><td><a href="components/avatar-group"><strong>Avatar Group</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F7czVGfqLYpO5TumIBidz%2FBiometrics.png?alt=media&#x26;token=82f5eaad-c67d-4251-bc1e-f6437c265961" alt=""></td><td><a href="components/biometrics"><strong>Biometrics</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FfSXQGeQdUv1cDeLyr3oG%2FExample%20-%20-Buttons%20-%20Cover.png?alt=media&#x26;token=85409cae-e407-45fe-893f-665e9586b872" alt=""></td><td><a href="components/button"><strong>Button</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FL63u9CCChcRxb1dKozNs%2FExample%20-%20Scoped%20(8).png?alt=media&#x26;token=64ba3eb4-4b46-432a-82d1-bf1f05bb6ff5" alt=""></td><td><a href="components/button-groups"><strong>Button Groups</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FqGSDh50BueETxX2exA1D%2FExample%20-%20Scoped%20(7).png?alt=media&#x26;token=c2ebc61a-b1b5-495b-b5d0-cb8eca79bdef" alt=""></td><td><a href="components/calendar"><strong>Calendar</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FVwJcq7fcOiFm3BPvUK8h%2FExample%20-%20Carousel%20-%20Related%20products.png?alt=media&#x26;token=77a96cb0-da4a-48e0-b693-3a9a64fe5b8b" alt=""></td><td><a href="components/carousel"><strong>Carousel</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FfrW7rdRgRfejeXE9QGuS%2FExample%20-%20Scoped%20(6).png?alt=media&#x26;token=b3d50d24-54b0-48e3-ae59-0818f6efd08c" alt=""></td><td><a href="components/combobox"><strong>Combobox</strong></a></td></tr><tr><td></td><td><a href="components/csv-parser"><strong>CSV Parser</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fooi6S3CvE1ajVRu8NYjy%2FExample%20-%20DAtatable%20-%20Save%20-%20Cover.png?alt=media&#x26;token=6c087dce-dd7b-4b67-ba07-0e16b6d9a367" alt=""></td><td><a href="components/data-table"><strong>Datatable</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FdprZYeWjAlRnZqVXaJQL%2FExample%20-%20Scoped%20(9).png?alt=media&#x26;token=919bf2c3-0ead-42f0-a739-c0198f0dec1c" alt=""></td><td><a href="components/date-picker"><strong>Date Picker</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FlyaFVULDC5wUL0Jnrbq9%2FExample%20-%20Scoped%20(10).png?alt=media&#x26;token=89b7bf2a-04af-4bdb-9985-04e48b00215a" alt=""></td><td><a href="components/date-time-picker"><strong>Date Time Picker</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fc2kviYltgYRfw7kElWy5%2FExample%20-%20Scoped%20(11).png?alt=media&#x26;token=156b53b3-5c07-4718-bc08-f4b4be979d4b" alt=""></td><td><a href="components/delay-interaction"><strong>Delay Interaction</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FhgxUqD0SffbN5JtkL7Jn%2FExample%20-%20-DuaListbox%20-%20Cover.png?alt=media&#x26;token=3854066a-37a1-4c4b-90a4-5b640ec6e119" alt=""></td><td><a href="components/dual-listbox"><strong>Dual Listbox</strong></a></td></tr><tr><td></td><td><a href="components/expandable-section"><strong>Expandable Section</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FlZC1HvXcYAPcPsVbNy17%2FExample%20-%20-Header%20-%20Background%20-%20Cover.png?alt=media&#x26;token=2e13a5ae-5d3e-4215-919b-bc4a371092a3" alt=""></td><td><a href="components/header"><strong>Header</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FerJNWDNmtDx08pVAiuCR%2FExample%20-%20InputPen%20-%20Toolbar.png?alt=media&#x26;token=3d04cd32-c6c9-4fd0-b854-84ba687c6b5e" alt=""></td><td><a href="components/input-pen"><strong>Input Pen</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FlecwuVuotDGNd9OtgwhC%2FAvonni%20Illustrations%20(3)..png?alt=media&#x26;token=c16f4f71-ec51-451a-b2c0-49ec41e77451" alt=""></td><td><a href="components/kanban"><strong>Kanban</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FBBu9knnX8kUQjSPllFBU%2FExample%20-%20List%20Sortable.png?alt=media&#x26;token=b980f8ec-89eb-4449-87e2-97365f4ba6dc" alt=""></td><td><a href="components/list"><strong>List</strong></a></td></tr><tr><td></td><td><a href="components/map"><strong>Map</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FD34xWeCsKLmH06vqVqet%2FAvonni%20Illustrations%20(4)..png?alt=media&#x26;token=2638f84a-fca3-48a7-9556-a808c494b60b" alt=""></td><td><a href="components/metric"><strong>Metric</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FKqqoGmr6P4Es7SeOnFjz%2FExample%20-%20Scoped%20(12).png?alt=media&#x26;token=52633d17-223f-41d1-98e0-3cb91dbc8a61" alt=""></td><td><a href="components/microphone"><strong>Microphone</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FoNl2EcDXNqdRNXiMjg2P%2FExample%20-%20Scoped%20(5).png?alt=media&#x26;token=bc891293-2904-4f85-8b0f-2e22276a73e3" alt=""></td><td><a href="components/progress-indicator"><strong>Progress Indicator</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FobiPbkgYM70YnDJCgalk%2FExample%20-%20QR%20Code.png?alt=media&#x26;token=d763b94c-daaa-4ab2-b1bf-a50a2fb9b1a3" alt=""></td><td><a href="components/qr-code"><strong>QR Code</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Flt1zXTHQx4PR4iN6kHGS%2FRecord%20Detail.png?alt=media&#x26;token=676165c0-30b6-4c06-ae21-197d128ca376" alt=""></td><td><a href="components/record-detail"><strong>Record Detail</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FNj1dsbd9ziTyiRm0630s%2FExample%20-%20QR%20Code%20(1).png?alt=media&#x26;token=c97f3dda-adf1-489c-b9e4-38743cf6cf10" alt=""></td><td><a href="components/scoped-notification"><strong>Scoped Notification</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FKzufUuyaV1L3sOKaBrej%2FAvonni%20Illustrations%20QR%20Code%20(1)..png?alt=media&#x26;token=d7b2c058-515e-4cd4-a7ad-e8999815c2dc" alt=""></td><td><a href="components/tabs"><strong>Tabs</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F98EdhUaKd1MclpxH8FFz%2FExample%20-%20Activity%20Timeline%20-%20Save%20-%20Cover.png?alt=media&#x26;token=608e897e-3d9c-4c87-8358-c490a33bc447" alt=""></td><td><a href="components/text-area"><strong>Text Area</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FdVGAx8FqEf9ElxwZO6cd%2FExample%20-%20Scoped%20(15).png?alt=media&#x26;token=9c0969d0-d3fe-4c05-b37d-1da3dd7b9037" alt=""></td><td><a href="components/tree"><strong>Tree</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F98EdhUaKd1MclpxH8FFz%2FExample%20-%20Activity%20Timeline%20-%20Save%20-%20Cover.png?alt=media&#x26;token=608e897e-3d9c-4c87-8358-c490a33bc447" alt=""></td><td><a href="components/timeline"><strong>Timeline</strong></a></td></tr><tr><td><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FlxkTWJ5ClDMttdXoMla1%2FExample%20-%20Scoped%20(4).png?alt=media&#x26;token=5d9d2d91-5f92-4a68-90ea-b702d3c8f631" alt=""></td><td><a href="components/vertical-visual-picker"><strong>Vertical Visual Picker</strong></a></td></tr></tbody></table>