# Ink Kit
> **Looking for React UI components?** The ecosystem has matured significantly with excellent options like [shadcn/ui](https://ui.shadcn.com/), [Radix UI](https://www.radix-ui.com/), [Chakra UI](https://chakra-ui.com/), and [Mantine](https://mantine.dev/). For wallet connectivity specifically, check out [RainbowKit](https://www.rainbowkit.com/) or [ConnectKit](https://docs.family.co/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/ink-kit@0.9.1-beta.19
# or
pnpm install @inkonchain/ink-kit@0.9.1-beta.19
```
## 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 (
{icon || defaultIcon}
{title}
{description && (
{description}
)}
Wallet
,
iconLeft: (
{iconLeft}
}
{child}
{iconRight && {iconRight}
}
)}
{child}
)}
{button}
{icon}
{children}
);
};
CardInfos.displayName = "CardInfos";
================================================
FILE: src/components/Card/Content/Image.tsx
================================================
import * as React from "react";
import { classNames } from "../../../util/classes";
import { Slot } from "../../Slot";
export interface ImageProps extends React.PropsWithChildren {
variant?: "default" | "square";
className?: string;
mainLabels?: React.ReactNode;
secondaryLabels?: React.ReactNode;
}
export const Image: React.FC
{(mainLabels || secondaryLabels) && (
)}
{children}
);
};
Image.displayName = "Image";
================================================
FILE: src/components/Card/Content/LargeLink.tsx
================================================
import { PropsWithChildren } from "react";
import { classNames } from "../../../util/classes";
import { Slot, Slottable } from "../../Slot";
import { InkIcon } from "../../..";
export interface LargeLinkProps extends PropsWithChildren {
className?: string;
asChild?: boolean;
linkIcon?: React.ReactNode;
href?: string;
target?: string;
}
export const LargeLink = ({
children,
className,
asChild,
linkIcon = (
{mainLabels}
{secondaryLabels && (
{secondaryLabels}
)}
{child}
{linkIcon}
)}
{children}
);
};
LargeLinks.displayName = "LargeLinks";
================================================
FILE: src/components/Card/Content/Link.tsx
================================================
import { InkIcon } from "../../..";
import { Tiny } from "./Tiny";
interface LinkProps {
className?: string;
title: string;
description: string;
icon?: React.ReactNode;
linkIcon?: React.ReactNode;
}
export const Link = ({
className,
title,
description,
icon,
linkIcon =
{linkIcon}
)}
{title}
{buttons}
{icon}
);
};
Tiny.displayName = "Tiny";
================================================
FILE: src/components/Card/Content/TitleAndDescription.tsx
================================================
import { classNames, variantClassNames } from "../../../util/classes";
export interface TitleAndDescriptionProps {
title: React.ReactNode;
description?: React.ReactNode;
size?: "default" | "small" | "cardInfo";
}
export const TitleAndDescription = ({
title,
description,
size = "default",
}: TitleAndDescriptionProps) => {
return (
{title}
{description && (
{description}
)}
Checkbox
{placeholder}
{/** This placeholder is used to ensure the content is visible when the fade out is active */}
{placeholder}
{children}
{children}
{description && (
{iconLeft}
)}
{child}
{iconRight && (
{iconRight}
)}
)}
{items.map((item) => (
) : (
"None"
)}
{item.iconLeft}
))}
{iconRight || (
}
{...props}
>
{children}
);
};
ListboxOption.displayName = "ListboxOption";
================================================
FILE: src/components/Listbox/ListboxOptions.tsx
================================================
import { ListboxOptions as HeadlessListboxOptions } from "@headlessui/react";
import { PropsWithChildren } from "react";
import { Panel } from "../Panel";
import { classNames } from "../../util/classes";
export interface ListboxOptionsProps extends PropsWithChildren {
className?: string;
}
export const ListboxOptions = ({
className,
children,
}: ListboxOptionsProps) => {
return (
{title}
{content}
{children}
);
};
Panel.displayName = "Panel";
================================================
FILE: src/components/Panel/index.ts
================================================
export * from "./Panel";
================================================
FILE: src/components/Popover/Content/PopoverContentInfo.tsx
================================================
import React from "react";
export interface PopoverContentInfoProps {
title: string;
content?: React.ReactNode;
icon?: React.ReactNode;
}
export const PopoverContentInfo: React.FC
{title}
{content}
{icon}
}
{headerContent}
)}
{children}
{options.map((option, index) => {
const ButtonComponent = option.asChild ? Slot : "button";
return (
{
itemsRef.current[index] = el;
}}
key={option.value}
onClick={() => {
setSelectedOption(option.value);
onOptionChange(option, index);
}}
draggable={false}
>
{option.children}
);
})}
{isMounted && selectedOption && (
)}
{icon && (
);
});
Tag.displayName = "Tag";
================================================
FILE: src/components/Tag/index.ts
================================================
export * from "./Tag";
================================================
FILE: src/components/Toggle/Toggle.stories.tsx
================================================
import type { Meta, StoryObj } from "@storybook/react";
import { Toggle, ToggleProps } from "./index";
import { fn } from "@storybook/test";
import { useEffect, useState } from "react";
const meta: Meta
{icon}
)}
{children}
{variants.map((variant) => (
ink:text-{variant} - The quick brown fox jumps over the lazy
dog
),
...args,
variant,
}}
/>
))}
),
],
component: Typography,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
args: {},
};
export default meta;
type Story = StoryObj{Story()}
,
],
component: ConnectWallet,
tags: ["autodocs"],
argTypes: {},
args: {},
};
export default meta;
type Story = StoryObj
Connecting...
···
}
isLoading={!hasLoaded}
>
{isConnected ? (
<>
{connectors.map((connector) => (
connect({ connector })}
>
{connector.name}
))}
)}
Balance
{isSuccess ? `${balance.value} ${balance.symbol}` : "..."}
{firstValues.map((firstValue, i) => (
);
};
================================================
FILE: src/decorators/WalletProvider.tsx
================================================
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { metaMask, mock } from "wagmi/connectors";
import { inkConfig } from "../providers.index";
import { createConfig, WagmiProvider } from "wagmi";
import { Decorator } from "@storybook/react";
import { DEFAULT_MOCK_ACCOUNT } from "../util/mocks";
const config = createConfig({
connectors: [
metaMask(),
mock({
accounts: [DEFAULT_MOCK_ACCOUNT],
features: {
defaultConnected: true,
reconnect: true,
},
}),
],
chains: inkConfig.chains,
transports: inkConfig.transports,
ssr: true,
});
const queryClient = new QueryClient();
export const WalletProvider: Decorator = (Story) => {
return (
{secondValues.map((secondValue, j) => {
return (
))}
Click to copy icon name
{title}
{Object.entries(iconsOrFolder).map(([name, IconOrFolder]) => {
if (!isIconFolder(IconOrFolder)) {
return (
`}
onClick={() =>
navigator.clipboard.writeText(`<${title}.${name} />`)
}
>
);
}
})}
{text}
* It's content is defined by the children prop, which can be used with the [InkPageLayout component](?path=/docs/layouts-inkpagelayout--docs) */ const meta: Meta
Some content
Header content
,
topNavigation:
If the main content is bigger than the screen, the side nav will
be sticky.
Bottom
{mainIcon}
{mobileNavigation && (
)}
{mainIcon}
{topNavigation && (
{topNavigation}
)}
{headerContent}
{sideNavigation && (
{sideNavigation}
)}
{children}
{mobileNavigation}
)}
);
};
InkLayout.displayName = "InkLayout";
================================================
FILE: src/layout/InkLayout/InkLayoutContext.tsx
================================================
import { createContext, useContext, useEffect, useState } from "react";
const InkLayoutContext = createContext<{
isMobileNavOpen: boolean;
setIsMobileNavOpen: (isOpen: boolean) => void;
}>({
isMobileNavOpen: false,
setIsMobileNavOpen: () => {},
});
export const useInkLayoutContext = () => {
return useContext(InkLayoutContext);
};
export const InkLayoutProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
useEffect(() => {
isMobileNavOpen
? (document.body.style.overflow = "hidden")
: (document.body.style.overflow = "auto");
}, [isMobileNavOpen]);
return (
{leftIcon}
}
{child}
{rightIcon &&
)}
{rightIcon}
}
{title}
{children}
{icon}
* Note that the `InkLayout` component is included only as an example. It is not required for this component to function. */ const meta: Meta
Header Content
}
>
{children}
);
};
InkPageLayout.displayName = "InkPageLayout";
================================================
FILE: src/layout/InkParts/InkPanel.stories.tsx
================================================
import type { Meta, StoryObj } from "@storybook/react";
import { InkHeader, InkIcon, InkPanel, InkPanelProps } from "../..";
/**
* This component provides a simple layout container with a header and a content area.
*/
const meta: MetaAnd then some text here, how fun! And some more!
Some footer
),
},
};
export default meta;
type Story = StoryObjJust some content here
,
},
};
================================================
FILE: src/layout/InkParts/InkPanel.tsx
================================================
import { PropsWithChildren } from "react";
import { classNames, variantClassNames } from "../../util/classes";
import { forwardRef } from "react";
export interface InkPanelProps extends PropsWithChildren {
className?: string;
size?: "auto" | "lg" | "md";
centered?: boolean;
shadow?: boolean;
}
export const InkPanel = forwardRef
{children}
);
}
);
InkPanel.displayName = "InkPanel";
================================================
FILE: src/layout/InkParts/index.ts
================================================
export * from "./InkHeader";
export * from "./InkPageLayout";
export * from "./InkPanel";
================================================
FILE: src/layout/index.ts
================================================
export * from "./InkLayout";
export * from "./InkParts";
================================================
FILE: src/providers.index.ts
================================================
import { Chain } from "viem";
import { http, Transport } from "wagmi";
import { inkSepolia } from "wagmi/chains";
const chains = [inkSepolia] as const satisfies Chain[];
const transports = {
[inkSepolia.id]: http(),
} as const satisfies RecordColors
{colors.map((color) => (
{color}
))}
Theme-Independent Colors
{independentColors.map((color) => (
{color}
))}
{shadows.map((sh) => (
);
}
const meta: Meta = {
title: "Design/Shadows",
component: Shadows,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
};
export default meta;
type Story = StoryObj
{sh}
))}