Skip to main content

React SDK Components

🎨 Theming​

How Theming Works​

All UI components in @onflow/react-sdk are styled using Tailwind CSS utility classes. The kit supports both light and dark themes out of the box, using Tailwind's dark: variant for dark mode styling.

You can customize the look and feel of the kit by providing a custom theme to the FlowProvider via the theme prop. This allows you to override default colors and styles to better match your app's branding.


_17
import { FlowProvider } from "@onflow/react-sdk"
_17
_17
<FlowProvider
_17
config={...}
_17
theme={{
_17
colors: {
_17
primary: {
_17
background: "bg-blue-600 dark:bg-blue-400",
_17
text: "text-white dark:text-blue-900",
_17
hover: "hover:bg-blue-700 dark:hover:bg-blue-300",
_17
},
_17
// ...other color overrides
_17
}
_17
}}
_17
>
_17
<App />
_17
</FlowProvider>

🌙 Dark Mode​

How Dark Mode Works​

Dark mode is fully controlled by the parent app using the darkMode prop on FlowProvider. The kit does not manage dark mode state internally—this gives you full control and ensures the kit always matches your app's theme.

  • darkMode={false} (default): Forces all kit components to use light mode styles.
  • darkMode={true}: Forces all kit components to use dark mode styles.
  • You can dynamically change the darkMode prop to switch themes at runtime.

Example:


_10
function App() {
_10
// Parent app manages dark mode state
_10
const [isDark, setIsDark] = useState(false)
_10
_10
return (
_10
<FlowProvider config={...} darkMode={isDark}>
_10
<MyFlowComponents />
_10
</FlowProvider>
_10
)
_10
}

Accessing Dark Mode State in Components:

You can use the useDarkMode hook to check the current mode inside your components:


_10
import { useDarkMode } from "@onflow/react-sdk"
_10
_10
function MyComponent() {
_10
// useDarkMode only returns the current state, no setter
_10
const { isDark } = useDarkMode()
_10
return <div>{isDark ? "Dark mode" : "Light mode"}</div>
_10
}

Notes​

  • The kit does not automatically follow system preferences or save user choices. You are responsible for managing and passing the correct darkMode value.
  • All kit components will automatically apply the correct Tailwind dark: classes based on the darkMode prop.
  • For best results, ensure your app's global theme and the kit's darkMode prop are always in sync.

Components​

Connect​

A drop-in wallet connection component with UI for copy address, logout, and balance display.

Props:

  • variant?: ButtonProps["variant"] – Optional button style variant (default: "primary")
  • onConnect?: () => void – Callback triggered after successful authentication
  • onDisconnect?: () => void – Callback triggered after logout
  • balanceType?: "cadence" | "evm" | "combined" – Specifies which balance to display (default: "cadence"). Options:
    • "cadence": Shows the FLOW token balance from the Cadence side
    • "evm": Shows the FLOW token balance from the Flow EVM side
    • "combined": Shows the total combined FLOW token balance from both sides

_10
import { Connect } from "@onflow/react-sdk"
_10
_10
<Connect
_10
onConnect={() => console.log("Connected!")}
_10
onDisconnect={() => console.log("Logged out")}
_10
/>

Live Demo​

TransactionButton​

Button component for executing Flow transactions with built-in loading states and global transaction management.

Props:

  • transaction: Parameters<typeof mutate>[0] – Flow transaction object to execute when clicked
  • label?: string – Optional custom button label (default: "Execute Transaction")
  • mutation?: UseMutationOptions<string, Error, Parameters<typeof mutate>[0]> – Optional TanStack React Query mutation options
  • ...buttonProps – All other ButtonProps except onClick and children (includes variant, disabled, className, etc.)

_23
import { TransactionButton } from "@onflow/react-sdk"
_23
_23
const myTransaction = {
_23
cadence: `
_23
transaction() {
_23
prepare(acct: &Account) {
_23
log("Hello from ", acct.address)
_23
}
_23
}
_23
`,
_23
args: (arg, t) => [],
_23
limit: 100,
_23
}
_23
_23
<TransactionButton
_23
transaction={myTransaction}
_23
label="Say Hello"
_23
variant="primary"
_23
mutation={{
_23
onSuccess: (txId) => console.log("Transaction sent:", txId),
_23
onError: (error) => console.error("Transaction failed:", error),
_23
}}
_23
/>

Live Demo​

TransactionDialog​

Dialog component for real-time transaction status updates.

Props:

  • open: boolean – Whether the dialog is open
  • onOpenChange: (open: boolean) => void – Callback to open/close dialog
  • txId?: string – Optional Flow transaction ID or scheduled transaction ID to track
  • onSuccess?: () => void – Optional callback when transaction is successful
  • pendingTitle?: string – Optional custom pending state title
  • pendingDescription?: string – Optional custom pending state description
  • successTitle?: string – Optional custom success state title
  • successDescription?: string – Optional custom success state description
  • closeOnSuccess?: boolean – If true, closes the dialog automatically after success

_11
import { TransactionDialog } from "@onflow/react-sdk"
_11
_11
_11
<TransactionDialog
_11
open={isOpen}
_11
onOpenChange={setIsOpen}
_11
txId="6afa38b7bd1a23c6cc01a4ea2e51ed376f16761f9d06eca0577f674a9edc0716"
_11
pendingTitle="Sending..."
_11
successTitle="All done!"
_11
closeOnSuccess
_11
/>

Live Demo​

Link to the block explorer with the appropriate network scoped to transaction ID or scheduled transaction ID.

Props:

  • txId: string – The transaction ID or scheduled transaction ID to link to
  • variant?: ButtonProps["variant"] – Optional button variant (defaults to "link")

_10
import { TransactionLink } from "@onflow/react-sdk"
_10
_10
<TransactionLink txId="your-tx-id" />

Live Demo​

Rate this page