Modal Sizes

Control the size and appearance of LunoKit's wallet connection and account modals.

Overview

LunoKit provides different modal sizes to fit your application's design. You can customize modal dimensions, positioning, and responsive behavior to match your UI requirements.

Default Modal Behavior

By default, LunoKit modals are responsive and adapt to different screen sizes:

import { LunoKitProvider, ConnectButton } from '@luno-kit/ui'
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <LunoKitProvider config={config}>
        {/* Default modal behavior */}
        <ConnectButton />
      </LunoKitProvider>
    </QueryClientProvider>
  )
}

Modal Size Options

Compact Size

Perfect for mobile-first designs or when screen space is limited:

<QueryClientProvider {...}>
  <LunoKitProvider 
    config={{
      ...config,
      modalSize: 'compact'
    }}
  >
    <ConnectButton />
  </LunoKitProvider>
</QueryClientProvider>

Wide Size

Provides more space for wallet lists and account information:

<QueryClientProvider {...}>
  <LunoKitProvider
    config={{
      ...config,
      modalSize: 'wide'
    }}
  >
    <ConnectButton />
  </LunoKitProvider>
</QueryClientProvider>

Related Documentation

• ConnectButton - Main connection component
• Theming - Customize modal appearance
• Custom ConnectButton - Build custom modals