ZOYKU火線榜

inkonchain/ink-kit技術文件

inkonchain/ink-kit open-source repository on GitHub

多語言回退提示:當前倉庫原作者暫未發布在地化文件,已為您無縫切換至官方英文原版(English),排版及程式碼實例完整保真。
npm i ink-kit

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/[email protected]
# or
pnpm install @inkonchain/[email protected]

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.

文件鏡像歸檔自 GitHub 官方源路徑 · 造訪原專案 GitHub
最後同步快照:2026-11-09