FireCMS UI

FireCMS UI is a high quality set of components that you can use to build your own custom views. You can use these components to build your own FireCMS views, or in any other React application. You just need to install tailwindcss and the @firecms/ui package.

The components are primarily built using Radix UI primitives and tailwindcss. This means that you can easily customize them using tailwindcss classes or override the styles using CSS.

The list of components includes:

and more (check the sidebar for the full list).

Installation

If you are using FireCMS, you don’t need to install this package, as it is already included, and configured for you.

To use the components in your own project, you need to install the @firecms/ui package:

yarn add @firecms/ui

npm install @firecms/ui

You also need to install tailwindcss:

npm install tailwindcss @tailwindcss/typography

yarn add tailwindcss @tailwindcss/typography

And initialize it in your project:

npx tailwindcss init

And add then add the fireCMS preset in your 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}"
    ]
};

(You might need to adjust the paths in the content array to match your project structure)

Finally, you need to define your primary and secondary colors in your index.css file:

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

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

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