Brickslab.Toolsv2.1.1

@brickslab./ui-web

Panneau de présentation d'un projet avec titre, description, tags et liens externes. Utilisé dans les portfolios, pages de documentation ou dashboards pour afficher les métadonnées d'un projet.

Aperçu

panneau complet — titre, description, tags et liens

BricksLab UI

Bibliothèque de composants React pour construire des interfaces modernes et cohérentes. Basée sur des tokens CSS et optimisée pour Next.js App Router.

ReactTypeScriptNext.jsDesign SystemCSS Tokens
GitHubDémo livenpm

sans tags ni liens

Catalog BricksLab

Site de documentation interactif présentant tous les composants de la bibliothèque UI avec leurs variantes, props et exemples d'utilisation.

avec tags uniquement

tags sans liens

Design Tokens

Système de variables CSS centralisé pour gérer les couleurs, espacements, rayons de bordure et typographie de façon cohérente.

CSS VariablesTokensThèmesDark Mode

Props

PropTypeDéfautRequisDescription
titlestring—✓Titre du projet ou de l'élément décrit.
descriptionstring—✓Description détaillée du projet.
tagsstring[]——Liste de tags ou technologies associés au projet.
linksProjectLink[]——Liens externes associés au projet (ex. : GitHub, démo en ligne). Chaque item contient un label et un href.
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
  title="..."
  description="..."
  tags="..."
  links={[]}
/>
titledescriptiontagslinks
Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    description="Votre sous-titre"
  />
</div>

Utilisation

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

<ProjectDescriptionPanel
  title="BricksLab UI"
  description="Bibliothèque de composants React pour construire des interfaces modernes et cohérentes. Basée sur des tokens CSS et optimisée pour Next.js App Router."
  tags={["React", "TypeScript", "Next.js", "Design System"]}
  links={[
    { label: "GitHub",      href: "https://github.com/brickslab/ui" },
    { label: "Démo live",   href: "https://brickslab.io/catalog" },
    { label: "npm",         href: "https://npmjs.com/package/@brickslab./ui-web" },
  ]}
/>