> For the complete documentation index, see [llms.txt](https://doc.kis.work/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.kis.work/documentation/guide-de-demarrage/creez-votre-application/integrez-des-composants-a-votre-application.md).

# Intégrez des composants à votre application

## Placer les containers et composants 

Kis propose un système de **containers** offrant divers agencements. Séparez votre page en autant de sections que vous voulez pour placer les composants selon vos préférences.

1 - Dans votre page, un **container vide est disponible** par défaut**.** Vous pouvez en ajouter autant que vous le souhaitez **en cliquant sur le symbole "+"** juste en dessous.

**2 -** Dans la rubrique **Composants**, choisissez l'élément de votre choix et faites simplement un **glissé-déposé dans le container vide**. Votre composant est prêt à être édité !

{% hint style="success" %}
Votre page n'est pas gravée dans le marbre. À n'importe quel moment, vous pouvez **ajouter, déplacer ou supprimer des lignes de containers** sans perdre tous vos composants. 
{% endhint %}

{% hint style="info" %}
Quel que soit le nombre de containers par ligne, Kis est responsive et s’adapte au support sur lequel il est visualisé (ordinateur, tablette, téléphone).
{% endhint %}

***

## Détails des composants

Kis propose un **large choix de composants** qui permettent aux utilisateurs de personnaliser leurs applications en fonction de leurs besoins.

Voici **la liste de tous les composants** que vous pouvez intégrer dans vos applications, avec un aperçu rapide de leur utilité.

{% hint style="success" %}
**Retrouvez un tuto détaillé et illustré pour chaque élément** dans notre [**rubrique Composants**](/documentation/composants/fil-dariane.md), en bas de page. 
{% endhint %}

### [Fil d'Ariane](/documentation/composants/fil-dariane.md)

Permet de naviguer facilement dans l'application en affichant la hiérarchie des pages et l'emplacement actuel de l'utilisateur.

### [Texte avec icône](/documentation/composants/texte-avec-icone.md)

Combine du texte et une icône pour afficher des informations importantes ou des instructions de manière visuelle et concise.

### [Image](/documentation/composants/image.md)

Permet de personnaliser vos applications ou de mettre en avant des éléments de manière visuelle, en apportant une rapide description.

### [Liste d'éléments](/documentation/composants/liste-delements.md)

Présente un ensemble d'éléments de manière simple et ordonnée, souvent utilisée pour lister des tâches, des objets ou des étapes à suivre.

### [Onglets](/documentation/composants/onglets.md)

Permettent de créer des sections claires dans vos pages et d'évoluer dans un espace de travail mieux organisé.

### [Formulaire](/documentation/composants/formulaire.md)

Un composant polyvalent pour collecter et structurer des données utilisateurs de manière interactive, avec diverses options de champs personnalisables.

### [Tableau](/documentation/composants/tableau.md)

Présente des données sous forme tabulaire, offrant des options de tri et de filtrage pour une analyse rapide et organisée.

### [Kanban](/documentation/composants/kanban.md)

Un tableau de tâches visuel qui aide à organiser, prioriser et suivre les projets ou les workflows selon une approche basée sur des colonnes et des cartes.

### [Calendrier](/documentation/composants/calendrier.md)

Permet de gérer et de visualiser des événements ou des tâches à venir, idéale pour la planification et le suivi.

### [Import CSV](/documentation/composants/import-csv.md)

Permet aux utilisateurs d'importer facilement des données à partir de fichiers CSV afin de les intégrer dans l'application et les traiter.

### [Graphiques et visualisation](/documentation/composants/graphiques-et-visualisation.md)

Jauge, Barre de progression, Barres radiales, Camembert, Donut, Courbes... Intégrez des éléments graphiques dans votre application pour visualiser toutes vos données très simplement.