@brickslab./ui-web

En-tête standard pour les pages de documentation de composants. Affiche le nom en h1, une description, un badge package monospace et des badges supplémentaires configurables. Utilisé par ComponentHeader dans PageSection.tsx.

Minimal

name + description uniquement

Button

Versatile action button with 4 variants, sizes, icons and loading state.

Avec packageName

prop packageName — badge monospace brand

Button

@brickslab./ui-web

Versatile action button with 4 variants, sizes, icons and loading state.

Avec badges supplémentaires

prop badges — variantes default · brand · success · warning · error

success + default

Tabs

@brickslab./ui-webStablev0.1.0

Controlled tab navigation with underline, pills and boxed variants.

warning

BottomSheet

@brickslab/ui-mobileReact NativeBeta

Mobile bottom sheet with configurable snap points.

Props

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	—	Nom du composant affiché en h1.
`description`	`string`	—	—	Description courte affichée sous le titre (max 640px).
`packageName`	`string`	—	—	Nom du package affiché en badge monospace (ex: @brickslab./ui-web).
`badges`	`Array<{ label: string; variant?: DocPageHeaderBadgeVariant }>`	—	—	Badges supplémentaires — variantes: default · brand · success · warning · error.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  name="..."
  description="..."
  packageName="..."
  badges="..."
/>

namedescriptionpackageNamebadges

Utilisation

tsx

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

// Minimal
<DocPageHeader
  name="Button"
  description="Versatile action button with 4 variants, sizes, icons and loading state."
/>

// Avec package
<DocPageHeader
  name="Button"
  description="Versatile action button with 4 variants, sizes, icons and loading state."
  packageName="@brickslab./ui-web"
/>

// Avec badges supplémentaires
<DocPageHeader
  name="BottomSheet"
  description="Mobile bottom sheet with configurable snap points."
  packageName="@brickslab/ui-mobile"
  badges={[
    { label: "React Native", variant: "default" },
    { label: "Beta", variant: "warning" },
  ]}
/>