FireCMS UI

Astuce

Tous les composants sont exportés depuis le package @firecms/ui. Ce sont les mêmes composants utilisés en interne dans FireCMS.

FireCMS UI est un ensemble de composants de haute qualité que vous pouvez utiliser pour construire vos propres vues personnalisées. Vous pouvez utiliser ces composants pour construire vos propres vues FireCMS, ou dans n’importe quelle autre application React. Vous avez juste besoin d’installer tailwindcss et le package @firecms/ui.

Pourquoi construire ce kit UI ?

FireCMS utilisait MUI jusqu’à la version 3.0. MUI fournit des composants prêts à l’emploi avec des APIs intuitives, mais il vient aussi avec beaucoup de complexité et de surcharge. Nous voulions construire un kit UI plus simple et plus flexible qui pouvait être utilisé dans n’importe quel projet React, pas seulement dans FireCMS. Nous voulions aussi faciliter la transition de MUI vers notre nouveau kit UI, donc nous avons gardé l’API aussi similaire que possible. Le résultat est un ensemble de composants faciles à utiliser, faciles à personnaliser, beaucoup plus performants et avec une taille de bundle plus petite.

Les composants sont principalement construits en utilisant les primitives Radix UI et tailwindcss. Cela signifie que vous pouvez facilement les personnaliser en utilisant des classes tailwindcss ou en remplaçant les styles avec du CSS.

Note

Si vous avez des questions, n’hésitez pas à nous rejoindre sur notre canal Discord.

La liste des composants inclut :

et plus encore (consultez la barre latérale pour la liste complète).

Installation

Si vous utilisez FireCMS, vous n’avez pas besoin d’installer ce package, car il est déjà inclus et configuré pour vous.

Pour utiliser les composants dans votre propre projet, vous devez installer le package @firecms/ui :

yarn add @firecms/ui

ou

npm install @firecms/ui

Vous devez aussi installer tailwindcss :

npm install tailwindcss @tailwindcss/typography

ou

yarn add tailwindcss @tailwindcss/typography

Et l’initialiser dans votre projet :

npx tailwindcss init

Puis ajoutez le preset FireCMS dans votre tailwind.config.js :

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
    ]
};

(Vous devrez peut-être ajuster les chemins dans le tableau content pour correspondre à la structure de votre projet)

Enfin, vous devez définir vos couleurs primaire et secondaire dans votre fichier index.css :

@import "@firecms/ui/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-primary: #0070F4;
    --color-secondary: #FF5B79;
}