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:
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
- Try your customizations in our interactive demo
- Learn about batch transactions
- Check out the usage examples