Brickslab.

@brickslab/ui-web

Section de présentation de composant avec titre, description et zone de preview encadrée. Idéale pour documenter et showcaser des composants individuels dans une structure cohérente.

Aperçu

Présentation simple

TextInput

Champ de saisie de texte avec support des variantes et états.

Avec contenu enfant (children)

Badge

Élément d'étiquette compacte pour signaler des statuts.

Active
💡 Ce badge est un exemple simple. Vous pouvez combiner plusieurs variantes avec différentes couleurs et tailles.

Plusieurs éléments en preview (grid)

Button States

Les différents états d'un bouton.

Props

PropTypeDéfautRequisDescription
namestring—✓Nom du composant à présenter.
descriptionstring—✓Description ou explications du composant.
previewReact.ReactNode—✓Contenu à afficher dans la zone de prévisualisation (composant ou rendu).
childrenReact.ReactNode——Contenu optionnel supplémentaire (documentation, props table, etc.) affiché sous la preview.

Utilisation

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

export function MyComponentPresentation() {
  return (
    <ComponentPresentationSection
      name="MyComponent"
      description="Brève description du composant et ses cas d'usage."
      preview={<MyComponent />}
    >
      {/* Contenu optionnel: PropsTable, CodeBlock, etc. */}
      <PropsTable props={myProps} />
    </ComponentPresentationSection>
  );
}

Notes

ComponentPresentationSection est un wrapper de présentation idéal pour documenter les composants dans le catalogue. La prop children permet d'ajouter du contenu supplémentaire sous la preview (description, code, props, etc.).