UI Wire

The UI wire (@fluxkitdev/ui) provides pre-built React components, a theming system, and hooks that integrate with all FluxKit backend wires. Unlike other wires, the UI wire is a frontend-only package and does not expose a REST API.

Installation

npm install @fluxkitdev/ui

Peer dependencies:

npm install react react-dom

Quick Start

import { FluxKitProvider, LoginForm, useAuth } from "@fluxkitdev/ui";

function App() {
  return (
    <FluxKitProvider apiUrl="http://localhost:3000">
      <MyApp />
    </FluxKitProvider>
  );
}

function MyApp() {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!user) return <LoginForm />;

  return <div>Welcome, {user.name}!</div>;
}

Features

Feature	Description
Components	Ready-to-use auth, payment, and data components
Theming	Customizable design tokens and dark mode
Hooks	React hooks for all FluxKit wires

The FluxKitProvider

Wrap your application with FluxKitProvider to configure the API connection:

import { FluxKitProvider } from "@fluxkitdev/ui";

function App() {
  return (
    <FluxKitProvider
      apiUrl="http://localhost:3000"
      theme={{
        primaryColor: "#6366f1",
        borderRadius: "8px",
        fontFamily: "Inter, sans-serif",
      }}
    >
      {children}
    </FluxKitProvider>
  );
}

Provider Props

Prop	Type	Required	Description
apiUrl	string	Yes	FluxKit backend URL
theme	ThemeConfig	No	Custom theme overrides
authToken	string	No	Initial auth token
onAuthChange	(token) => void	No	Token change callback

Architecture

The UI wire communicates with your FluxKit backend via REST API calls:

┌────────────────────┐      HTTP      ┌────────────────────┐
│   React Frontend   │  ◄──────────►  │  FluxKit Backend   │
│   @fluxkitdev/ui   │               │  @fluxkitdev/core  │
│                    │               │  + auth, store...  │
│  Components        │               │                    │
│  Hooks             │               │  REST APIs         │
│  Theme             │               │  MongoDB           │
└────────────────────┘               └────────────────────┘

All API calls are handled internally by the hooks and components. You can also make direct API calls using the useApi hook.