ink-kit
Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨
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

Welcome to Ink Kit
Ink Kit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components.
Install
npm install @inkonchain/ink-kit
# or
pnpm install @inkonchain/ink-kit
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
- Documentation: Visit our Storybook
- Contributing: Visit our GitHub repository
WIP Notice
This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.
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