Getting started

Installing

1 
npm install @infinityfx/fluid

Adding the Fluid provider

You have to wrap your application with the FluidProvider in order for all components to be styled correctly and theming to work.

app/layout.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
import { FluidProvider } from '@infinityfx/fluid';
            
export default function RootLayout({ children }: { children: React.ReactNode; }) {
    
    return <html>
        <FluidProvider>
            <body>
                {children}
            </body>
        </FluidProvider>
    </html>;
}

Compilation

Before running your application you first have to compile all component styles to css.

1 
npx fluid compile

Optionally you can pass the -d flag to prevent styles from being tree-shaken. This is useful during development when you are actively adding new components, that will otherwise have missing styles. This should, however, not be used in production builds, as this will include all styles, leading to a larger bundle size.

1 
npx fluid compile -d

You can prepend this command to your package.json scripts to do this automatically.

package.json

1 
2 
3 
4 
5 
6 
...
"scripts": {
    "dev": "npx fluid compile -d && ...",
    "build": "npx fluid compile && ..."
}
...