Skip to content

Customization

Batua is built with shadcn/ui components, which means it automatically inherits your application's theme and can be easily customized to match your brand.

Theme Integration

Since Batua uses shadcn/ui components, it will automatically match your existing theme:

  • Colors: Uses your CSS custom properties for colors
  • Typography: Inherits your font settings
  • Spacing: Follows your design system
  • Dark/Light mode: Automatically supports theme switching

Visual Customizer

For easy visual customization, use our online customizer tool:

Customize Batua →

The customizer allows you to:

  • Adjust colors and styling
  • Preview changes in real-time
  • Generate custom CSS
  • Download customized components

Manual Customization

Styling Components

You can override Batua's styles by targeting its CSS classes:

/* Custom button styling */
.batua-connect-button {
    background: linear-gradient(45deg, #your-brand-color, #secondary-color);
    border-radius: 12px;
    font-weight: 600;
}
 
/* Custom modal styling */
.batua-modal {
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

CSS Custom Properties

Batua respects your CSS custom properties. Update these to change the appearance:

:root {
    --batua-primary: #your-primary-color;
    --batua-secondary: #your-secondary-color;
    --batua-background: #your-background-color;
    --batua-foreground: #your-text-color;
    --batua-border: #your-border-color;
    --batua-radius: 8px;
}

Component Customization

Custom Connect Button

You can create a custom connect button while still using Batua's functionality:

import { useConnect } from "wagmi"
 
function CustomConnectButton() {
    const { connectors, connect } = useConnect()
    const batuaConnector = connectors.find(c => c.name === "Batua")
    
    return (
        <button
            onClick={() => batuaConnector && connect({ connector: batuaConnector })}
            className="your-custom-button-classes"
        >
            <YourCustomIcon />
            Connect with Passkey
        </button>
    )
}

Custom Modal Content

Customize the connection modal by wrapping Batua's components:

import { BatuaModal } from "@/components/ui/batua"
 
function CustomBatuaModal() {
    return (
        <BatuaModal>
            <div className="custom-header">
                <YourLogo />
                <h2>Connect to {yourAppName}</h2>
            </div>
            <BatuaModal.Content />
            <div className="custom-footer">
                <p>Secured by passkeys</p>
            </div>
        </BatuaModal>
    )
}

Branding Options

Logo Integration

Add your logo to the Batua interface:

const batuaConfig = {
    branding: {
        logo: "/your-logo.svg",
        name: "Your App Name",
        colors: {
            primary: "#your-primary-color",
            secondary: "#your-secondary-color"
        }
    }
}

Custom Messages

Customize user-facing messages:

const batuaConfig = {
    messages: {
        connecting: "Connecting to your passkey...",
        connected: "Successfully connected!",
        error: "Connection failed. Please try again."
    }
}

Advanced Customization

Custom Hooks

Create custom hooks that wrap Batua's functionality:

import { useConnect, useAccount } from "wagmi"
 
export function useBatuaConnection() {
    const { connectors, connect, isPending } = useConnect()
    const { isConnected } = useAccount()
    
    const batuaConnector = connectors.find(c => c.name === "Batua")
    
    const connectBatua = () => {
        if (batuaConnector) {
            connect({ connector: batuaConnector })
        }
    }
    
    return {
        connectBatua,
        isConnecting: isPending,
        isConnected,
        isAvailable: !!batuaConnector
    }
}

Custom Error Handling

Implement custom error handling and user feedback:

import { useConnect } from "wagmi"
import { toast } from "your-toast-library"
 
function ConnectWithErrorHandling() {
    const { connect, error } = useConnect()
    
    useEffect(() => {
        if (error) {
            toast.error(`Connection failed: ${error.message}`)
        }
    }, [error])
    
    // Your connect logic here
}

Best Practices

Accessibility

Ensure your customizations maintain accessibility:

<button
    onClick={connectBatua}
    aria-label="Connect wallet using passkey authentication"
    className="focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
    Connect Wallet
</button>

Responsive Design

Make sure your customizations work across devices:

.batua-modal {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
 
@media (max-width: 640px) {
    .batua-modal {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

Next Steps