> ## Documentation Index > Fetch the complete documentation index at: https://docs.getpara.com/llms.txt > Use this file to discover all available pages before exploring further. # Customization Basics > Learn how to customize the appearance and behavior of the Para Modal to match your application's design. export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => { const [isHovered, setIsHovered] = useState(false); const handleClick = e => { e.preventDefault(); if (newTab) { window.open(href, '_blank', 'noopener,noreferrer'); } else { window.location.href = href; } }; return
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> {imgUrl &&
e.stopPropagation()}> {title}
}
{title &&

{title}

} {description &&

{description}

}
; }; export const Link = ({href, label, newTab = false}) => { const [isHovered, setIsHovered] = useState(false); return setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> {label} ; }; export const MethodDocs = ({name, description, parameters = [], returns, deprecated = false, since = null, async = false, static: isStatic = false, tag = null, defaultExpanded = false, preventCollapse = false, id = 'method'}) => { const [isExpanded, setIsExpanded] = useState(defaultExpanded || preventCollapse); const [isHovered, setIsHovered] = useState(false); const [isCopied, setIsCopied] = useState(false); const [hoveredParam, setHoveredParam] = useState(null); const [hoveredReturn, setHoveredReturn] = useState(false); const parseMethodName = fullName => { const match = fullName.match(/^([^(]+)(\()([^)]*)(\))$/); if (match) { return { name: match[1], openParen: match[2], params: match[3], closeParen: match[4] }; } return { name: fullName, openParen: '', params: '', closeParen: '' }; }; const methodParts = parseMethodName(name); const handleCopy = e => { e.stopPropagation(); navigator.clipboard.writeText(name); setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); }; return
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> {!preventCollapse && {isExpanded ? : } }
{parameters.length > 0 &&

Parameters

({parameters.length})
{parameters.map((param, index) =>
setHoveredParam(index)} onMouseLeave={() => setHoveredParam(null)}>
{param.name} : {param.typeLink ? {param.type} : {param.type} } {param.required && Required } {param.optional && Optional }
{param.description &&

{param.description}

} {param.defaultValue !== undefined &&

Default: {param.defaultValue}

}
)}
} {returns &&
0 ? 'mt-6' : 'pt-6'}`}>

Returns

setHoveredReturn(true)} onMouseLeave={() => setHoveredReturn(false)}>
{returns.typeLink ? {returns.type} : {returns.type} }
{returns.description &&

{returns.description}

}
}
; }; The Para Modal provides extensive customization options through the `paraModalConfig` prop passed to the `ParaProvider`. You can customize everything from colors and themes to authentication flows and security features. Para Modal Customization ## Basic Setup Pass the `paraModalConfig` object to your `ParaProvider` to customize the modal: ```tsx theme={null} {children} ``` ## Configuration Options A full list of available configuration options for the `paraModalConfig` prop available on the `ParaProvider` component: void", required: false, description: "Callback fired when the modal step changes" }, { name: "onClose", type: "() => void", required: false, description: "Callback fired when the modal is closed" }, { name: "loginTransitionOverride", type: "(para: ParaWeb) => Promise", required: false, description: "Custom login transition logic" }, { name: "createWalletOverride", type: "(para: ParaWeb) => Promise<{recoverySecret?: string; walletIds: CurrentWalletIds}>", required: false, description: "Custom wallet creation logic" }, { name: "balances", type: "BalancesConfig", required: false, description: "Configuration for the profile balances displayed in the Para Modal." } ]} /> ## Complete Example Here's a comprehensive example showcasing multiple configuration options: ```tsx theme={null} { console.log('Step changed:', stepInfo); }, onClose: () => { console.log('Modal closed'); } }} > {children} ``` ## Modal Designer Test your modal configuration with our interactive tool: ## Next Steps Explore detailed configuration guides for specific aspects of the modal: