# Accueil

<figure><picture><source srcset="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2F4yfQC7GyAF3mrgDYfNhZ%2Fimage.png?alt=media&#x26;token=33e3231b-72d8-4a69-85fa-888cfe1a3fe2" media="(prefers-color-scheme: dark)"><img src="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FnBIrrkhnnOcYXYAKlwnc%2Fimage.png?alt=media&#x26;token=2e975512-95cf-4e22-a71c-3e319725c705" alt="" width="188"></picture><figcaption></figcaption></figure>

<p align="center">La librairie de composants open source pensée pour rendre Papillon fluide et intégré, tout en faisant des performances et de l'optimisation une priorité</p>

<p align="center"><a href="https://github.com/PapillonApp/Papillon-UI" class="button primary">Voir sur GitHub</a> <a href="components/layouts" class="button secondary">Commencer à développer</a></p>

<p align="center"></p>

***

## Layouts

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-cover-dark data-type="image">Cover image (dark)</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>TabFlatList</strong></td><td>Liste avec header animé</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2Fhebr1njUuKREkext5TVd%2Fimage.png?alt=media&#x26;token=0f09f505-5a01-42b2-abdf-4f3ca2205afe">image (28).png</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FrfR8kyxlRPg6byUXRT4m%2Fimage.png?alt=media&#x26;token=cadace48-cb5d-49a4-a310-6076eb0d3396">image (34).png</a></td><td><a href="components/layouts/tabflatlist">tabflatlist</a></td></tr><tr><td><strong>TableFlatList</strong></td><td>Listes dynamiques</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FV5fgF2zEu6K5wxSeIaqx%2Fimage.png?alt=media&#x26;token=1c17b85e-4d5d-4217-a29d-d88c225c42d6">image (29).png</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FhU6y7HMek7Ze2IZS1AbV%2Fimage.png?alt=media&#x26;token=81994093-d31b-4f0d-9d2f-e36142cd9b04">image (35).png</a></td><td><a href="components/layouts/tableflatlist">tableflatlist</a></td></tr><tr><td><strong>Stack</strong></td><td>Alignement d'éléments</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FLxZ0TcHTTc05BKCggoWo%2Fimage.png?alt=media&#x26;token=b9c4c978-3152-492e-9a03-80ca8a53b39f">image.png</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FeCSojLYNNT5srQRxy2Zz%2Fimage.png?alt=media&#x26;token=03a1bbe8-5a7f-436c-9b25-ca03fe6fa1ea">image (1).png</a></td><td><a href="components/layouts/stack">stack</a></td></tr></tbody></table>

## Composants

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-type="image">Cover image (dark)</th><th data-hidden data-card-cover-dark data-type="image">Cover image (dark)</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>List</strong></td><td>Groupement d'Items</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FNQWsvwJR5gdhnQJ3q4U9%2Fimage.png?alt=media&#x26;token=5adaa850-3aec-45d1-931c-6f4647f45d97">image (11).png</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FL1ewRLhubzH07x97Y1wa%2Fimage.png?alt=media&#x26;token=e118ffde-3942-4f9c-b51b-53af6d33ec5d">image (12).png</a></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FL1ewRLhubzH07x97Y1wa%2Fimage.png?alt=media&#x26;token=e118ffde-3942-4f9c-b51b-53af6d33ec5d">image (12).png</a></td><td><a href="components/list">list</a></td></tr><tr><td><strong>Item</strong></td><td>Élément de liste</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2Ff3L6ngsRxLo5O7QesCLe%2Fimage.png?alt=media&#x26;token=351a87c9-6329-4a3b-928c-b625968ee4e2">image (36).png</a></td><td></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FP2DdoQLdvtnw18T11pQ2%2Fimage.png?alt=media&#x26;token=925ccb52-7f9f-4c3a-91af-46bf23279cdf">image (7).png</a></td><td><a href="components/item">item</a></td></tr><tr><td><strong>Icon</strong></td><td>Symbole d'icône</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FKwGtyrPMDY8wIVGCr7Gw%2Fimage.png?alt=media&#x26;token=a8562f6f-0bcf-436f-848d-c374374a35c7">image (2).png</a></td><td></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FPCpijJHShnnYSnQZ4euM%2Fimage.png?alt=media&#x26;token=e2680c8f-fb57-4a76-848a-cd474a6cb852">image (3).png</a></td><td><a href="components/icon">icon</a></td></tr><tr><td><strong>Typography</strong></td><td>Texte dynamique</td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FJ5OZ1VjkZFgXOgwN9mem%2Fimage.png?alt=media&#x26;token=55a427b3-cdf1-4a86-92bd-3ae246401a35">image (47).png</a></td><td></td><td><a href="https://872099368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCYvYwrd5AG2cytF3fLrG%2Fuploads%2FtLwY6mfJR6FflXljktAp%2Fimage.png?alt=media&#x26;token=e3c7b368-cf4e-4f09-b24d-a28031912a09">image (48).png</a></td><td><a href="components/typography">typography</a></td></tr></tbody></table>
