@interchain-ui/react
v1.26.0
Published
UI building blocks for Interchain builders
Downloads
12,428
Readme
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.
Usage
First install using your favorite package manager
npm i @interchain-ui/react
yarn add @interchain-ui/react
pnpm add @interchain-ui/react
Then in your root route/layout, import ThemeProvider
and CSS
// layout.tsx
import { ThemeProvider, OverlaysManager } from '@interchain-ui/react';
import '@interchain-ui/react/styles';
export function RootLayout(props: LayoutProps) {
return (
<ThemeProvider>
{props.children}
<OverlaysManager />
</ThemeProvider>
)
}
After these steps are done, you can import and use @interchain-ui/react
components.
Setup and scripts for development
pnpm install
to bootstrap the repopnpm run dev
to watch the repo for changes and then recompilepnpm run compile
to compile from mitosis components to other packages, you can give it a flag-p
or--platforms
.ieyarn compile -p react vue
pnpm run c:react
orpnpm run c:vue
to compile specifically to react or vuepnpm run clean
to clean.node_modules
orpnpm run clean:assets
to clean build/compile output
Icon
Check Icon guide to know how to add more icons
Our Website
⚛️ https://cosmology.zone/products/interchain-ui
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 ⚛️