Brickslab.

@brickslab/ui-web

Carte de catalogue pour présenter un composant dans une grille. Affiche nom, section, description et un badge de plateforme. Accepte un slot preview pour un aperçu live. L'effet hover (border brand + élévation) est géré en CSS pur via data-attribute.

Sans preview

affichage minimal — label · section · description · type

Button
web
UI Controls

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

Badge
web
UI Controls

Compact non-interactive indicator for statuses, counts and labels.

ProgressBar
web
UI Controls

Horizontal progress bar with 4 color schemes and 2 sizes.

Type de plateforme

prop type — "web" (défaut) · "mobile"

web
Tabs
web
UI Controls

Controlled tab navigation.

mobile
BottomSheet
mobile
Layout

Mobile bottom sheet with snap points.

Avec preview slot

prop preview — aperçu live du composant

DefaultInfoSuccessWarningError
Badge
web
UI Controls

Compact non-interactive indicator.

info · warning · tip · danger
Callout
web
UI Controls

Inline contextual message block for documentation.

Props

PropTypeDéfautRequisDescription
labelstring——Nom du composant affiché en titre de la carte.
sectionstring——Section parente affichée en sous-titre (ex: "UI Controls").
descriptionstring——Description courte du composant.
hrefstring——URL de destination au clic sur la carte.
type"web" | "mobile""web"—Badge de plateforme affiché en haut à droite.
previewReact.ReactNode——Slot optionnel pour afficher un aperçu live du composant dans la carte.

Utilisation

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

// Basique
<ComponentCard
  label="Button"
  section="UI Controls"
  description="Versatile action button with 4 variants, sizes, icons and loading state."
  href="/components/button"
/>

// Avec type mobile
<ComponentCard
  label="BottomSheet"
  section="Layout"
  description="Mobile bottom sheet with snap points."
  href="/components/bottomsheet"
  type="mobile"
/>

// Avec preview slot
<ComponentCard
  label="Badge"
  section="UI Controls"
  description="Compact non-interactive indicator for statuses and counts."
  href="/components/badge"
  preview={<Badge variant="info">Info</Badge>}
/>

// Grille de composants
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
  {components.map((c) => (
    <ComponentCard key={c.href} {...c} />
  ))}
</div>