PyColors UIv1.7.1

Créez votre interface. Faites-le vôtre.

Réagissez aux composants et aux couleurs sémantiques pour les tableaux de bord, les formulaires et les paramètres. Explorez l'interface utilisateur, façonnez votre thème et intégrez-le à votre application Next.js.

Commencer la construction Essayez les composants

Open source — MIT
Lumière et obscurité
tokens de couleur sémantiques
Interactions avec le clavier

Versioned — documenté — testé — activement maintenu

Vue sur GitHub

Composants sous tension

Essayez une conversation

Clair

Sombre

Personnaliser les couleurs

Votre thème utilisé

Une palette, des paramètres d'espace de travail aux conversations d'assistant. Essayez les contrôles, puis voyez comment le même thème rassemble une conversation.

Démonstration interactive

Accent12 nuances

Neutre12 nuances

Actions & feedback

Chaque action est une démo locale.

Prêt à l'examen

Votre équipe peut consulter les derniers changements.

Notifications

Activité des projetsMises à jour lorsque votre équipe progresse.Résumé hebdomadaireUn récapitulatif des tâches, des jalons et de la livraison.

ActifEn révisionProjet

Paramètres de l'espace de travail

Entrées, focus et validation en un seul endroit.

Northstar Studio

Exemple d'espace de travail d'équipe

Type et hiérarchie

Faites de la place pour du bon travail.

Amenez vos projets, vos employés et vos progrès en un seul endroit. Un langage visuel partagé Chaque détail est connecté.

--background: #FFFFFF
--foreground: #171717
--primary: #171717

Conversation primitives — Free UI

Votre assistante. Votre langage visuel.

Les mêmes couleurs, la typographie et les contrôles, maintenant dans une conversation. Basculez l'apparence ci-dessus, copiez une réponse ou ajoutez des exemples de messages.

AIConversation
Suivez les nouveaux messages tout en gardant votre place lorsque vous faites défiler vers l'arrière.
AIMessage
Composez un auteur, un contenu de message et des actions optionnelles.
AIMessageActions
Copiez une réponse avec un succès visible et réessayez.

Consultez les guides pour connaître la disponibilité de la version des paquets. Composez-les avec AIComposer; votre application fournit la connexion du modèle.

Assistant produit

Exemple de conversation — Aucun modèle connecté

You
Comment puis-je rendre mon premier assistant plus facile à utiliser?
Assistant
Commencez par un flux utile. Gardez les messages lisibles, copiables et le lecteur en contrôle du défilement.

2 sample messages — stocké uniquement dans cet aperçu.

Faites défiler vers l'arrière, puis ajoutez un échange. Choisissez Aller au plus tard lorsque vous êtes prêt à rattraper votre retard. Copier écrit un échantillon de texte dans votre presse-papiers.

Contenu de démonstration — Construit avec des composants PyColors publics.

Ouvrir l'Explorateur d'UI

La bibliothèque de composants

Des petits morceaux. Un produit cohérent.

Commencez par les primitives dont vous avez besoin. Chaque composant contient des exemples d'utilisation, des accessoires et des conseils dans la documentation.

Parcourir tous les composants