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. FluidProvider is a polymorphic component, meaning it will render as a wrapper element. This wrapper element receives all the attributes needed to supply it's children with the selected theme data. By default, FluidProvider renders as an HTML <body> element, meaning it should be used in place of your normal <body> tag. If your framework, however, does not allow you to manually render a <body> tag, you can use the as prop to render the FluidProvider as a different element, such as a <div>.

app/layout.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
import { FluidProvider } from '@infinityfx/fluid';
            
export default function RootLayout({ children }: { children: React.ReactNode; }) {
    
    return <html>
        <FluidProvider>
            {children}
        </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 && ..."
}
...