Customization

The Nova UI Kit (@tuwaio/nova-transactions) provides a suite of pre-built React components designed to work seamlessly with the Pulsar engine. These components are highly customizable to ensure they match the look and feel of your application perfectly.

You can modify styling via CSS variables, override all text content for internationalization (i18n), and even replace entire components for advanced use cases.

1. Styling with CSS Variables

Nova components are styled using a system of CSS variables with a --tuwa prefix, making it simple to theme the entire UI kit by overriding a few key values. This system lives in the foundational @tuwaio/nova-core package, which @tuwaio/nova-transactions depends on.

Simply define your overrides in your global CSS file.

Example: Theming Components


/* In your global stylesheet (e.g., app.css) */
:root {
  /* Override primary text and accent colors */
  --tuwa-text-primary: #111827;     /* e.g., dark gray */
  --tuwa-text-accent: #4f46e5;      /* e.g., indigo */
 
  /* Override primary background colors */
  --tuwa-bg-primary: #ffffff;
  --tuwa-bg-secondary: #f9fafb;
 
  /* Override the main button gradient */
  --tuwa-button-gradient-from: #4f46e5;
  --tuwa-button-gradient-to: #7c3aed;
}
 
/* You can also define overrides for dark mode */
.dark {
  --tuwa-text-primary: #f9fafb;
  --tuwa-bg-primary: #111827;
  --tuwa-bg-secondary: #1f2937;
}

For a full list of available CSS variables, you can refer to the variables.css file within the @tuwaio/nova-core package.

2. Customizing Text (Internationalization)

All text labels within the Nova components can be customized or translated. The NovaProvider component accepts a labels prop. You can pass a partial object of your custom strings, which will be deeply merged with the default English labels.


// In your main providers file (e.g., src/providers/index.tsx)
 
import { NovaProvider, defaultLabels } from '@tuwaio/nova-transactions';
import { deepMerge } from '@tuwaio/nova-core';
 
// 1. Create your custom labels object by merging with the default.
// You only need to define the keys you want to change.
const customLabels = deepMerge(defaultLabels, {
  transactionModal: {
    title: 'Transaction Details',
    close: 'Close',
  },
  common: {
    retry: 'Try Again',
  },
});
 
export function AppProviders({ children }) {
  // This is a standard setup with wagmi.
  // Note that PulsarProvider is not required for a basic setup.
  return (
    <WagmiProvider config={config}>
      {/* Your other application providers */}
      
      {children}
      
      {/* 2. Pass the custom labels directly to NovaProvider */}
      <NovaProvider labels={customLabels} />
    </WagmiProvider>
  );
}

3. Advanced Customization (Headless)

For maximum control, you can use the @tuwaio/pulsar-core and @tuwaio/pulsar-evm packages in a headless fashion. This allows you to build a completely custom UI from scratch while still leveraging Pulsar’s powerful state management and transaction tracking logic.

Use the state logic exported from @tuwaio/pulsar-core to get the transaction state and build components that are 100% unique to your application.

Storybook

For a complete, interactive overview of all available Nova components and their props, please refer to our Storybook documentation.