Aller au contenu

Guide d'intégration

Démarrage rapide

Installez le Design System Sentropic dans votre application en Svelte, React ou Vue.

Prérequis

Node.js 18+ et npm 9+. Le DS est publié en ESM avec des déclarations TypeScript.

Choisissez le package correspondant à votre framework :

Svelte v5
@sentropic/design-system-svelte
React 18+
@sentropic/design-system-react
Vue 3
@sentropic/design-system-vue

Svelte

Installation

npm install @sentropic/design-system-svelte @sentropic/design-system-themes

Utilisation

Importez le CSS une fois au niveau racine, puis utilisez les composants dans vos fichiers Svelte.

<!-- App.svelte ou +layout.svelte -->
<script>
  import { ThemeProvider, Button, Card } from "@sentropic/design-system-svelte";
  import "@sentropic/design-system-svelte/styles.css";
</script>

<ThemeProvider>
  <Card>
    <Button>Action</Button>
  </Card>
</ThemeProvider>

React

Installation

npm install @sentropic/design-system-react @sentropic/design-system-themes

Utilisation

// main.tsx
import { ThemeProvider, Button, Card } from "@sentropic/design-system-react";
import "@sentropic/design-system-react/styles.css";

export function App() {
  return (
    <ThemeProvider>
      <Card>
        <Button>Action</Button>
      </Card>
    </ThemeProvider>
  );
}

Vue

Installation

npm install @sentropic/design-system-vue @sentropic/design-system-themes

Utilisation

<!-- App.vue -->
<script setup>
import { ThemeProvider, Button, Card } from "@sentropic/design-system-vue";
import "@sentropic/design-system-vue/styles.css";
</script>

<template>
  <ThemeProvider>
    <Card>
      <Button>Action</Button>
    </Card>
  </ThemeProvider>
</template>

Thèmes

Par défaut, ThemeProvider applique le thème Sent Tech. Vous pouvez surcharger avec n'importe quel thème du package :

import { canadaTheme } from "@sentropic/design-system-theme-canada";
import { dsfrTheme } from "@sentropic/design-system-theme-dsfr";
import { quebecTheme } from "@sentropic/design-system-theme-quebec";

// Passer le thème comme prop :
// <ThemeProvider theme={canadaTheme}>

Les thèmes disponibles : Sent Tech (défaut), DSFR (France), Canada, Québec.

Étapes suivantes