Aller au contenu
PYCOLORS
Blocs PyColorsAperçu + source

Créez votre prochain écran. Gardez la maîtrise du code.

Des interfaces React pour l’authentification, la facturation, les paramètres et les données. Testez chaque bloc, explorez son code et intégrez-le à votre application.

Explorer les blocsGuide d'intégration

17 blocs documentés

Des interfaces complètes construites avec PyColors UI.

6 catégories de produits

Trouvez l’interface adaptée à votre prochaine fonctionnalité.

Prévisualiser puis copier

Testez les interactions, puis intégrez le code à votre application.

Choisissez l'interface dont vous avez besoin

Choisissez une catégorie, testez l’aperçu sur plusieurs tailles d’écran et copiez la source complète. Chaque bloc dispose d’un guide d’intégration.

Structures d’application

2 Blocs
Retour aux catégories

Conversation IA

Une conversation contrôlée avec réponse progressive, arrêt, nouvelle tentative et retour de copie. Fournissez vos messages et votre connexion au modèle, puis copiez la source complète.

Documentation
Démo locale - pas de demande d'IA

Conversation

Votre contexte. Votre prochaine étape.

Un point de départ clair

Sur quoi travaillez-vous ?

Commencez par une question, une idée ou un problème à résoudre.

Prêt quand vous l’êtes.

Fichier de référence

UTF-8 .txt ou .md · 1 fichier maximum · 512 KiB par fichier

Lecture dans ce navigateur uniquement, sans envoi ni stockage. Choisissez un fichier non sensible : son nom visible peut apparaître dans le JSON confirmé, jamais son contenu.

Les réponses, les ébauches d'agent et les états de travail sont des exemples fixes. Seules les demandes d'exemple d'agent ouvrent une définition. Un fichier est lu uniquement lorsque vous choisissez Lire localement ; il n'est pas analysé par un modèle. Rien n'est envoyé à un fournisseur ou stocké à distance. Les définitions confirmées peuvent être copiées ou téléchargées localement.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Barre latérale adaptative

Une structure d’application avec navigation sur ordinateur et panneau mobile. Votre application garde la maîtrise de la marque, des liens, du contenu et du routage.

Documentation
Aller au contenu

Vue d’ensemble

Votre espace de travail, en un coup d’œil.

Suivez vos projets et les prochaines étapes importantes.

Projets actifs
3
Membres de l'équipe
3

Activité des projets

3 projets

  • Refonte du site Web

    Design

    72% terminés

  • Lancement de la plateforme

    Ingénierie

    48% terminés

  • Charte de marque

    Marketing

    100% terminés

Espace fictif · Les modifications restent dans cet aperçu.

Explorer les blocs

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Authentification

3 Blocs
Retour aux catégories

Se connecter

Présentez les champs de connexion, les fournisseurs d’identité, les erreurs et la récupération du compte. Votre application conserve la gestion de l’authentification et des sessions.

Documentation

Se connecter

Connectez-vous au compte de votre espace de travail.

Aperçu interactif uniquement. Aucune requête réseau n'est effectuée.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

S'inscrire

Composez le formulaire d’inscription, les fournisseurs d’identité et les mentions de consentement. Votre application conserve la validation, l’enregistrement du compte et l’authentification.

Documentation

Créer votre compte

Créez un compte pour votre espace de travail. La logique reste gérée par votre application.
En continuant, vous acceptez les conditions et la politique de confidentialité de votre application.

Aperçu interactif uniquement. Aucune requête réseau n'est effectuée.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Récupération de mot de passe

Présentez un formulaire de récupération avec ses états, erreurs et indications. Votre application gère les jetons, l’envoi des emails et la mise à jour du mot de passe.

Documentation

Récupérer votre compte

Saisissez l'adresse e-mail associée à votre espace de travail.
Utilisez l'adresse que votre application reconnaît.

Aperçu interactif uniquement. Aucune requête réseau n'est effectuée.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Commerce

4 Blocs
Retour aux catégories

Offres tarifaires

