Flux UI for React

An early, experimental preview of Flux UI for React by Caleb Porzio. This release includes a working Button component. APIs and styling may change; this is not the complete Flux component library.

Install

npm install @fluxui-dev/react@alpha

Requires React 19. Import the stylesheet once in your application entry point:

import * as Flux from '@fluxui-dev/react';
import '@fluxui-dev/react/styles.css';

export function SaveButton() {
    return <Flux.Button variant="primary" onClick={() => alert('Saved!')}>Save</Flux.Button>;
}

Button accepts native button props, including onClick, disabled, type, className, and ref.

• variant: outline (default), primary, or ghost.
• size: base (default), sm, or xs.
• loading: shows a spinner, preserves the accessible label, and disables the button.
• type: defaults to button; use submit for form submission.

Add a dark class to an ancestor to enable dark mode. Set --flux-accent and --flux-accent-foreground to customize primary buttons. The CSS uses the flux cascade layer and needs no Tailwind setup.

Inertia

Use the button with your existing Inertia form. Pass its processing state explicitly in this preview:

<Form action="/profile" method="patch">
    {({ processing }) => (
        <Flux.Button type="submit" variant="primary" loading={processing}>
            Save
        </Flux.Button>
    )}
</Form>

License

Copyright Caleb Porzio. All rights reserved. This preview does not establish the licensing terms of a future Flux React release.