Interchain UI

Cross-framework UI Kit for Crafting dApps

Empowering developers with a flexible, easy-to-use toolkit that supports diverse frameworks and enables custom theme creation.

Build Once, Deploy Anywhere

Seamless integration across frameworks

Extensible and Easy to Use

Customize and extend UI components

Rapid UI Development

Snap together digital lego blocks

Interchain UI Features

Optimize your Cosmos development workflow

Cross-Framework UI Compilation

Write once, deploy across multiple frameworks with our universal compilation

Responsive and Mobile-Friendly

Ensure a seamless experience on all devices with mobile-optimized UI components

Unified User Interface Design

Craft consistent and engaging user experiences across your application

Pre-built Components for Swaps

Instantly enable token swaps with ready-to-use components

Intuitive Governance UI

Facilitate governance participation with clear, effective UI components

User-Friendly NFT Interfaces

Simplify NFT interactions with integrated, easy-to-use UI components

// Customize theme tokens
<ThemeProvider
  themeDefs={[
    {
      {/* Provide a unique name for your custom theme */}
      name: "custom",
      vars: {
        colors: {
          {/* Override your branding colors */}
          primary500: "#4A5568",
        },
      },
    },
  ]}
  {/* Custom theme name, this corresponds to one of the theme provided in themeDefs prop */}
  customTheme="custom"
>
  {children}
</ThemeProvider>

// Customize component styles
<ThemeProvider
  overrides={{
    // Slot named 'button'
    button: {
      // map overridable props to their values for each theme mode
      bg: {
        light: "red",
        dark: "blue",
      },
    },
  }}
>
  {children}
</ThemeProvider>

Custom Theming

Developers can easily customize and extend the UI components provided by Interchain UI, empowering them to tailor the user interface to their specific application requirements. Interchain UI enables developers to create visually stunning interfaces with customizable themes, ensuring consistent branding and a unique look and feel.

import { ValidatorListItem } from '@interchain-ui/react';

function Demo() {
  return (
    <ValidatorListItem
      validatorName='Cosmology'
      validatorImg='https://raw.githubusercontent.com/cosmostation/chainlist/main/chain/osmosis/moniker/osmovaloper1jvqv650snr7gaee2wsvkx9nf9gwuj946zxa7z4.png'
      stakedAmount={154.757}
      rewardsAmount={0.21}
      symbol='OSMO'
    />
  );
}

Cross-Framework Compatibility

Interchain UI seamlessly integrates with popular frontend frameworks like VueJS, React, Angular, Svelte, SolidJS, and Web Components, allowing developers to build once and deploy anywhere.

Related Lessons

Learn to optimize your Cosmos development workflow

2:35

Create a Cosmos App with create-cosmos-app

Create Cosmos App

Basics

Cosmos SDK

CosmWasm

5:13

How to build a staking dashboard for Cosmos SDK chains

Create Cosmos App

Cosmos SDK

1:20

Overview of CosmWasm ts-codegen

Codegen

CosmWasm

Overview

4:18

Turn your CosmWasm Smart Contracts into a TypeScript npm module

Codegen

CosmWasm

npm

Interchain UI

The Interchain Design System