Skip to main content

Components

The UI wire provides ready-to-use React components for common features.

Authentication Components​

LoginForm​

A complete login form with email/password and optional OAuth buttons.

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

function LoginPage() {
  return (
    <LoginForm
      onSuccess={(user) => console.log("Logged in:", user)}
      onError={(err) => console.error(err)}
      providers={["google", "github"]}  // OAuth buttons
      showMagicLink                      // Enable magic link option
    />
  );
}

Props​

PropTypeDefaultDescription
onSuccess(user) => void--Called after successful login
onError(error) => void--Called on login error
providersstring[][]OAuth provider buttons to show
showMagicLinkbooleanfalseShow magic link option
showRegisterbooleantrueShow "create account" link
redirectUrlstring--Redirect after login

RegisterForm​

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

<RegisterForm
  onSuccess={(user) => navigate("/dashboard")}
  fields={["name", "email", "password"]}
/>

UserMenu​

A dropdown menu showing the current user with logout option.

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

<UserMenu
  showAvatar
  items={[
    { label: "Profile", onClick: () => navigate("/profile") },
    { label: "Settings", onClick: () => navigate("/settings") },
  ]}
/>

Data Components​

DataTable​

A sortable, filterable table connected to a FluxKit CRUD collection.

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

<DataTable
  collection="products"
  columns={[
    { key: "name", label: "Name", sortable: true },
    { key: "price", label: "Price", sortable: true, format: "currency" },
    { key: "createdAt", label: "Created", format: "date" },
  ]}
  pageSize={20}
  searchable
  onRowClick={(item) => navigate(`/products/${item._id}`)}
/>

FileUpload​

A drag-and-drop file upload component.

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

<FileUpload
  accept={["image/*", "application/pdf"]}
  maxSize="10mb"
  onUpload={(file) => console.log("Uploaded:", file.url)}
  multiple
/>

Payment Components​

CheckoutButton​

A button that creates a Stripe checkout session and redirects.

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

<CheckoutButton
  items={[{ name: "Pro Plan", amount: 2999, currency: "usd" }]}
  onSuccess={(session) => console.log("Checkout started")}
>
  Upgrade to Pro
</CheckoutButton>

PaymentForm​

An embedded payment form using Stripe Elements.

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

<PaymentForm
  amount={2999}
  currency="usd"
  onSuccess={(result) => console.log("Paid!")}
  onError={(err) => console.error(err)}
/>

Layout Components​

Container​

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

<Container maxWidth="lg" padding="md">
  <h1>My App</h1>
</Container>

Card​

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

<Card title="Statistics" subtitle="Last 30 days">
  <p>Revenue: $1,234</p>
</Card>

Button​

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

<Button variant="primary" size="lg" loading={isLoading}>
  Submit
</Button>

Form Components​

Input, Select, Textarea​

import { Input, Select, Textarea } from "@fluxkitdev/ui";

<Input label="Email" type="email" required />
<Select label="Role" options={["Admin", "User", "Viewer"]} />
<Textarea label="Description" rows={4} />

Notification Components​

Toast​

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

function MyComponent() {
  const toast = useToast();

  return (
    <button onClick={() => toast.success("Item saved!")}>
      Save
    </button>
  );
}