PyColors UI / Exemples

Voir les composants devenir un produit.

Explorez un tableau de bord, des flux de travail de projet et des écrans de compte construits avec PyColors UI. Essayez la démo gratuite de Starter Runnable, inspectez la source et apportez les pièces dont vous avez besoin dans votre propre application.

Explorez les écrans Ouvrir la démo en direct

Six écrans — Code source complet — Données de démonstration — Aucun compte requis

Une application. Six flux de travail quotidiens.

Sélectionnez un écran pour voir la mise en page, comprendre son étendue et ouvrir la démo correspondante.

PyColors Starter Free

Open source — MIT

Next.js — TypeScript — Interface utilisateur PyColorsVoir la source sur GitHub

Écran tableau de bord de Starter Free avec données de démonstration — 01 / 06/dashboard
Rendez la vue d'ensemble utile.
Exemple de métriques, activité de projet et suppression des prochaines actions dans un shell d'application réactif.
Des cartes avec une hiérarchie d'informations claire
Navigation partagée desktop et mobile
Données de démonstration sur les métriques et l'utilisation des activités.
Essayez tableau de bord démo Explorez le bloc stats

Écran projets de Starter Free avec données de démonstration — 02 / 06/projects
Donnez aux enregistrements un flux de travail clair.
Un tableau de projet, des pages de détails et des actions contextuelles pour créer, renommer et supprimer des enregistrements.
Tables et actions en ligne
Dialogues pour des tâches ciblées
Les changements de projet utilisent l'état de démonstration côté client, pas une base de données.
Essayez projets démo Explorez le bloc de table

Écran res de Starter Free avec données de démonstration — 03 / 06/login
Commencez par une connexion réfléchie.
Interfaces de connexion, d'enregistrement et de réinitialisation de mot de passe avec états de formulaire, de chargement et de validation.
Email et mot de passe
Des voies de rétroaction et de récupération claires
Ces écrans ne créent pas de véritables comptes ou sessions.
Essayez res démo Lire la portée de l'authentification

Écran paramètres de Starter Free avec données de démonstration — 04 / 06/settings
Rendre les changements de compte prévisibles.
Profil, préférences et sections de sécurité avec une hiérarchie cohérente pour les actions quotidiennes et destructrices.
Formulaires de compte groupés
Modèles d'action primaires et destructeurs
Connectez la sauvegarde et la gestion de session à vos propres services.
Essayez paramètres démo Explorez le bloc des paramètres

Écran facturation de Starter Free avec données de démonstration — 05 / 06/billing
Concevoir l'expérience d'abonnement.
Les exemples de plans, les détails de paiement et l'historique des factures apportent l'interface de facturation dans le même système de conception.
Résumés de plan et d'abonnement
Informations sur la facture et le paiement
Checkout et le portail client ne sont pas connectés.
Essayez facturation démo Lire la portée de facturation

Écran admin de Starter Free avec données de démonstration — 06 / 06/admin
Rassemblez l’espace de travail.
Des interfaces de membre, de rôle et d'invitation pour façonner la façon dont les gens travaillent ensemble dans votre produit.
Listes de membres et contrôle des rôles
Dialogues d'invitation et de gestion
L’autorisation et la livraison d’invitations nécessitent des intégrations de services.
Essayez admin démo Explorez le bloc membres

Captures en mode clair avec des données d’exemple. L’authentification, les paiements et les autorisations sont simulés.

Découvrir Starter Free

Trouvez les pièces derrière l'interface.

Explorez les blocs de copie de source associés et les primitives que vous pouvez composer dans votre propre produit.

Parcourir les modèles

Records & actions

Organisez les données, exposez les actions de ligne et continuez à modifier les tâches dans leur contexte.

Projets — Admin

Explore the data table

Formulaires & compte

Composez des champs étiquetés, des actions claires et des commentaires pour les flux de compte.

Auth — Paramètres

Explore the sign-in block

Forfaits & facturation

Donnez aux plans, aux détails de paiement et aux factures une hiérarchie visuelle cohérente.

Tableau de bord — facturation

Explore the billing block

Prenez l'exemple dans votre éditeur.

Exécutez le dépôt public Starter Free localement. Aucune clé de base de données ou API n'est nécessaire pour explorer les flux de démonstration inclus.

Exécuter le starter
Utilisez les versions Node.js et pnpm déclarées dans le package.json du dépôt.
Adapter un écran
Remplacez le contenu de l'échantillon, ajustez les composants et essayez votre propre thème.
Connectez vos services
Ajoutez de véritables intégrations d'authentification, de persistance et de paiement lorsque votre produit en a besoin.

Guide d'installation Structure du projet

Terminal

git clone https://github.com/pycolors-io/pycolors-starter-free.gitcd pycolors-starter-freepnpm installpnpm dev

Votre copie locale. Vos composants. Vos services.

Continuez à construire d'ici.

Apportez une section dans une application existante, façonnez votre thème ou commencez à connecter la couche métier.

Blocs

Choisissez vos blocs de construction

Copiez des sections ciblées dans votre application existante et adaptez la source à votre flux de travail.

Theme Builder

Faites votre propre thème

Explorez les couleurs sémantiques, les apparences claires et sombres et la typographie pour votre interface.

Starter Pro

Prêt à connecter la couche métier ?

Explorez l'authentification, la facturation Stripe, les routes protégées et les bases de données dans Starter Pro. Examinez la portée avant de choisir votre point de départ.

Comparer Gratuit et Pro

Découvrir Starter Pro

Achat unique. Configurez les intégrations pour votre produit.