Installation

Hexagone UI s’installe avec la CLI shadcn standard — aucun outil propriétaire. Quelques minutes pour avoir une carte IGN dans votre app.

Un projet React 18/19 (Next.js recommandé) avec :

Si ce n’est pas déjà fait, initialisez shadcn dans votre projet :

npx shadcn@latest init

Ajoutez les registries @geekles (et @geekles-pro si vous êtes abonné) à votre components.json. Le détail complet est sur la page components.json :

{
  "registries": {
    "@geekles": "https://ui.geekles.dev/r/{name}.json",
    "@geekles-pro": {
      "url": "https://ui.geekles.dev/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${GEEKLES_API_KEY}" }
    }
  }
}

Installez votre premier composant — le code atterrit dans votre projet :

npx shadcn add @geekles/map-fr

Les dépendances peer (maplibre-gl, etc.) sont installées automatiquement.

Pour les composants @geekles-pro, exposez votre clé dans l’environnement avant l’add — elle ne touche jamais votre repo :

GEEKLES_API_KEY=geekles_live_xxx

npx shadcn add @geekles-pro/cadastre-layer

Importez le composant copié et affichez une carte :

import { MapFR, AddressSearch } from "@/components/map-fr"

export default function Page() {
  return (
    <MapFR basemap="plan-ign" center={[2.35, 48.85]} zoom={12}>
      <AddressSearch onSelect={(r) => console.log(r.citycode)} />
    </MapFR>
  )
}