Installation des blocs

Explorez le catalogue Blocks choisir un shell d'application, un panneau d'authentification, une surface de commerce, une table de données, une surface de compte / espace de travail, un état vide ou un autre modèle documenté avant de suivre les étapes d'installation ci-dessous.

Dans le catalogue, ouvrez Code pour inspecter la source complète et sa structure de dossiers. L'arborescence des fichiers est visible par défaut à côté du code sur le bureau et au-dessus sur mobile. Utilisation Fichiers pour le cacher ou le montrer; les blocs avec plusieurs fichiers ont également un sélecteur de fichiers sur mobile.

Télécharger ZIP sauvegarde le bloc complet dans une archive, en préservant le bloc src/components/blocks/<block-slug>/ structure. Extrayez-le, puis déplacez le dossier du bloc dans votre application. Copier le fichier copie uniquement le fichier sélectionné; vous pouvez également sélectionner le code manuellement si la copie n'est pas disponible. Conservez tous les fichiers ensemble et préservez leurs importations relatives.

Les blocs simples restent dans un fichier. Les compositions plus grandes utilisent quelques fichiers ciblés avec un index.tsx point d'entrée. Le ZIP contient la même source que celle affichée dans l'explorateur ; configurez React, le package d'interface utilisateur publique et les tokens dans votre propre application.

Copier la source, puis la posséderLien vers la section

PyColors Blocks utilise un flux manuel de copie de source. Lorsqu'un bloc est disponible, copiez son répertoire source canonique dans votre application, puis traitez le code copié comme votre propre code produit.

Il n'y a pas @pycolors/blocks paquet, propriétaire PyColors CLI, ou synchronisation automatique. La copie de la source ne modifie pas la version du package et ne nécessite pas de Changeset.

Les Guide pilote du registre documente une base distincte et feedback-empty-state-panel flux de travail via la CLI shadcn amont. L'installation d'un miroir public nécessite toujours un contrôle de disponibilité séparé. Le flux manuel sur cette page reste supporté et n'est pas remplacé par le pilote.

Localisation CanoniqueLien vers la section

Le dépôt PyColors conserve la source canonique Block à :

apps/marketing/content/blocks/<category-slug>/<block-slug>/

Les deux segments de chemin utilisent un kebab minuscule. <category-slug> doit être l'un des limaces approuvées ci-dessous, et chaque bloc de production possède une écurie <block-slug>.

Catégories approuvéesLien vers la section

Chaque bloc a une catégorie primaire. Les balises peuvent prendre en charge la découverte secondaire sans créer d'alias de source ou de catégorie en double.

La source, la navigation dans la documentation et les métadonnées du Registre utilisent les mêmes <category-slug>/<block-slug> Identité. Par exemple, data/data-table maps à l'route de documentation /docs/blocks/data/data-table et, seulement après une approbation distincte du Registre, l'élément du Registre data-data-table.

La disponibilité gratuite et Pro sont des métadonnées distinctes sur cette identité partagée. Ils ne créent pas de taxonomies différentes et n'exposent pas de sources privées.

Les aperçus de documentation doivent importer ou rendre la source de bloc canonique lorsque cela est pratique. Un aperçu n'est jamais une implémentation alternative à copier.

Installer un blocLien vers la section

import { Button, Card } from "@pycolors/ui";

Contrôles des dépôtsLien vers la section

Les mainteneurs PyColors valident ce contrat de copie source avec :

pnpm check:blocks-contract
pnpm test:blocks-contract
pnpm --filter pycolors-marketing lint
pnpm --filter pycolors-marketing types:check
pnpm --filter pycolors-marketing build

Le contrôle structurel applique la catégorie exacte allowlist et les noms minuscules de kebab-case, rejette les espaces réservés vides, profond @pycolors/ui les importations, les importations internes d'applications ou de paquets, et les artefacts de paquet, de registre ou d'interface de ligne de commande. Il valide le contrat de livraison sans créer un bloc de production d'échantillons.

Les mises à jour sont délibéréesLien vers la section

Les blocs sont des copies sources, pas une dépendance gérée. Si une future version canonique change, examinez-la délibérément et apportez uniquement les modifications qui correspondent à votre application. Votre copie reste sous votre contrôle jusqu'à ce que vous choisissiez de la mettre à jour.

Copier directement depuis la documentationLien vers la section

Chaque bloc disponible a un Copier la source avec son implémentation canonique complète. Vous n'avez pas besoin de localiser les fichiers monorepo pour inspecter ou copier ce code:

• Copier le chat AI.
• Barre latérale Copy Responsive.
• Copier Connexion.
• Copier Inscrivez-vous.
• Copier la récupération de mot de passe.
• Copier la table de données.
• Vue d'ensemble de Copy Stats.
• Copier le panneau Paramètres.
• Copier la liste de contrôle d'intégration.
• Plans de prix de copie.
• Vue d'ensemble de la facturation.
• Copier Mode de paiement.
• Copier l'historique des factures.
• Copier le panneau État vide.
• Copier les membres de l'espace de travail.
• Copier les invitations d'espace de travail.
• Copier le journal d'audit.

Ouvrir Source, choisissez un fichier lorsque les onglets sont disponibles, puis utilisez le bouton de copie du bloc de code ou sélectionnez le code manuellement. Enregistrez-le au chemin d'accès appartenant à l'application indiqué au-dessus de la source et continuez avec l'exemple d'utilisation de ce guide. Configurer le paquetage public de l'interface utilisateur et tokens La source copiée n'installe pas de dépendances ou de styles pour vous.

Chaque fichier affiché est inclus à partir de la source canonique lorsque la documentation se construit. Votre copie d'application reste indépendante : examinez délibérément les modifications, validez votre intégration et gardez les personnalisations locales sous contrôle de version. Il n'y a pas de nouveau programme d'installation ou de service de mise à jour automatique.

Besoin d'une application complète plutôt que d'un modèle? Comparer les starters.