/
Interchain UIBuild 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