Comparez les offres, leurs prix, leurs conditions de facturation et leurs fonctionnalités. Votre application conserve le calcul des prix, le choix de la période et les paiements.

Documentation

Découvrez la présentation des offres

Offres fictives, distinctes des tarifs PyColors. Aucun achat ni aucune requête réseau.

  • Launch

    Une offre fictive pour un petit projet.

    $12 / mois

    Montant mensuel fictif. Aucun achat possible.

    • Un exemple de projet
    • Exemples d’outils d’export

  • Studio

    Offre mise en avant

    Une offre fictive pour une équipe en pleine croissance.

    $29 / mois

    Montant mensuel fictif. Aucun achat possible.

    • Dix exemples de projets
    • Exemples d’outils de collaboration
    • Exemples d’outils d’export

  • Personnalisé

    Un exemple de tarif sur mesure, défini par votre application.

    Discutons-en

    Le périmètre et les conditions sont à convenir séparément.

    • Un exemple de périmètre personnalisé

    Ce bouton désactivé n’envoie aucune demande.

Choisissez une offre pour tester une action locale de démonstration.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Aperçu de la facturation

Résumez l’offre, la fréquence de facturation, le statut, le renouvellement et le paiement. Votre application reste la source de vérité pour la facturation et ses actions.

Documentation

Facturation

Votre plan, la date de renouvellement et les détails du paiement. Données de démonstration fictives.
Plan
Offre Growth · Exemple
Facturation
Mensuel
Statut
Actif
Renouvellement
15 octobre
Mode de paiement
Visa se terminant par 4242

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Mode de paiement

Présentez le moyen de paiement, sa validité, le contact de facturation et le statut. Votre application gère les actions et la connexion au prestataire de paiement.

Documentation

Mode de paiement

Le mode de paiement utilisé pour votre espace de travail. Données de démonstration fictives.
Par défaut
Méthode
Visa se terminant par 4242
Expiration
10 / 28
Contact de facturation
billing@example.com

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Historique des factures

Affichez les dates, montants, statuts et actions des factures dans un tableau lisible. Votre application gère les données, les documents et les autorisations.

Documentation

Historique des factures

Retrouvez la facturation de votre espace de travail. Factures fictives de démonstration.
Historique des factures
DateMontantStatutAction
1 septembre 202649,00 $Payée
1 août 202649,00 $Payée

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Compte & espace de travail

5 Blocs
Retour aux catégories

Parcours de démarrage

Accompagnez les nouveaux utilisateurs avec des étapes claires, une progression et des actions utiles. Votre application conserve la navigation et l’enregistrement de la progression.

Documentation
Un bon espace de travail commence ici

Suivez les premières étapes qui aident votre équipe à démarrer.

1 / 3

  1. Créez votre espace de travail

    Terminé

    Donnez à votre équipe un lieu de travail partagé.

  2. Configurez votre premier projet

    À faire

    Ajoutez un projet pour organiser votre prochaine version.

  3. Réunissez votre équipe

    À faire

    Choisissez les personnes qui collaboreront avec vous.

Démo uniquement — 1 sur 3 étapes achevées localement. Aucun espace de travail, projet ou invitation n'est créé.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Panneau de paramètres

Un formulaire de paramètres avec champs nommés, messages de validation et confirmation. Votre application gère les valeurs, leur validation et leur enregistrement.

Documentation

Paramètres du compte

Mettez à jour le profil et les détails de l'espace de travail que votre produit affiche.

Profil

Choisissez les informations visibles par vos collaborateurs.

Utilisez le nom sous lequel vos collaborateurs vous connaissent.

Une brève description de votre rôle.

Espace de travail

Gardez l’identité de l’espace de travail partagé claire et à jour.

Affiché dans la navigation et les espaces partagés.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Membres de l'espace de travail

Présentez les membres, leurs rôles, leurs statuts et leurs actions. Votre application garde la maîtrise des identités, des permissions et des modifications.

Documentation

Exemple fictif local. Aucune invitation, modification de droits, requête ou email. Rien n’est enregistré : les actions sélectionnent uniquement un membre de démonstration.

Membres de l’espace · Exemple

