Skip to content
Synq
Developers

@synqid/react.
Provider. Hooks. Three tiers.

React SDK for Vite, CRA, and Remix. SynqProvider plus hooks for user, session, access token. Headless modals with three customization tiers — token-driven theme, compound parts with asChild, fully headless render-prop. Pick the tier that fits your design system.

Install

pnpm add @synqid/react @synqid/js

Mount and consume

Wrap your tree once, then read state with hooks anywhere.

import { SynqProvider } from '@synqid/react'
import { SignIn } from '@synqid/react/ui'

export default function Root({ children }) {
  return (
    <SynqProvider
      issuer="https://api.synq.id"
      clientId={import.meta.env.VITE_SYNQ_CLIENT_ID}
      redirectUri={`${location.origin}/auth/callback`}
      theme="dark"
      colorScheme="system"
    >
      {children}
      <SignIn />          {/* mount once; opens via requestSignIn() */}
    </SynqProvider>
  )
}
Three customization tiers

Pick the lightest that fits

1

Token presets

Brand colors, radii, fonts via tokens on <SynqProvider>. Five built-in presets (dark, light, glass, monochrome, brutalist) plus full override.

2

Compound parts

Replace any part of the modal with asChild. SignIn.Backdrop / Content / Header / Title / ProviderList / Provider / WalletButton / Footer.

3

Fully headless

Render-prop API. Synq hands you isOpen, providers, isLoading, error, signIn, walletAvailable. You render everything.

Pair it with

Theming

The token system, presets, light/dark with system follow, provider-icon overrides, slot-level classNames.

@synqid/nextjs

Building on Next.js? Use the dedicated package for the route handler + server DAL.

@synqid/js

The lower-level core. Use directly for non-React work like backends and CLIs.

Common questions

Three customization tiers, one API.

Defaults work out of the box; compound parts handle 80% of designs; headless render-prop covers everything else.

Request early accessTalk to sales