App Router
Structure d'application
Commencez par les itinéraires et les mises en page que vous pouvez suivre.
- Next.js App Router avec TypeScript
- Coquille d'application partagée et navigation mobile
- Composantes organisées par flux
Starter FreeOpen source — MIT
Votre prochain SaaS commence ici.
Un démarrage Next.js gratuit avec un tableau de bord, des flux de projets, des écrans d'authentification et un système de conception partagé. Façonnez votre produit avec des données de démonstration, puis connectez le backend de votre choix.
Code source complet — Pas de compte requis — Données d'authentification, de facturation et de produit simulées
- Next.js
- React
- TypeScript
- Tailwind CSS v4
- PyColors UI
Aperçu du produit
Explorez les écrans. Voir le point de départ.
Sept zones d'une interface SaaS, prêtes à être explorées avec des données de démonstration. Sélectionnez un écran ou ouvrez la démo en direct pour essayer les flux.
/dashboardAperçu de l'interface utilisateur
Une maison pour votre produit.
Une vue d'ensemble avec des exemples de mesures, l'activité du projet et les prochaines actions claires. Commencez par une structure de page complète et rendez-la pertinente pour votre produit.
- Responsive app navigation
- Exemples de KPI et de cartes récapitulatives
Les captures suivent votre apparence claire ou sombre avec des exemples de données. L'authentification, les paiements et le contrôle d'accès nécessitent encore de réelles intégrations de services.
Ce qui est inclus
Une fondation connectée pour vos premiers écrans.
Conservez la structure, adaptez les composants et construisez sur le même système d'interface utilisateur utilisé dans PyColors.
PyColors UI
Un système de conception partagé
Gardez tous les écrans parlant la même langue.
- Composants PyColors UI inclus
- Tailwind v4 et les tokens de couleur sémantiques
- Formulaires, tableaux, boîtes de dialogue et feuilles
Développement local
Un workflow local ciblé
Explorez l'interface avant de choisir des services.
- Fausses données et exemples côté client
- Aucune base de données ou clé API à explorer
- Vérifications de lint, type et build avec pnpm verify
PyColors UI — Versioned — documenté — testé — activement maintenu
Commencer
Du dépôt à l'application en cours d'exécution.
Commencez localement, explorez les flux d'échantillons et faites de votre premier écran votre propre.
- 01
Cloner et courir
Utilisez Node.js et la version pnpm déclarée dans le paquet de démarrage.json.
- 02
Explorez les données de démonstration
Ouvrez le tableau de bord, essayez les boîtes de dialogue du projet et inspectez les écrans du compte.
- 03
Faites-en votre produit
Mettez à jour la copie, ajustez votre thème et connectez les services dont votre application a besoin.
git clone https://github.com/pycolors-io/pycolors-starter-free.gitcd pycolors-starter-freepnpm installpnpm devAperçu local
http://localhost:3000Gratuit vs Pro
Choisissez la fondation pour votre prochaine étape.
Gardez libre tout en façonnant l'interface. Considérez Pro lorsque les comptes réels et les abonnements deviennent la prochaine étape de mise en œuvre.
Starter Free
Façonnez l'expérience produit.
GratuitRéférentiel public — MIT
- Tableau de bord, projets et interface de compte
- Données d'authentification, de facturation et de produit fictives
- Connectez votre propre backend et vos services
Starter Pro
Commencez par Auth et les fondations de facturation.
299 €Licence source unique
- Sessions Auth.js et itinéraires protégés
- Stripe Checkout, portail et webhooks
- Fondations Prisma et PostgreSQL
Pro est le code source. Vous configurez toujours les fournisseurs, construisez votre logique produit et validez les intégrations avant le lancement. Passer de Free nécessite de faire passer vos modifications ; il ne s’agit pas d’une migration automatique.
FAQ
Avant de commencer.
Quelques détails sur la source, les données de démonstration et vos prochaines étapes.
Que puis-je faire avec Starter Free ?
Clone the source, run the app and adapt the dashboard, project flows, account screens and styles to your product. The public Starter Free repository is MIT licensed; its license is included with the source.
L’authentification et les paiements sont-ils prêts à l’emploi ?
Les écrans utilisent les données de démonstration et l'état côté client. Aucun compte réel, session ou paiement n'est créé. Connectez vos propres services d'authentification, de base de données et de paiement, ou consultez les fondations d'intégration dans Starter Pro.
Ai-je besoin d'une base de données pour l'essayer ?
Non. Cloner le dépôt, installer ses dépendances et exécuter le serveur de développement avec Node.js et pnpm. Les écrans inclus peuvent être explorés sans configurer une base de données ou des services externes.
Puis-je passer à Starter Pro plus tard ?
Oui. Gratuit et Pro partagent la fondation PyColors UI. Apportez délibérément des modifications à votre interface et configurez les intégrations Pro pour votre produit. Purchasing Pro ne migre pas automatiquement votre application ou vos données.
Faites de votre point de départ le vôtre.
Utilisez les mêmes composants et couleurs lorsque vous développez votre application.
Personnalisez votre thème
Explorez les couleurs et tapez-les avant de les appliquer à votre application.
Ajoutez votre prochain écran
Réutilisez les blocs d'application construits avec PyColors UI.
Suivez la documentation
Trouvez les étapes d'installation, la structure du projet et les concepts d'intégration.