Home

Awesome

Interchain UI

<p align="center" width="100%"> <img height="250" src="https://github.com/cosmology-tech/interchain-ui/assets/545047/d08ac5da-cba7-461b-b707-d0fe2e2205fd" /> </p> <p align="center" width="100%"> The Design System for the Interchain </p> <p align="center" width="100%"> <a href="https://www.npmjs.com/package/@interchain-ui/react"><img height="20" src="https://img.shields.io/github/package-json/v/cosmology-tech/interchain-ui?filename=packages%2Freact%2Fpackage.json"/></a> <a href="https://github.com/cosmology-tech/interchain-ui/blob/main/LICENSE"><img height="20" src="https://img.shields.io/badge/license-MIT-blue.svg"/></a> <a href="https://www.npmjs.com/package/@interchain-ui/react"> <img height="20" src="https://img.shields.io/npm/dt/@interchain-ui/react" /> </a> </p>

Table of contents

🎨 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:

Overview and structure

Overview 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.

Package dev scripts in root package.json

Convention

Related

Checkout these related projects:

Credits

Checkout mitosis from BuilderIO to compile lite JSX.

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