Des composants
qu'on prend, pas qu'on installe.
Des composants beaux et accessibles pour PyBlade, sur le modèle de shadcn/ui. Prenez celui dont vous avez besoin, copiez-le dans vos templates, et faites-en ce que vous voulez.
survolez le plateau : chaque composant sort de son emplacement
Les vrais composants, en direct.
Chaque aperçu est rendu par PyBlade à partir du code que vous copiez. Cliquez, tapez, ouvrez : ils fonctionnent.
Faites-en votre thème.
Réglez chaque couleur, le rayon et les ombres, en clair et en sombre, sur les vrais composants. Partez de Vercel, MUI, GitHub, Stripe… puis copiez la commande ou le theme.css.
Ouvrir l'éditeur de thèmesConstruit comme une bibliothèque. Possédé comme votre code.
Tout ce qu'on attend d'un système de composants, sans dépendance à mettre à jour.
Le code est à vous
Pas une dépendance : chaque composant est copié dans votre dossier components, prêt à être lu, modifié, étendu.
Thèmes en variables CSS
Au format shadcn, en OKLCH, avec un mode clair et un mode sombre. 5 bases × 8 couleurs, et vos propres variables.
Accessible par défaut
Navigation au clavier, focus visible et rôles ARIA. Les champs natifs restent natifs et se postent avec le formulaire.
Pensé pour le serveur
Des composants PyBlade avec props et slots. Erreurs de formulaire avec @error, données Python avec tojson, état du sidebar lu dans un cookie.
Un CLI complet
pyblade-ui ajoute un composant et ses dépendances, montre vos modifications avec diff, et change de thème en une commande.
Des blocs prêts à l'emploi
Une application avec sidebar, un formulaire de connexion : assemblés à partir des mêmes composants, à copier et adapter.
Ajoutez. Utilisez. Modifiez.
Une commande copie le composant dans votre projet. Ensuite, c'est un template comme les autres : pas de boîte noire, pas de mise à jour qui casse.
- 1Initialisez le thème et les variables
- 2Ajoutez les composants dont vous avez besoin
- 3Utilisez-les dans n'importe quel template
pip install pyblade-ui
pyblade-ui init --base zinc --color blue
pyblade-ui add card switch button
# ✓ 3 composants copiés dans components/ui<pb-ui.card class="max-w-md">
<pb-ui.card-header>
<pb-ui.card-title>Notifications</pb-ui.card-title>
</pb-ui.card-header>
<pb-ui.card-content class="flex items-center justify-between">
<pb-ui.label for="emails">Recevoir les emails</pb-ui.label>
<pb-ui.switch id="emails" name="emails" checked />
</pb-ui.card-content>
<pb-ui.card-footer>
<pb-ui.button variant="outline">Enregistrer</pb-ui.button>
</pb-ui.card-footer>
</pb-ui.card>Lancez-vous en quelques minutes.
Gratuit et open source. Prenez votre premier composant aujourd'hui.