Skip to main content

​
Overview

PolygonKit components are designed to be easily customizable. You can theme them using Tailwind CSS, CSS variables, or custom CSS.

​
Using Tailwind CSS

All PolygonKit components accept a className prop for Tailwind styling: 
<ConnectWallet className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700" />

​
Custom Theme

Create a custom theme by overriding default styles: 
/* styles/polygon-kit-theme.css */
:root {
  --pk-primary: #8247E5;
  --pk-primary-hover: #6B3BC3;
  --pk-background: #ffffff;
  --pk-text: #000000;
  --pk-border: #e5e7eb;
}

.dark {
  --pk-background: #1a1a1a;
  --pk-text: #ffffff;
  --pk-border: #374151;
}

​
Component-Specific Styling

​
ConnectWallet Button

<ConnectWallet className="
  bg-gradient-to-r from-purple-600 to-pink-600
  hover:from-purple-700 hover:to-pink-700
  text-white font-bold py-3 px-6 rounded-full
  shadow-lg hover:shadow-xl transition-all
" />

​
Identity Component

<Identity
  address={address}
  className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow"
/>

​
Transaction Button

<TransactionButton
  text="Send"
  calls={[...]}
  className="bg-green-600 hover:bg-green-700 text-white font-semibold"
/>

​
Dark Mode

PolygonKit components support dark mode out of the box with Tailwind: 
<div className="bg-white dark:bg-gray-900">
  <ConnectWallet className="
    bg-purple-600 dark:bg-purple-500
    hover:bg-purple-700 dark:hover:bg-purple-600
  " />
</div>

​
Global Styles

Apply global styles to all PolygonKit components: 
// app/layout.tsx or main.tsx
import '@sanketsaagar/polygon-kit/dist/styles.css'; // Default styles
import './polygon-kit-custom.css'; // Your custom overrides

​
Best Practices

Use colors from your design system to maintain visual consistency.
Ensure sufficient color contrast for text and interactive elements.
Test your theme in both light and dark mode.
Ensure styles work well on mobile devices.