Brickslab.

@brickslab/ui-web

Section de présentation des fonctionnalités en grille. Supporte un titre de section, sous-titre et de 2 à 4 colonnes. Chaque fonctionnalité peut avoir une icône, un titre et une description.

Aperçu

6 fonctionnalités — 3 colonnes avec titre de section

Pourquoi BricksLab ?

Une bibliothèque de composants pensée pour la vitesse, la cohérence et l'accessibilité.

Composants prêts à l'emploi
Plus de 30 composants React documentés, testés et prêts à intégrer dans votre projet.
Tokens CSS centralisés
Système de design cohérent basé sur des variables CSS pour les couleurs, espacements et typographie.
Next.js App Router
Optimisé pour Next.js 14+ avec support Server Components et Client Components.
TypeScript natif
Types complets et PropDefs documentées pour une expérience développeur optimale.
Accessibilité ARIA
Attributs ARIA automatiques, navigation clavier et contraste conforme WCAG 2.1.
Thèmes personnalisables
Surcharge simple des tokens CSS pour adapter la bibliothèque à votre charte graphique.

2 colonnes

Composants prêts à l'emploi
Plus de 30 composants React documentés, testés et prêts à intégrer dans votre projet.
Tokens CSS centralisés
Système de design cohérent basé sur des variables CSS pour les couleurs, espacements et typographie.
Next.js App Router
Optimisé pour Next.js 14+ avec support Server Components et Client Components.
TypeScript natif
Types complets et PropDefs documentées pour une expérience développeur optimale.

4 colonnes

Composants prêts à l'emploi
Plus de 30 composants React documentés, testés et prêts à intégrer dans votre projet.
Tokens CSS centralisés
Système de design cohérent basé sur des variables CSS pour les couleurs, espacements et typographie.
Next.js App Router
Optimisé pour Next.js 14+ avec support Server Components et Client Components.
TypeScript natif
Types complets et PropDefs documentées pour une expérience développeur optimale.
Accessibilité ARIA
Attributs ARIA automatiques, navigation clavier et contraste conforme WCAG 2.1.
Thèmes personnalisables
Surcharge simple des tokens CSS pour adapter la bibliothèque à votre charte graphique.

Props

PropTypeDéfautRequisDescription
featuresFeature[]—✓Liste des fonctionnalités à afficher. Chaque item contient un title, une description et une icône optionnelle.
titlestring——Titre optionnel de la section de fonctionnalités.
subtitlestring——Sous-titre optionnel affiché sous le titre de section.
columns2 | 3 | 43—Nombre de colonnes dans la grille des fonctionnalités.

Utilisation

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

<FeatureListSection
  title="Pourquoi BricksLab ?"
  subtitle="Une bibliothèque pensée pour la vitesse et la cohérence."
  features={[
    {
      title: "Composants prêts à l'emploi",
      description: "Plus de 30 composants documentés et testés.",
    },
    {
      title: "TypeScript natif",
      description: "Types complets pour une DX optimale.",
    },
    {
      title: "Accessibilité ARIA",
      description: "Conformité WCAG 2.1 intégrée.",
    },
  ]}
  columns={3}
/>