⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  • Primitive Components
  • Button
  • Action Button
  • Swaps, IBCSwaps, IBCTransfer and FiatOnRamp Components
  1. Elements
  2. Theming

Advanced Customisations

For use cases that require customisation of styles for certain elements in the components.

PreviousUsing CSS VariablesNextUse Elements Without the UI

Last updated 11 months ago

For use cases where you need even more customisability, we have added CSS classes to components that you may want to style.

If you need any assistance with advanced customisations for Elements, feel free to reach out to .


For this, you'll need to use the primitive component's classes and the high-level components' classes. Let's go through them.

Primitive Components

For a few components like buttons, you may want to style each variant so for that, we have added v-variant-name class on such elements.

Button

Class - leap-button

Variants

  • default

  • secondary

  • outline

  • ghost

  • link

Action Button

Class - leap-button

Variants

  • v-action-primary

  • v-action-destructive

  • v-action-attention

Similarly, other components will have identifying classes attached to them, you can find them when you inspect the markup. You can use these to do further modifications.


Swaps, IBCSwaps, IBCTransfer and FiatOnRamp Components

Here's are the classes for the Swaps component's elements. Using these along with the primitive components classes, you can style any elements you want.

You can inspect the markup and for each major component there will be a class name that identifies it. You can use these classes to do further modifications.

support+elements@leapwallet.io