BricksLab Catalog

@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

GitHub Démo live npm

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

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Titre du projet ou de l'élément décrit.
`description`	`string`	—	✓	Description détaillée du projet.
`tags`	`string[]`	—	—	Liste de tags ou technologies associés au projet.
`links`	`ProjectLink[]`	—	—	Liens externes associés au projet (ex. : GitHub, démo en ligne). Chaque item contient un label et un href.

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" },
  ]}
/>