README

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:

bash
npm install @inkonchain/[email protected]
 or
pnpm install @inkonchain/[email protected]


 Usage

tsx
// Import styles first at the root of your project (required)
import "@inkonchain/ink-kit/style.css";


tsx
// Import components as needed
import { Button } from "@inkonchain/ink-kit";

function App() {
  return (
    
       {}} size="md" variant="secondary"
        Ship It
      
    
  );
}


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:

tsx

  ...


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

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


 Custom Theme

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

css
: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 issues