Installation

Get started with Fluxo UI in your React project

Prerequisites

Before installing Fluxo UI, make sure you have the following:

React 16.8+ or React 17+
TypeScript 4.0+ (recommended)

NPM Installation

Install Fluxo UI using your preferred package manager. View the package on npm.

npm

npm install fluxo-ui

yarn

yarn add fluxo-ui

pnpm

pnpm add fluxo-ui

Setup

1. Import CSS Styles

Import the component styles in your main CSS file or at the root of your application:

// In your main CSS file (e.g., index.css or App.css)
@import 'fluxo-ui/styles';

// Or import directly in your entry point (main.tsx / index.tsx)
import 'fluxo-ui/styles';

2. Wrap with ThemeProvider

Wrap your application with the ThemeProvider to ensure consistent theming:

import React from 'react';
import { ThemeProvider } from 'fluxo-ui';
import App from './App';

function Root() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

export default Root;

3. Start Using Components

Import and use components in your React application:

import React, { useState } from 'react';
import { Button, TextInput, Checkbox } from 'fluxo-ui';

function MyForm() {
  const [name, setName] = useState('');
  const [agreed, setAgreed] = useState(false);

  return (
    <div>
      <TextInput
        label="Full Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />

      <Checkbox
        checked={agreed}
        onChange={(e) => setAgreed(e.target.checked)}
        label="I agree to the terms and conditions"
      />

      <Button
        variant="primary"
        disabled={!name || !agreed}
        onClick={() => console.log('Submit')}
      >
        Submit
      </Button>
    </div>
  );
}

export default MyForm;

TypeScript Support

Fluxo UI is built with TypeScript and provides complete type definitions out of the box. No additional @types packages are needed.

// All components are fully typed
import { Button, ButtonProps } from 'fluxo-ui';

// Props are strongly typed with IntelliSense support
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

AI / MCP Integration

Built-in

Fluxo UI ships with an MCP server bundled inside the package — so Claude Code, GitHub Copilot, Cursor, and any other AI assistant can write correct Fluxo UI code on the first try. No extra install, no separate package.

Enable it in Claude Code with one command:

claude mcp add fluxo-ui -- npx fluxo-ui-mcp

Full guide for Claude Code, Copilot, Cursor & more →

Next Steps

Explore Components

Browse through all available components and their documentation.

View Components →

Customization

Learn how to customize themes and styling to match your brand.

Theming Guide →

Troubleshooting

Styles not loading?

Make sure you've imported the CSS file and that your bundler is configured to handle CSS imports.

import 'fluxo-ui/styles';

TypeScript errors?

Ensure your TypeScript version is 4.0+ and your tsconfig.json includes:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx"
  }
}