Installation

Prerequisites

NPM Installation

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

npm install fluxo-ui

yarn add fluxo-ui

pnpm add fluxo-ui

Setup

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;

Theming & Dark Mode

Components render in the default blue palette out of the box. To switch to another brand theme, import that theme's CSS once at your app entry, then add the matching class to the body element. Each theme is a separate import, so only the theme you actually use is bundled.

import 'fluxo-ui/themes/purple';

document.body.classList.add('theme-purple');

Available themes

Dark mode

Add the mode-dark class to the body element. It works with or without a brand theme — no extra import is needed because dark-mode tokens ship with every component.

document.body.classList.add('theme-purple', 'mode-dark');

Loading every theme (theme switcher)

If you let users switch themes at runtime, import the all-themes bundle once instead of an individual theme:

import 'fluxo-ui/styles';

TypeScript Support

// 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

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

Next Steps

Troubleshooting

import 'fluxo-ui/themes/purple';

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