React component library for onchain applications - See README for modern alternatives
React component library for onchain applications - See README for modern alternatives
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.
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.
If you're maintaining an existing project using Ink Kit:
npm install @inkonchain/[email protected]
# or
pnpm install @inkonchain/[email protected]
// 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 (
);
}
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.
By default, Ink Kit provides a couple of themes already in the stylesheet:
light-theme)dark-theme)contrast-theme)neo-theme)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");
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.
This repository was archived in October 2025. The code remains available under the MIT license for anyone who wishes to reference or fork it.