![\"Ink](\"../src/images/banner.webp\")
\n\n# Ink Kit\n\n> **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).\n\n---\n\n## About This Project\n\nInk 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.\n\n## Installation\n\nIf you're maintaining an existing project using Ink Kit:\n\n```bash\nnpm install @inkonchain/ink-kit@0.9.1-beta.19\n# or\npnpm install @inkonchain/ink-kit@0.9.1-beta.19\n```\n\n## Usage\n\n```tsx\n// Import styles first at the root of your project (required)\nimport \"@inkonchain/ink-kit/style.css\";\n```\n\n```tsx\n// Import components as needed\nimport { Button } from \"@inkonchain/ink-kit\";\n\nfunction App() {\n return (\n {icon || defaultIcon}
\n \n
\n {dismissible && (\n {title}
\n {description && (\n {description}
\n )}\n \n
\n ),\n ],\n parameters: { disableMatrix: true },\n args: {\n variant: \"wallet\",\n children: Wallet
,\n iconLeft: (\n {iconLeft}
}\n {child}\n {iconRight && {iconRight}
}\n \n )}\n \n
\n );\n};\n\nCallToAction.displayName = \"CallToAction\";\n"
},
{
"path": "src/components/Card/Content/CardInfo.tsx",
"content": "import { PropsWithChildren } from \"react\";\nimport { classNames } from \"../../../util/classes\";\nimport { TitleAndDescription } from \"./TitleAndDescription\";\nimport { Card } from \"../Card\";\n\nexport interface CardInfoProps extends PropsWithChildren {\n className?: string;\n icon?: React.ReactNode;\n title: string;\n description: string;\n}\nexport const CardInfo = ({\n className,\n icon,\n title,\n description,\n children,\n}: CardInfoProps) => {\n return (\n {button}
\n \n {mainLabels}\n
\n {secondaryLabels && (\n \n {secondaryLabels}\n
\n )}\n \n )}\n \n {child}\n
\n {linkIcon}\n \n )}\n \n {linkIcon}\n
\n )}\n \n );\n};\n\nLink.displayName = \"Link\";\n"
},
{
"path": "src/components/Card/Content/Tagline.tsx",
"content": "import { classNames } from \"../../../util/classes\";\n\ninterface TaglineProps {\n title: React.ReactNode;\n buttons: React.ReactNode;\n className?: string;\n}\n\nexport const Tagline: React.FC\n {title}\n
\n\n\n {buttons}\n
\n \n );\n};\n\nTagline.displayName = \"Tagline\";\n"
},
{
"path": "src/components/Card/Content/Tiny.tsx",
"content": "import { PropsWithChildren } from \"react\";\nimport { classNames } from \"../../../util/classes\";\nimport { TitleAndDescription } from \"./TitleAndDescription\";\n\nexport interface TinyProps extends PropsWithChildren {\n className?: string;\n icon?: React.ReactNode;\n title: string;\n description: string;\n}\nexport const Tiny = ({\n className,\n icon,\n title,\n description,\n children,\n}: TinyProps) => {\n return (\n \n \n {title}\n \n {description && (\n \n {description}\n
\n )}\n \n );\n};\n\nTitleAndDescription.displayName = \"TitleAndDescription\";\n"
},
{
"path": "src/components/Card/Content/index.ts",
"content": "export * from \"./CallToAction\";\nexport * from \"./CardInfo\";\nexport * from \"./CardInfos\";\nexport * from \"./Image\";\nexport * from \"./LargeLink\";\nexport * from \"./LargeLinks\";\nexport * from \"./Link\";\nexport * from \"./Tagline\";\nexport * from \"./Tiny\";\nexport * from \"./TitleAndDescription\";\n"
},
{
"path": "src/components/Card/index.ts",
"content": "export * from \"./Card\";\nexport * as CardContent from \"./Content\";\n"
},
{
"path": "src/components/Checkbox/Checkbox.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Checkbox, CheckboxProps, CheckboxLabel } from \"./index\";\nimport { fn } from \"@storybook/test\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { ListItem } from \"../ListItem\";\nconst meta: Meta\n \n {\n if (checked || indeterminate) {\n setFirstChildChecked(false);\n setSecondChildChecked(false);\n } else {\n setFirstChildChecked(true);\n setSecondChildChecked(true);\n }\n }}\n />\n \n
\n );\n },\n};\n\n/** If you want to use the Checkbox without its own managed state, set checked={undefined} and onChange={undefined}, and add `data-checked={value}` to the parent item. */\nexport const ManagedByAParentItem: Story = {\n argTypes: {\n onChange: {\n control: false,\n },\n },\n args: {},\n render: (args) => {\n const [checked, setChecked] = useState(args.checked);\n useEffect(() => {\n setChecked(args.checked);\n }, [args.checked]);\n return (\n \n \n \n \n \n
\n Checkbox
\n \n );\n },\n};\n"
},
{
"path": "src/components/Checkbox/Checkbox.tsx",
"content": "import { Checkbox as HeadlessCheckbox } from \"@headlessui/react\";\nimport { classNames } from \"../../util/classes\";\nimport { InkIcon } from \"../..\";\n\nexport interface CheckboxProps\n extends Omit\n
\n\n \n {placeholder}\n
\n {children}\n \n {children}\n \n
\n\n {description && (\n {iconLeft}
}\n {iconRight}
}\n \n );\n }\n);\n\nInput.displayName = \"Input\";\n"
},
{
"path": "src/components/Input/index.ts",
"content": "export * from \"./Input\";\n"
},
{
"path": "src/components/ListItem/ListItem.tsx",
"content": "import { ButtonHTMLAttributes, PropsWithChildren } from \"react\";\nimport { Slot, Slottable } from \"../Slot\";\nimport { classNames, variantClassNames } from \"../../util/classes\";\n\nexport interface ListItemProps\n extends PropsWithChildren\n {child}\n
\n {iconRight && (\n \n {items.map((item) => (\n
\n ) : (\n \"None\"\n )}\n {item.iconLeft}
\n ))}\n \n {iconRight || (\n
\n }\n {...props}\n >\n {children}\n \n );\n};\n\nListboxOption.displayName = \"ListboxOption\";\n"
},
{
"path": "src/components/Listbox/ListboxOptions.tsx",
"content": "import { ListboxOptions as HeadlessListboxOptions } from \"@headlessui/react\";\nimport { PropsWithChildren } from \"react\";\nimport { Panel } from \"../Panel\";\nimport { classNames } from \"../../util/classes\";\n\nexport interface ListboxOptionsProps extends PropsWithChildren {\n className?: string;\n}\n\nexport const ListboxOptions = ({\n className,\n children,\n}: ListboxOptionsProps) => {\n return (\n \n
\n );\n};\n"
},
{
"path": "src/components/Modal/Layouts/index.ts",
"content": "export {\n CallToActionModalContent as CallToAction,\n type CallToActionModalContentProps as CallToActionProps,\n} from \"./CallToActionModalContent\";\n"
},
{
"path": "src/components/Modal/Modal.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Button } from \"../Button\";\nimport {\n ModalProvider,\n useModalContext,\n Modal,\n type ModalProps,\n} from \"./index\";\nimport { fn } from \"@storybook/test\";\nimport { ModalLayout } from \".\";\n\nconst meta: Meta\n
\n {button}\n {title}
\n {content}
\n \n \n
\n );\n }\n\n return (\n \n \n Open Nested\n \n
\n );\n },\n },\n};\n"
},
{
"path": "src/components/Modal/Modal.tsx",
"content": "import {\n Dialog,\n DialogBackdrop,\n DialogPanel,\n DialogTitle,\n} from \"@headlessui/react\";\nimport { useModalContext } from \"./ModalContext\";\nimport { classNames } from \"../../util/classes\";\nimport { InkIcon } from \"../..\";\nimport { useEffect, useRef } from \"react\";\nimport { InkHeader } from \"../../layout/InkParts\";\nimport { InkPanel } from \"../../layout/InkParts/InkPanel\";\n\nexport interface ModalProps\n {children({ closeModal: handleClose })}\n
\n \n
\n );\n};\n"
},
{
"path": "src/components/Popover/Content/index.ts",
"content": "export {\n PopoverContentInfo as Info,\n type PopoverContentInfoProps as InfoProps,\n} from \"./PopoverContentInfo\";\nexport * from \"../../ListItem\";\n"
},
{
"path": "src/components/Popover/Popover.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport {\n Popover,\n PopoverButton,\n PopoverContent,\n PopoverPanel,\n type PopoverProps,\n} from \"./index\";\nimport { InkIcon } from \"../..\";\n\nconst meta: Meta\n
\n {icon && \n {title}\n
\n {content}
\n {icon}
}\n {headerContent}
\n )}\n {children}
\n \n \n
\n \n );\n};\n\nRadio.displayName = \"Radio\";\n"
},
{
"path": "src/components/Radio/RadioGroup.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Radio, RadioGroup, RadioGroupProps, RadioLabel } from \"./index\";\nimport { fn } from \"@storybook/test\";\nimport { useEffect, useState } from \"react\";\n\nconst meta: Meta\n \n {options.map((option, index) => {\n const ButtonComponent = option.asChild ? Slot : \"button\";\n\n return (\n {\n itemsRef.current[index] = el;\n }}\n key={option.value}\n onClick={() => {\n setSelectedOption(option.value);\n onOptionChange(option, index);\n }}\n draggable={false}\n >\n {option.children}\n \n );\n })}\n {isMounted && selectedOption && (\n \n
\n )}\n \n \n );\n};\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"
},
{
"path": "src/components/SegmentedControl/index.ts",
"content": "export * from \"./SegmentedControl\";\n"
},
{
"path": "src/components/Slot/Slot.tsx",
"content": "/**\n * This is a modified version of Radix Primitives' Slot component.\n * It supports slottable children, which is useful for components that need to\n * render a slot inside a slot.\n *\n * It merges the initial implementation with the one that supports multiple children.\n *\n * See https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx\n * for the original implementation.\n *\n * See https://github.com/radix-ui/primitives/blob/12e51326c7ddc7452916aabadf7db4a45352a6bd/packages/react/slot/src/Slot.tsx\n * for the variant that supports multiple children.\n */\n\nimport * as React from \"react\";\n\n// https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx\ntype PossibleRef\n {variants.map((variant) => (\n \n ink:text-{variant} - The quick brown fox jumps over the lazy\n dog\n
\n ),\n ...args,\n variant,\n }}\n />\n ))}\n \n ),\n ],\n component: Typography,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n args: {},\n};\n\nexport default meta;\ntype Story = StoryObj{Story()}
,\n ],\n component: ConnectWallet,\n tags: [\"autodocs\"],\n argTypes: {},\n args: {},\n};\n\nexport default meta;\ntype Story = StoryObj\n Connecting...\n
\n ···\n \n }\n isLoading={!hasLoaded}\n >\n {isConnected ? (\n <>\n \n 
\n
\n {ensName}\n \n ) : (\n <>\n Connect\n \n {connectors.map((connector) => (\n connect({ connector })}\n >\n {connector.name}\n \n ))}\n
\n )}\n \n \n
\n );\n};\n\nconst ConnectedWalletSection = ({\n address,\n listItems,\n}: {\n address: Address;\n listItems?: React.ReactNode;\n}) => {\n const { disconnect } = useDisconnect();\n return (\n <>\n {listItems}\n \n
\n \n Balance\n
\n \n {isSuccess ? `${balance.value} ${balance.symbol}` : \"...\"}\n
\n \n \n
\n \n
\n );\n};\n"
},
{
"path": "src/decorators/MatrixDecorator.tsx",
"content": "import { Decorator } from \"@storybook/react\";\n\ntype MatrixDefinition\n {firstValues.map((firstValue, i) => (\n
\n );\n };\n"
},
{
"path": "src/decorators/WalletProvider.tsx",
"content": "import { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { metaMask, mock } from \"wagmi/connectors\";\nimport { inkConfig } from \"../providers.index\";\nimport { createConfig, WagmiProvider } from \"wagmi\";\nimport { Decorator } from \"@storybook/react\";\nimport { DEFAULT_MOCK_ACCOUNT } from \"../util/mocks\";\n\nconst config = createConfig({\n connectors: [\n metaMask(),\n mock({\n accounts: [DEFAULT_MOCK_ACCOUNT],\n features: {\n defaultConnected: true,\n reconnect: true,\n },\n }),\n ],\n chains: inkConfig.chains,\n transports: inkConfig.transports,\n ssr: true,\n});\n\nconst queryClient = new QueryClient();\n\nexport const WalletProvider: Decorator = (Story) => {\n return (\n \n {secondValues.map((secondValue, j) => {\n return (\n
\n ))}\n Click to copy icon name
\n \n
\n\n {Object.entries(iconsOrFolder).map(([name, IconOrFolder]) => {\n if (isIconFolder(IconOrFolder)) {\n return (\n {title}
\n\n \n {Object.entries(iconsOrFolder).map(([name, IconOrFolder]) => {\n if (!isIconFolder(IconOrFolder)) {\n return (\n
\n );\n }\n })}\n {text}
\n \n * It's content is defined by the children prop, which can be used with the [InkPageLayout component](?path=/docs/layouts-inkpagelayout--docs)\n */\nconst meta: Meta
Some content
\n Header content
,\n topNavigation: \n
\n \n If the main content is bigger than the screen, the side nav will\n be sticky.\n
\n Bottom
\n \n
\n \n setIsMobileNavOpen(!isMobileNavOpen)}\n >\n {isMobileNavOpen ?
\n\n {mainIcon}
\n {mobileNavigation && (\n \n
\n {mainIcon}
\n {topNavigation && (\n {topNavigation}
\n )}\n \n {headerContent}\n
\n {leftIcon}
}\n {rightIcon}
}\n \n \n )}\n \n
\n ),\n ],\n title: \"Layouts/InkHeader\",\n component: InkHeader,\n tags: [\"autodocs\"],\n args: {\n title: \"Example Title\",\n },\n};\n\nexport default meta;\ntype Story = StoryObj{title}
\n {children}\n {icon}
\n \n );\n};\n\nInkHeader.displayName = \"InkHeader\";\n"
},
{
"path": "src/layout/InkParts/InkPageLayout.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { InkPageLayout, InkPageLayoutProps } from \"./InkPageLayout\";\nimport { InkLayout } from \"../InkLayout\";\nimport { ExampleDynamicContent } from \"../ForStories/ExampleDynamicContent\";\n\n/**\n * This component provides a column layout for a page.\n * The `columns` prop determines the number of columns to display. You must then pass the same number of children to the component.\n * \n * Note that the `InkLayout` component is included only as an example. It is not required for this component to function.\n */\nconst meta: Meta
Header Content
}\n >\n And then some text here, how fun! And some more!
\n Some footer
\n \n ),\n },\n};\n\nexport default meta;\ntype Story = StoryObjJust some content here
,\n },\n};\n"
},
{
"path": "src/layout/InkParts/InkPanel.tsx",
"content": "import { PropsWithChildren } from \"react\";\nimport { classNames, variantClassNames } from \"../../util/classes\";\nimport { forwardRef } from \"react\";\n\nexport interface InkPanelProps extends PropsWithChildren {\n className?: string;\n size?: \"auto\" | \"lg\" | \"md\";\n centered?: boolean;\n shadow?: boolean;\n}\n\nexport const InkPanel = forwardRef\n \n
\n );\n}\n```\n\nNote: 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.\n\n## Key Features\n\n- 🎨 **Customizable app layout templates**\n- ✨ **Magical animated components**\n- 🎭 **Vibrant themes**\n- ⛓️ **Onchain-focused development**\n- 🚀 **Efficient developer experience**\n- 📱 **Polished, engaging interfaces**\n\n## Theming\n\nBy default, Ink Kit provides a couple of themes already in the stylesheet:\n\n- Light (`light-theme`)\n- Dark (`dark-theme`)\n- Contrast (`contrast-theme`)\n- Neo (`neo-theme`)\n- Morpheus (`morpheus-theme`)\n\nTo specify which theme to use, add the `ink:THEME_ID` to your document root:\n\n```tsx\n\n ...\n```\n\nIf you want to programmatically set this value, you can use the `useInkThemeClass`:\n\n```tsx\nconst theme = getMyCurrentTheme();\nuseInkThemeClass(theme === \"light\" ? \"ink:neo-theme\" : \"ink:dark-theme\");\n```\n\n### Custom Theme\n\nTo create a custom theme, you can override CSS variables:\n\n```css\n:root {\n --ink-button-primary: rgb(10, 55, 10);\n ...\n}\n```\n\nTo see examples on specific colors that you can override, check the following [theme](https://github.com/inkonchain/ink-kit/tree/main/src/styles/theme) section of the Ink Kit repository.\n\n## Resources\n\n- **Documentation**: Browse components and examples in the sidebar\n- **Contributing**: Visit our [GitHub repository](https://github.com/inkonchain/ink-kit)\n\n## WIP Notice\n\nThis is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.\n"
},
{
"path": "src/styles/Colors.stories.tsx",
"content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { classNames } from \"../util/classes\";\n\nfunction Colors() {\n const colors = [\n \"ink:bg-button-primary ink:text-text-on-primary\",\n \"ink:bg-button-secondary ink:text-text-on-secondary\",\n \"ink:bg-background-dark\",\n \"ink:bg-background-dark-transparent\",\n \"ink:bg-background-light\",\n \"ink:bg-background-light-transparent\",\n \"ink:bg-background-light-invisible\",\n \"ink:bg-background-container\",\n \"ink:bg-status-success-bg ink:text-status-success\",\n \"ink:bg-status-error-bg ink:text-status-error\",\n \"ink:bg-status-alert-bg ink:text-status-alert\",\n ];\n const independentColors = [\n \"ink:bg-ink-light-purple ink:text-text-on-primary\",\n \"ink:bg-ink-dark-purple ink:text-text-on-primary\",\n ];\n return (\n \n \n {color}\n
\n ))}\n Colors
\n {colors.map((color) => (\n\n Theme-Independent Colors\n
\n {independentColors.map((color) => (\n\n {shadows.map((sh) => (\n \n {sh}\n
\n ))}\n \n );\n}\n\nconst meta: Meta = {\n title: \"Design/Shadows\",\n component: Shadows,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\ntype Story = StoryObj