Cette démo fournit les noms, rôles, statuts et actions. Le bloc ne les déduit pas.

Guide d’installation UI

  • Alex Morgan

    alex@example.com

    Rôle
    Propriétaire de l'espace de travail
    Statut
    Actif · Exemple

  • Jordan Lee

    Rôle
    Observateur de projet
    Statut
    En attente de validation · Exemple

  • Casey Park - un nom de membre fictif délibérément long pour un espace de travail étroit

    casey.long.example.address@example.com

    Rôle
    Collaborateur externe avec une étiquette de rôle délibérément longue
    Statut
    Action indisponible · Exemple

Aucun membre d'exemple sélectionné.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Invitations à l'espace de travail

Présentez les destinataires, rôles, statuts et dates des invitations. Votre application conserve l’envoi, les jetons et la gestion des adhésions.

Documentation

Invitations en attente

Invitations fictives fournies par la démonstration.

  • sam@example.com

    Destinataire de démonstration

    Rôle
    Éditeur
    Statut
    En attente
    Envoi
    Expiration

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Journal d’activité

Présentez l’activité de l’espace avec dates, détails, filtres et actions. Votre application gère la collecte, la conservation, les permissions et l’intégrité du journal.

Documentation

Activité récente

Événements fictifs fournis par la démonstration.

  1. Alex Morgan a modifié les paramètres de l’espace

    Nom de l’espace de travail modifié.

  2. Sam Lee a consulté les accès à la facturation

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Données et enregistrements

2 Blocs
Retour aux catégories

Aperçu des statistiques

Présentez les indicateurs clés, les comparaisons et les périodes dans un résumé clair. Votre application conserve les valeurs, les formats et les calculs.

Documentation
Aperçu de l'espace de travail

Un aperçu de la progression de votre équipe. Données de démonstration fictives.

Du 1er au 30 septembre 2026

Projets actifs
24
+4 par rapport à août

Toutes les équipes de l’espace

Membres de l'équipe
12
+2 par rapport à août

Membres avec accès à l'espace de travail

Tâches achevées
186
En hausse de 18% par rapport à août

Achevé en septembre

Tâches en retard
7
Jusqu'à 3 d'août

Passé la date prévue

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Tableau de données

Recherchez, filtrez, triez et paginez vos données avec un état vide utile. Réutilisez les contrôles tout en conservant votre logique de données et vos actions.

Documentation

Affichage de 1–2 sur 6 éléments correspondants.

Éléments de démonstration
Mise à jourActions
NorthwindDisponibleAujourd'hui
ContosoEn pauseHier

Exemple local. Aucune requête envoyée ni donnée enregistrée.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Retours et états

1 Bloc
Retour aux catégories

Panneau d'état vide

Proposez une prochaine étape claire lorsqu’une section est vide ou sans résultat. Votre application conserve le contenu, les actions, les états et la gestion du focus.

Documentation

Exemple fictif local. Aucun projet créé, aucune requête envoyée ni donnée enregistrée. Les contrôles modifient uniquement l’aperçu ci-dessous.

Exemples de projets

Démarrer un projet

Ajoutez un premier projet à votre espace. Cet aperçu affiche uniquement un exemple fictif, sans créer de donnée.

Guide d’installation UI
Exemples sans action ou avec action désactivée

Exemple d'activité

Rien à afficher pour le moment

Aucune action utile à proposer ici. Les deux actions sont omises.

Exemples de rapports avec un titre d’espace plus long

Votre espace de rapports attend son premier élément

Cette description plus longue illustre le retour à la ligne. Un bouton désactivé reste un élément de présentation : les autorisations doivent être vérifiées côté serveur.

Cette démo utilise des données fictives locales. Copiez la source, puis connectez les données et les actions de votre application.

Besoin de la fondation d'application complète?

Utilisez Blocs lorsque vous voulez un motif dans une application existante. Choisissez Starter Free ou Starter Pro lorsque vous avez besoin d'une base SaaS plus large au lieu d'assembler des écrans un à la fois.

Comparer les startersContinuer avec les blocs