@interchain-ui/vue NPM

Interchain UI Kit

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

Setup

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

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

Setup and scripts for development

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 clean to clean .node_modules or pnpm run clean:assets to clean build/compile output

Overview and structure

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

When we publish packages, we are actually publishing the sub packages generated from <root>/src, which are packages/react and packages/vue, not the <root>/src itself.

The compiler is a wrapper over @builder.io/mitosis CLI with some extra source code handling logic and some nice CLI add-ons like arguments handling...etc.

There are some rules of thumbs and some tips for creating Mitosis components:

File names must end with *.lite.tsx
Style sheets must be in *.css.ts files, this is because we use a styling solution called vanilla-extract to have a CSS-in-JS API across all frameworks.
For a component, you must use default export, not named export. This is a limitation of Mitosis
There are more rules and limitations, please read more about Mitosis here
To quickly test to see the compilation result from one Mitosis to any framework source code, please use mitosis sandbox. It's similar to TS playground but for Mitosis testing purpose.

Icon

Check Icon guide to know how to add more icons

Our Website

⚛️ https://cosmology.zone/products/interchain-ui

Interchain JavaScript Stack ⚛️

A unified toolkit for building applications and smart contracts in the Interchain ecosystem

Category	Tools	Description
Chain Information	Chain Registry, Utils, Client	Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
Wallet Connectors	Interchain Kitbeta, Cosmos Kit	Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
Signing Clients	InterchainJSbeta, CosmJS	A single, universal signing interface for any network
SDK Clients	Telescope	Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
Starter Kits	Create Interchain Appbeta, Create Cosmos App	Set up a modern Interchain app by running one command.
UI Kits	Interchain UI	The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
Testing Frameworks	Starship	Unified Testing and Development for the Interchain.
TypeScript Smart Contracts	Create Hyperweb App	Build and deploy full-stack blockchain applications with TypeScript
CosmWasm Contracts	CosmWasm TS Codegen	Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.

Credits

🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to our github ⚛️

Disclaimer

AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.

No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.