Skip to main content
This guide will help you install and set up the FlowX.AI React UI Toolkit in your React application.

​
Prerequisites

Before installing the React UI Toolkit, ensure you have:
  • Node.js 16.x or higher
  • React 18.x or higher
  • A package manager (npm, yarn, or pnpm)

​
Install the package

Install the FlowX.AI React UI Toolkit using your preferred package manager: 
npm install @flowx/react-ui-toolkit

​
Import components

Once installed, you can import components directly from the package: 
import { FlxButton, FlxCard, FlxIcon } from '@flowx/react-ui-toolkit';

function App() {
  return (
    <FlxCard cardStyle="raised">
      <FlxButton variant="fill">Click me</FlxButton>
    </FlxCard>
  );
}

​
Import styles

The React UI Toolkit requires CSS styles to be imported. Add the following import to your application entry point (e.g., main.tsx or App.tsx): 
import '@flowx/react-ui-toolkit/styles.css';
Make sure to import the styles before your custom CSS to allow for easier overrides.

​
TypeScript configuration

If you’re using TypeScript, the package includes type definitions out of the box. No additional configuration is needed. Your tsconfig.json should include: 
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "bundler",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true
  }
}

​
Bundle configuration

​
Vite

If you’re using Vite, ensure your vite.config.ts includes React plugin: 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

​
Webpack

For Webpack-based projects, ensure you have the necessary loaders for CSS and SVG: 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

​
Verify installation

Create a simple test component to verify the installation: 
import { FlxButton } from '@flowx/react-ui-toolkit';
import '@flowx/react-ui-toolkit/styles.css';

function TestComponent() {
  return (
    <FlxButton 
      variant="fill" 
      onClick={() => alert('Installation successful!')}
    >
      Test Button
    </FlxButton>
  );
}

export default TestComponent;
If the button renders with proper styling, your installation is complete.

​
Next steps

Now that you have the React UI Toolkit installed, explore the component documentation:
  • Button - Learn about button variants and usage
  • Card - Build card layouts
  • Chat - Implement chat interfaces
  • Form components - Build forms with inputs and controls

Build docs developers (and LLMs) love

Get started for freeTalk to us