Convert Figma logo to code with AI

inkonchain logoink-kit

React component library for onchain applications - See README for modern alternatives

36,827
426
36,827
3

Top Related Projects

1,440

Polkadot's ink! to write smart contracts.

Quick Overview

Ink-kit is a comprehensive toolkit for developing smart contracts on the Ink! platform, which is designed for the Polkadot ecosystem. It provides a set of utilities, libraries, and tools to streamline the process of writing, testing, and deploying Ink! smart contracts.

Pros

  • Simplifies the development process for Ink! smart contracts
  • Includes a variety of pre-built components and utilities
  • Integrates well with the Polkadot ecosystem
  • Regularly updated and maintained by the community

Cons

  • Limited documentation compared to more established smart contract platforms
  • Relatively new project, which may lead to potential instability or breaking changes
  • Steeper learning curve for developers not familiar with Rust or Polkadot
  • Smaller ecosystem compared to Ethereum or other major blockchain platforms

Code Examples

  1. Creating a simple token contract:
#![cfg_attr(not(feature = "std"), no_std)]

use ink_lang as ink;

#[ink::contract]
mod simple_token {
    #[ink(storage)]
    pub struct SimpleToken {
        total_supply: Balance,
        balances: ink_storage::collections::HashMap<AccountId, Balance>,
    }

    impl SimpleToken {
        #[ink(constructor)]
        pub fn new(initial_supply: Balance) -> Self {
            let mut balances = ink_storage::collections::HashMap::new();
            let caller = Self::env().caller();
            balances.insert(caller, initial_supply);
            Self {
                total_supply: initial_supply,
                balances,
            }
        }

        #[ink(message)]
        pub fn balance_of(&self, owner: AccountId) -> Balance {
            self.balances.get(&owner).copied().unwrap_or(0)
        }
    }
}
  1. Implementing a transfer function:
#[ink(message)]
pub fn transfer(&mut self, to: AccountId, value: Balance) -> bool {
    let from = self.env().caller();
    let from_balance = self.balance_of(from);
    if from_balance < value {
        return false;
    }
    self.balances.insert(from, from_balance - value);
    let to_balance = self.balance_of(to);
    self.balances.insert(to, to_balance + value);
    true
}
  1. Adding events to the contract:
#[ink(event)]
pub struct Transfer {
    #[ink(topic)]
    from: Option<AccountId>,
    #[ink(topic)]
    to: Option<AccountId>,
    value: Balance,
}

// Inside the transfer function:
self.env().emit_event(Transfer {
    from: Some(from),
    to: Some(to),
    value,
});

Getting Started

To start using ink-kit, follow these steps:

  1. Install Rust and cargo-contract:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install cargo-contract --force
  1. Create a new Ink! project:
cargo contract new my_contract
cd my_contract
  1. Build and test your contract:
cargo contract build
cargo test
  1. Deploy your contract using the Polkadot.js Apps or a similar tool.

Competitor Comparisons

1,440

Polkadot's ink! to write smart contracts.

Pros of ink

  • More actively maintained with frequent updates and contributions
  • Extensive documentation and examples for developers
  • Larger community support and ecosystem integration

Cons of ink

  • Steeper learning curve for beginners
  • May have more complex setup and configuration

Code Comparison

ink:

#[ink::contract]
mod my_contract {
    #[ink(storage)]
    pub struct MyContract {
        value: bool,
    }
    // ... implementation
}

ink-kit:

#[ink_kit::contract]
mod my_contract {
    #[ink_kit(storage)]
    pub struct MyContract {
        value: bool,
    }
    // ... implementation
}

Key Differences

  • Syntax: ink uses #[ink::contract] while ink-kit uses #[ink_kit::contract]
  • Attribute naming: ink uses #[ink(storage)] while ink-kit uses #[ink_kit(storage)]
  • Feature set: ink generally offers more advanced features and optimizations
  • Community: ink has a larger user base and more third-party integrations

Use Cases

  • ink: Suitable for complex smart contract development and production-ready projects
  • ink-kit: May be more appropriate for simpler contracts or specific use cases

Conclusion

While both ink and ink-kit provide tools for smart contract development on Substrate-based blockchains, ink offers a more comprehensive and widely-adopted solution. However, ink-kit may still be valuable for certain scenarios or developers with specific requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Ink Kit Banner

Ink Kit

Looking for React UI components? The ecosystem has matured significantly with excellent options like shadcn/ui, Radix UI, Chakra UI, and Mantine. For wallet connectivity specifically, check out RainbowKit or ConnectKit.


About This Project

Ink Kit is a React component library that provided UI components, app layouts, and themes, plus a wallet connection component built on wagmi. Modern alternatives now offer better maintained solutions for both general UI and web3-specific needs.

Installation

If you're maintaining an existing project using Ink Kit:

npm install @inkonchain/ink-kit@0.9.1-beta.19
# or
pnpm install @inkonchain/ink-kit@0.9.1-beta.19

Usage

// Import styles first at the root of your project (required)
import "@inkonchain/ink-kit/style.css";
// Import components as needed
import { Button } from "@inkonchain/ink-kit";

function App() {
  return (
    <div>
      <Button onClick={() => {}} size="md" variant="secondary">
        Ship It
      </Button>
    </div>
  );
}

Note: Ink Kit classes are prefixed with ink: and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence.

Key Features

  • 🎨 Customizable app layout templates
  • ✨ Magical animated components
  • 🎭 Vibrant themes
  • ⛓️ Onchain-focused development
  • 🚀 Efficient developer experience
  • 📱 Polished, engaging interfaces

Theming

By default, Ink Kit provides a couple of themes already in the stylesheet:

  • Light (light-theme)
  • Dark (dark-theme)
  • Contrast (contrast-theme)
  • Neo (neo-theme)
  • Morpheus (morpheus-theme)

To specify which theme to use, add the ink:THEME_ID to your document root:

<html class="ink:dark-theme">
  ...

If you want to programmatically set this value, you can use the useInkThemeClass:

const theme = getMyCurrentTheme();
useInkThemeClass(theme === "light" ? "ink:neo-theme" : "ink:dark-theme");

Custom Theme

To create a custom theme, you can override CSS variables:

:root {
  --ink-button-primary: rgb(10, 55, 10);
  ...
}

To see examples on specific colors that you can override, check the following theme section of the Ink Kit repository.

Resources


This repository was archived in October 2025. The code remains available under the MIT license for anyone who wishes to reference or fork it.

NPM DownloadsLast 30 Days