Skip to content
forked from inkonchain/ink-kit

Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨

License

Notifications You must be signed in to change notification settings

yoker22/ink-kit

This branch is 54 commits behind inkonchain/ink-kit:main.

Folders and files

NameName
Last commit message
Last commit date
Jan 7, 2025
Dec 6, 2024
Nov 26, 2024
Jan 6, 2025
Nov 21, 2024
Nov 8, 2024
Nov 12, 2024
Dec 13, 2024
Nov 19, 2024
Nov 11, 2024
Jan 6, 2025
Dec 13, 2024
Nov 20, 2024
Dec 13, 2024

Repository files navigation

Ink Kit Banner

Welcome to Ink Kit

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.

Resources

WIP Notice

This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.

About

Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 85.1%
  • CSS 10.4%
  • JavaScript 2.5%
  • MDX 2.0%