Component Playground
Sample themes
Default
Dark
Mint
Claudia
Products
Google
Facebook
Magic Links
Passwords
SMS OTP
Web3
WhatsApp OTP
Style
General
Font
Arial
Brand Logo
Container
Width
Background Color
Border Color
Border Radius
Colors
Primary
Secondary
Success
Error
Primary Button
Text Color
Background Color
Border Color
Border Radius
Secondary Button
Text Color
Background Color
Border Color
Border Radius
Inputs
Text Color
Placeholder Color
Background Color
Border Color
Border Radius
{
"products": [
"oauth",
"emailMagicLinks"
],
"oauthOptions": {
"providers": [
{
"type": "google"
}
],
"loginRedirectURL": "https://www.stytch.com/login",
"signupRedirectURL": "https://www.stytch.com/signup"
},
"emailMagicLinksOptions": {
"loginRedirectURL": "https://www.stytch.com/login",
"loginExpirationMinutes": 30,
"signupRedirectURL": "https://www.stytch.com/signup",
"signupExpirationMinutes": 30
},
"otpOptions": {
"methods": [],
"expirationMinutes": 5
},
"passwordOptions": {
"loginRedirectURL": "https://www.stytch.com/login",
"resetPasswordRedirectURL": "https://www.stytch.com/reset-password"
}
}{
"fontFamily": "Arial",
"buttons": {
"primary": {
"backgroundColor": "#1D1D1D",
"textColor": "#FFFFFF",
"borderColor": "#1D1D1D",
"borderRadius": "4px"
},
"secondary": {
"backgroundColor": "#FFFFFF",
"textColor": "#1D1D1D",
"borderColor": "#CECECE",
"borderRadius": "4px"
}
},
"colors": {
"primary": "#1D1D1D",
"secondary": "#525151",
"success": "#09906A",
"error": "#8F0002"
},
"container": {
"backgroundColor": "#FBFAF9",
"borderRadius": "4px",
"borderColor": "#CECECE",
"width": "100%"
},
"inputs": {
"borderColor": "#CECECE",
"borderRadius": "4px",
"textColor": "#1D1D1D",
"placeholderColor": "#525151",
"backgroundColor": "#FFFFFF"
}
}