Pular para o conteúdo
FireCMS Logo FireCMS

FireCMS UI

FireCMS UI é um conjunto de componentes de alta qualidade que você pode usar para construir suas próprias views personalizadas. Você pode use esses componentes para construir suas próprias views do FireCMS, ou em qualquer outra aplicação React. Você só precisa instalar o tailwindcss e o pacote @firecms/ui.

Os componentes são construídos principalmente usando primitivas Radix UI e tailwindcss. Isso significa que você pode personalizá-los facilmente usando classes tailwindcss ou substituir os estilos usando CSS.

A lista de componentes inclui:

e mais (veja a barra lateral para a lista completa).

Instalação

Seção intitulada “Instalação”

Se você está usando o FireCMS, não precisa instalar este pacote, pois ele já está incluído, e configurado para você.

Para usar os componentes no seu projeto, você precisa instalar o pacote @firecms/ui:

yarn add @firecms/ui

or

npm install @firecms/ui

Você também precisa instalar o tailwindcss:

npm install tailwindcss @tailwindcss/typography

or

yarn add tailwindcss @tailwindcss/typography

E inicialize no seu projeto:

npx tailwindcss init

E adicione o preset do FireCMS no seu 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}"
    ]
};

(Talvez seja necessário ajustar os caminhos no array content para corresponder à estrutura do seu projeto)

Finalmente, você precisa definir suas cores primária e secundária no seu arquivo index.css:

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


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


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