Interchain UI

The Design System for the Interchain

Table of contents

• Interchain UI
  • Table of contents
  • 🎨 What is Interchain UI?
  • Usage
    • React
  • Developing
  • Overview and structure
  • Compiler
  • Icons
  • Customizing theme
  • Related
  • Credits

🎨 What is Interchain UI?

Interchain UI is a foundation library for UI elements used in cosmos-kit and other packages. It provides developers with pre-built components and a foundation for creating user interfaces across different frameworks, such as VueJS, React, Angular, Svelte, SolidJS, and Web Components, enabling developers to customize UI elements and themes. This gives us the ability to code a component once, and it will compile to all framework targets.

Usage

# If you use react
yarn add @interchain-ui/react

# If you use vue
yarn add @interchain-ui/vue

React

To see how to use with react, see our react documentation

Using React

Developing

We are using Lerna + PNPM to bootstrap the monorepo. First make sure you install PNPM locally first, then run these commands:

• pnpm install to bootstrap the repo
• pnpm run dev to watch the repo for changes and then recompile
• pnpm run compile to compile from mitosis components to other packages, you can give it a flag -p or --platforms .ie pnpm run compile -p react vue
• pnpm run c:react or pnpm run c:vue to compile specifically to react or vue
• pnpm run clear to clean .node_modules or pnpm run clear:assets to clean build/compile output
• pnpm run clear:cache to clean cache folder used by bundlers

Overview and structure

We create components inside a single source of truth folder <root>/src with Lite JSX format (.lite.tsx), then through our compiler, it's going to compile our components and build it in sub packages' src and dist.

Compiler

To know more about the inner workings of our compiler, check Compiler to explore.

Icons

Check Icon guide to know how to add more icons

Customizing theme

Check Customizing guide to know how to customize the default theme.

Related

Checkout these related projects:

• @cosmology/telescope Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
• @cosmwasm/ts-codegen Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
• chain-registry Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
• cosmos-kit Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
• create-cosmos-app Set up a modern Cosmos app by running one command.
• interchain-ui The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
• starship Unified Testing and Development for the Interchain.

Credits

Checkout mitosis from BuilderIO to compile lite JSX.

🛠 Built by Cosmology — if you like our tools, please consider delegating to our validator ⚛️