Configuration

Fluid config file

To start configuring Fluid UI, you will need to create a fluid.config.js, or alternatively a fluid.config.mjs file in your project's top-level directory. Within this file you must export a single object with your configuration options. Optionally you can annotate your export with type definitions to have autocomplete suggestions when writing your configuration.

fluid.config.js

1 
2 
/** @type {import('@infinityfx/fluid').FluidConfig} */
module.exports = {}

Working directories

Fluid will include the necessary styles based on the components you are using in your project. Fluid will look for these components within your project. Which files Fluid will check can be configured using the paths option. Here you can specify an array of glob patterns. Below is the default configuration when the paths option is omitted.

fluid.config.js

1 
2 
3 
4 
5 
6 
7 
8 
module.exports = {
    paths: [
        './src/**/*.{jsx,tsx}',
        './app/**/*.{jsx,tsx}',
        './pages/**/*.{jsx,tsx}',
        './components/**/*.{jsx,tsx}'
    ],
}

Compilation output

Fluid UI compiles component styles during built time to allow for tree-shaking and no runtime overhead. By default the resulting compiled styles are outputed and included automatically. However, some framworks, like NextJS, have caching strategies that do not work well with this approach. This could cause outdated styles to be included in your production build. Therefore, it is recommended to switch to manual output for these cases. Fluid UI will then output a fluid.css file it the root directory of your project. You can then include this file according to your framework specific guidelines.

fluid.config.js

1 
2 
3 
module.exports = {
    cssOutput: 'manual'
}

Theming

Fluid supports customizing color palettes, spacings, radii, fonts and breakpoints. These can all be configured using the theme option.

fluid.config.js

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
module.exports = {
    theme: {
        palettes: { .. },
        defaultColorScheme: 'light',
        spacing: { .. },
        radius: { .. },
        font: {
            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue"',
            size: { .. }
        },
        breakpoints: { .. }
    }
}

For a complete guide on theming Fluid UI check out the Theming documentation.

Custom icons

Fluid allows you to customize the icons used throughout various components, using different icon libraries, such as react-icons. You can import the icons you want directly from your config file and these will get bundled automatically during compilation. The configuration below shows all icons that can be customized, as well as the default icon that is used.

fluid.config.js

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
const { LuArrowDownWideNarrow, LuArrowUpDown, LuArrowUpNarrowWide, LuCheck, LuChevronDown, LuChevronFirst, LuChevronLast, LuChevronLeft, LuChevronRight, LuChevronUp, LuChevronsUpDown, LuCopy, LuEye, LuEyeOff, LuFileUp, LuMinus, LuMoon, LuMoreVertical, LuPanelLeftClose, LuPanelLeftOpen, LuPlus, LuSearch, LuSun, LuX } = require('react-icons/lu');

module.exports = {
    icons: {
        add: LuPlus,
        check: LuCheck,
        close: LuX,
        collapseUp: LuChevronUp,
        collapseSidebar: LuPanelLeftClose,
        copy: LuCopy,
        dark: LuMoon,
        down: LuChevronDown,
        expand: LuChevronsUpDown,
        expandDown: LuChevronDown,
        expandSidebar: LuPanelLeftOpen,
        first: LuChevronFirst,
        hide: LuEyeOff,
        last: LuChevronLast,
        left: LuChevronLeft,
        light: LuSun,
        more: LuMoreVertical,
        search: LuSearch,
        show: LuEye,
        sort: LuArrowUpDown,
        sortAscend: LuArrowUpNarrowWide,
        sortDescend: LuArrowDownWideNarrow,
        up: LuChevronUp,
        upload: LuFileUp,
        remove: LuMinus,
        right: LuChevronRight
    }
}