ink-kit
React component library for onchain applications - See README for modern alternatives
Top Related Projects
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
- 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)
}
}
}
- 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
}
- 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:
- Install Rust and cargo-contract:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install cargo-contract --force
- Create a new Ink! project:
cargo contract new my_contract
cd my_contract
- Build and test your contract:
cargo contract build
cargo test
- Deploy your contract using the Polkadot.js Apps or a similar tool.
Competitor Comparisons
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
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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
- Storybook Documentation: ink-kit.inkonchain.com
- NPM Package: @inkonchain/ink-kit
This repository was archived in October 2025. The code remains available under the MIT license for anyone who wishes to reference or fork it.
Top Related Projects
Polkadot's ink! to write smart contracts.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot