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.
npm install @inkonchain/ink-kit
# or
pnpm install @inkonchain/ink-kit// 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.
- 🎨 Customizable app layout templates
- ✨ Magical animated components
- 🎭 Vibrant themes
- ⛓️ Onchain-focused development
- 🚀 Efficient developer experience
- 📱 Polished, engaging interfaces
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");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.
- Documentation: Visit our Storybook
- Contributing: Visit our GitHub repository
This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.
