@brickslab/ui-web

Panneau de détail d'un composant regroupant son nom, badge de statut, description, aperçu visuel et extrait de code. Utilisé dans les pages de documentation et catalog pour présenter un composant de façon complète et standardisée.

Aperçu

panneau complet — nom, badge, description, preview et code

TagChip

Stable

Étiquette compacte pour catégoriser du contenu. 3 variantes visuelles (default, brand, muted) et 2 tailles (sm, md). Idéal pour les tags de projets, catégories d'articles ou filtres.

branddefaultmuted

import { TagChip } from "@brickslab/ui-web";

<TagChip label="BricksLab" variant="brand" />
<TagChip label="React"     variant="default" />
<TagChip label="Archivé"   variant="muted" />

sans preview ni code

SectionGallery

Nouveau

Galerie en grille configurable pour afficher une collection d'éléments React avec 1 à 4 colonnes.

sans badge

AppShell

Coque d'application complète avec slots pour header, sidebar, footer et contenu principal.

<AppShell header={<HeaderBar />} sidebar={<SidebarNav />}>
  <main>Contenu</main>
</AppShell>

Props

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	✓	Nom du composant documenté.
`description`	`string`	—	—	Description courte du composant et de son usage.
`preview`	`ReactNode`	—	—	Aperçu visuel interactif du composant.
`code`	`string`	—	—	Extrait de code source illustrant l'utilisation du composant.
`badge`	`string`	—	—	Badge optionnel (ex. : "Nouveau", "Beta", "Stable") affiché à côté du nom.

Utilisation

tsx

import { ComponentDetailPanel } from "@brickslab/ui-web";

<ComponentDetailPanel
  name="TagChip"
  description="Étiquette compacte pour catégoriser du contenu avec 3 variantes et 2 tailles."
  badge="Stable"
  preview={
    <div style={{ display: "flex", gap: 8 }}>
      <TagChip label="React"     variant="brand" />
      <TagChip label="TypeScript" variant="default" />
    </div>
  }
  code={`import { TagChip } from "@brickslab/ui-web";

<TagChip label="BricksLab" variant="brand" />`}
/>