Salta ai contenuti
FireCMS Logo FireCMS

FireCMS UI

FireCMS UI è un set di componenti di alta qualità che puoi usare per costruire le tue viste personalizzate. Puoi usa questi componenti per costruire le tue view di FireCMS, o in qualsiasi altra applicazione React. Devi solo installare tailwindcss e il pacchetto @firecms/ui.

I componenti sono costruiti principalmente usando primitive Radix UI e tailwindcss. Questo significa che puoi personalizzarli facilmente usando classi tailwindcss o sovrascrivere gli stili usando CSS.

La lista dei componenti include:

e altro (consulta la barra laterale per l’elenco completo).

Installazione

Sezione intitolata “Installazione”

Se stai usando FireCMS, non devi installare questo pacchetto, poiché è già incluso, e configurato per te.

Per usare i componenti nel tuo progetto, devi installare il pacchetto @firecms/ui:

yarn add @firecms/ui

or

npm install @firecms/ui

Devi anche installare tailwindcss:

npm install tailwindcss @tailwindcss/typography

or

yarn add tailwindcss @tailwindcss/typography

E inizializzalo nel tuo progetto:

npx tailwindcss init

E aggiungi il preset di FireCMS nel tuo 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}"
    ]
};

(Potrebbe essere necessario adattare i percorsi nell’array content alla struttura del tuo progetto)

Infine, devi definire i tuoi colori primario e secondario nel file index.css:

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


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


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