> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization Overview

> How to customize the Layerswap Widget appearance and functionalities

## 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

<Card title="Try the Customization Playground" icon="palette" href="https://playground.layerswap.io">
  Experiment with all customization options in real-time. Test colors, layouts, styles, and configurations with live preview before implementing in your application.
</Card>

## Quick Start

Here's a basic example of customizing the widget with a custom theme:

```typescript theme={null}
import { LayerswapProvider, Swap } from '@layerswap/widget';
import { createEVMProvider } 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={[createEVMProvider()]}
    >
      <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](/integration/UI/Widget/Customization/Colors) 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](https://tailwindshades.app/) for generating color palettes

### Theme Configuration

Configure layout, borders, header visibility, and advanced styling options. Learn more in the [Theme Configuration](/integration/UI/Widget/Customization/ThemeConfiguration) 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](/integration/UI/Widget/Customization/ThemeExamples) section.

## Next Steps

<CardGroup cols={2}>
  <Card title="Color Customization" icon="palette" href="/integration/UI/Widget/Customization/Colors">
    Customize colors and generate color palettes
  </Card>

  <Card title="Theme Configuration" icon="gear" href="/integration/UI/Widget/Customization/ThemeConfiguration">
    Configure borders, headers, and other theme elements
  </Card>

  <Card title="Theme Examples" icon="swatchbook" href="/integration/UI/Widget/Customization/ThemeExamples">
    Browse complete theme examples for different use cases
  </Card>
</CardGroup>

## Additional Resources

<CardGroup cols={2}>
  <Card title="Customization Playground" icon="flask" href="https://playground.layerswap.io">
    Test configurations interactively with live preview
  </Card>

  <Card title="Tailwind Shades" icon="swatchbook" href="https://tailwindshades.app/">
    Generate color palettes from a single color
  </Card>
</CardGroup>