Skip to main content

​
Overview

The Layerswap Widget offers extensive customization options, allowing you to tailor both the appearance and functionalities to match your application’s needs. Customize colors, layouts, header visibility, border radius, and more to create a seamless and branded experience.

​
Interactive Playground

Try the Customization Playground

Experiment with all customization options in real-time. Test colors, layouts, styles, and configurations with live preview before implementing in your application.

​
Quick Start

Here’s a basic example of customizing the widget with a custom theme: 
import { LayerswapProvider, Swap } from '@layerswap/widget';
import { EVMProvider } from '@layerswap/wallet-evm';

export default function App() {
  const customTheme = {
    primary: {
      DEFAULT: '99, 102, 241',
      '500': '99, 102, 241',
      'text': '255, 255, 255',
    },
    secondary: {
      DEFAULT: '30, 41, 59',
      '500': '30, 41, 59',
      'text': '148, 163, 184',
    }
  };

  return (
    <LayerswapProvider
      config={{
        apiKey: 'YOUR_API_KEY',
        version: 'mainnet',
        theme: customTheme,
      }}
      walletProviders={[EVMProvider]}
    >
      <Swap />
    </LayerswapProvider>
  );
}

​
Customization Options

The following customization options are available for integrators:

​
Colors & Themes

Customize the entire color palette of the widget to match your brand. Learn more in the Color Customization section. Key Features:
  • Primary and secondary color palettes
  • Status colors for warnings, errors, and success states
  • Button and text colors
  • Seamless integration with Tailwind Shades for generating color palettes

​
Theme Configuration

Configure layout, borders, header visibility, and advanced styling options. Learn more in the Theme Configuration section. Key Features:
  • Border radius options
  • Header customization (hide menu, tabs, wallets)
  • Card background styling with custom CSS
  • Remove “Powered by Layerswap” branding

​
Complete Examples

Browse ready-to-use theme examples including dark, light, and minimalist themes. See the Theme Examples section.

​
Next Steps

Color Customization

Customize colors and generate color palettes

Theme Configuration

Configure borders, headers, and other theme elements

Theme Examples

Browse complete theme examples for different use cases

​
Additional Resources

Customization Playground

Test configurations interactively with live preview

Tailwind Shades

Generate color palettes from a single color