Lomi UI
Theming
Customize Lomi UI components without losing the checkout feel.
Theming
Lomi UI components are intentionally simple. They use Tailwind classes, small radii, neutral surfaces, and a blue selected state inspired by the hosted checkout.
Defaults
| Token | Default |
|---|---|
| Selected state | #56A5F9 |
| Card radius | rounded-sm |
| Surface | white or near-black checkout summary |
| Border | subtle gray borders |
| Focus | visible blue focus rings |
Customizing
Because each component is copied into your app, customize the classes directly:
<PaymentProviderSelector
className="grid-cols-2"
selectedProvider="wave"
onProviderChange={setProvider}
/>Keep the selected state obvious, especially on mobile money provider cards where users need to confirm the exact rail before paying.