Styling Components
Relevant source files
The following files were used as context for generating this wiki page:The sui-svelte-wallet-kit provides pre-built UI components, ConnectButton and ConnectModal, which come with default styling. This styling is designed to be easily customizable to fit the look and feel of any dApp. There are two primary methods for customization: passing class and style props for simple modifications, and overriding default CSS classes for more comprehensive theming.
The demo application included in the repository serves as a practical example of how to apply a custom dark theme to the entire application, including the wallet kit components.
Sources: README.md:162-179, src/routes/+page.svelte:617-984
Styling Approaches
The library supports a layered approach to styling, giving developers flexibility in how they apply customizations.
This diagram illustrates the hierarchy of style application.
ConnectButton Styling
The ConnectButton is the simplest component to style. It directly accepts class and style props, which are applied to the root <button> element. This allows for easy integration with CSS frameworks like Tailwind CSS or for applying ad-hoc styles.
Sources: src/lib/ConnectButton/ConnectButton.svelte.d.ts:8-15, src/lib/ConnectButton/ConnectButton.svelte:11
Prop-based Styling
You can pass standard HTML class and style attributes as props to the ConnectButton.
| Prop | Type | Description |
|---|---|---|
class | string | A custom CSS class name to apply to the button. |
style | string | Custom inline styles to apply to the button. |
Sources: src/lib/ConnectButton/ConnectButton.svelte.d.ts:8-15
Example
The demo page applies a custom class .connect-btn to the ConnectButton.
// src/routes/+page.svelte
<ConnectButton class="connect-btn" {onWalletSelection} />
Sources: src/routes/+page.svelte:311
This class is then targeted within the page's <style> block using the :global() selector to apply a custom appearance.
/* src/routes/+page.svelte */
:global(.connect-btn) {
background: #6366f1;
color: white;
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
transition:
transform 0.15s ease,
box-shadow 0.25s ease,
filter 0.2s ease;
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
}
:global(.connect-btn:hover) {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(99, 102, 241, 0.45);
}
Sources: src/routes/+page.svelte:702-724
ConnectModal Styling
The ConnectModal is styled by overriding its default CSS classes from a global stylesheet or a Svelte component's <style> block using the :global() selector. The modal is built with a consistent class structure, making it predictable to theme.
Sources: README.md:162-163, src/lib/ConnectModal/ConnectModal.svelte
Modal DOM and Class Structure
The following diagram shows the simplified DOM structure of the ConnectModal and the key CSS classes associated with each element.
Targetable CSS Classes
You can override the styles for the following classes to customize the modal's appearance.
| Class Name | Target Element | Description |
|---|---|---|
.connect-modal | The root <dialog> element. | Controls the modal's position and container properties. |
.modal-overlay | The full-screen overlay behind the modal. | Used for backdrop color and click-to-close behavior. |
.modal-content | The main modal container. | Controls the modal's background, border, padding, and size. |
.modal-header | The header section containing the title and close button. | Manages the layout of the header content. |
.modal-title | The <h2> title text. | For styling the "Connect Wallet" title. |
.close-button | The close (X) button. | For styling the close button and its icon. |
.wallet-list | The container for the list of wallets. | Manages the layout and scrolling of the wallet items. |
.wallet-button | Each individual wallet item button. | The primary element for styling wallet rows, including hover states. |
.wallet-icon | The wallet's icon <img>. | For adjusting the size and appearance of wallet icons. |
.wallet-name | The text displaying the wallet's name. | For styling the font of the wallet name. |
.installed-badge | The "Installed" badge on detected wallets. | For customizing the appearance of the badge for installed wallets. |
.install-hint | The hint box shown for a non-installed wallet. | Styles the alert box that prompts users to install a selected wallet. |
.install-link | The "Install this wallet" link inside the hint. | Styles the hyperlink for installing a wallet. |
Sources: src/lib/ConnectModal/ConnectModal.svelte:258-482, README.md:165-179
Global Override Example
To customize the modal, use the :global() selector in a Svelte style block or target the classes in a global CSS file. The README.md provides a clear example for creating a dark theme.
:global(.modal-overlay) {
background: rgba(0, 0, 0, 0.8);
}
:global(.modal-content) {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 16px;
}
:global(.wallet-button) {
background: #2a2a2a;
border: 1px solid #444;
color: white;
}
:global(.wallet-button:hover) {
border-color: #667eea;
background: #333;
}
Sources: README.md:165-179
Summary
Styling components in sui-svelte-wallet-kit is achieved through two main mechanisms. For the ConnectButton, developers can use the class and style props for quick and direct modifications. For more extensive theming, especially for the ConnectModal, the library exposes a set of stable CSS classes that can be targeted with global styles. This dual approach provides both convenience for minor tweaks and power for complete visual integration into a host application.