Appearance & CSS Variables

AuthSetu components inherit your application's typography, colors, and layout tokens via standard CSS variables.

CSS Custom Properties

:root {
  --authsetu-primary: #2563eb;
  --authsetu-primary-foreground: #ffffff;
  --authsetu-background: #09090b;
  --authsetu-card: #18181b;
  --authsetu-border: #27272a;
  --authsetu-radius: 0.75rem;
}

Inline Appearance Overrides

<SignIn
  appearance={{
    elements: {
      card: 'shadow-2xl border-primary/20',
      primaryButton: 'bg-emerald-600 hover:bg-emerald-700',
    },
  }}
/>