Elements

Les éléments sont les composants de base de notre bibliothèque d'interface utilisateur. Ils constituent la fondation de toutes les interfaces que vous créerez avec Brikl.

Types d'éléments

Boutons

Composants interactifs pour déclencher des actions et naviguer dans l'application.

Inputs

Champs de saisie pour collecter les données utilisateur de manière intuitive.

Dropdowns

Menus déroulants pour organiser les options et les actions disponibles.

Principes de design

Tous nos éléments suivent des principes de design cohérents :

• Cohérence visuelle : Styles uniformes à travers tous les composants
• Accessibilité : Respect des standards WCAG 2.1
• Responsive : Adaptation automatique à tous les écrans
• Performance : Optimisation pour des temps de chargement rapides

Utilisation

Import des éléments

import { Button, Input, Dropdown } from '@brikl/ui';

Exemple d'utilisation

import { Button, Input, Dropdown } from '@brikl/ui';

export default function FormExample() {
  return (
    <div className="space-y-4">
      <Input placeholder="Votre nom" />
      <Dropdown
        options={[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' }
        ]}
      />
      <Button variant="primary">Soumettre</Button>
    </div>
  );
}

Personnalisation

Chaque élément peut être personnalisé avec :

• Variantes : Différents styles (primary, secondary, danger, etc.)
• Tailles : Plusieurs tailles disponibles (sm, md, lg)
• États : Normal, hover, focus, disabled
• Classes CSS : Personnalisation avancée avec Tailwind

Prochaines étapes

• Boutons
• Inputs
• Dropdowns