Identra Docs

Playground

Build it, theme it, ship it

Preview Identra's drop-in components live, tune their appearance, and copy the code for your framework. The preview renders the real components — every SDK reads the same --idt-* variables, so what you see is what each framework ships.

Framework
Component
Appearance
Preview · Sign in

Presets

Appearance

Props

Social providers
React · SignIn 
import { IdentraProvider, SignIn } from "@identra/react";

export function AuthScreen() {
  return (
    <IdentraProvider baseUrl="http://localhost:8080" applicationId={APP_ID}>
      <div style={{ "--idt-accent-color": "#1f1d18", "--idt-accent-hover-color": "color-mix(in srgb, #1f1d18 84%, #000)", "--idt-on-accent-color": "#fbf7ec", "--idt-bg-color": "#ffffff", "--idt-bg-subtle-color": "color-mix(in srgb, #1c1a15 5%, #ffffff)", "--idt-fg-color": "#1c1a15", "--idt-muted-color": "#8b8578", "--idt-border-color": "#e5ddc9", "--idt-border-strong-color": "color-mix(in srgb, #e5ddc9 65%, #1c1a15)", "--idt-radius-base": "8px", "--idt-font": "ui-sans-serif, system-ui, sans-serif" }}>
        <SignIn socials={["google", "github"]} passkeys />
      </div>
    </IdentraProvider>
  );
}