Welcome to Ink Kit

⚠️ This project is archived and no longer maintained

Ink Kit is no longer being actively developed or maintained. We recommend using the modern alternatives listed below for your projects.

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 (archived).

Resources

Documentation: Visit our Storybook (archived)
GitHub repository: github.com/inkonchain/ink-kit (archived)

Recommended Modern Alternatives

Since Ink Kit is no longer maintained, we recommend the following actively maintained alternatives for your projects:

UI Component Libraries

shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS. Copy and paste components directly into your project.
Radix UI - Unstyled, accessible components for building high‑quality design systems and web apps.
Chakra UI - Simple, modular and accessible component library that gives you the building blocks for your React applications.
Mantine - A fully featured React components library with 100+ customizable components.

Wallet Connectivity (Onchain-focused)

RainbowKit - The best way to connect a wallet. Designed for everyone. Built for developers.
ConnectKit - A powerful React component library for connecting wallets to your dapp, built on top of wagmi.

These alternatives are actively maintained, have strong communities, and offer excellent documentation and developer experiences.

Transaction Fees Kraken Verify