[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1500":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":15,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":26,"discoverSource":27},1500,"ink-kit","inkonchain\u002Fink-kit","inkonchain","React component library for onchain applications - See README for modern alternatives","https:\u002F\u002Fink-kit.inkonchain.com",null,"TypeScript",36487,430,59,2,0,42.9,"MIT License",true,false,"main",[],"2026-06-12 02:00:28","\u003Cimg src=\"..\u002Fsrc\u002Fimages\u002Fbanner.webp\" alt=\"Ink Kit Banner\" style=\"width: 100%; border-radius: 8px; margin-bottom: 2rem;\" \u002F>\n\n# Ink Kit\n\n> **Looking for React UI components?** The ecosystem has matured significantly with excellent options like [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F), [Radix UI](https:\u002F\u002Fwww.radix-ui.com\u002F), [Chakra UI](https:\u002F\u002Fchakra-ui.com\u002F), and [Mantine](https:\u002F\u002Fmantine.dev\u002F). For wallet connectivity specifically, check out [RainbowKit](https:\u002F\u002Fwww.rainbowkit.com\u002F) or [ConnectKit](https:\u002F\u002Fdocs.family.co\u002Fconnectkit).\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\u002Fink-kit@0.9.1-beta.19\n# or\npnpm install @inkonchain\u002Fink-kit@0.9.1-beta.19\n```\n\n## Usage\n\n```tsx\n\u002F\u002F Import styles first at the root of your project (required)\nimport \"@inkonchain\u002Fink-kit\u002Fstyle.css\";\n```\n\n```tsx\n\u002F\u002F Import components as needed\nimport { Button } from \"@inkonchain\u002Fink-kit\";\n\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003CButton onClick={() => {}} size=\"md\" variant=\"secondary\">\n        Ship It\n      \u003C\u002FButton>\n    \u003C\u002Fdiv>\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\u003Chtml class=\"ink:dark-theme\">\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:\u002F\u002Fgithub.com\u002Finkonchain\u002Fink-kit\u002Ftree\u002Fmain\u002Fsrc\u002Fstyles\u002Ftheme) section of the Ink Kit repository.\n\n## Resources\n\n- **Storybook Documentation**: [ink-kit.inkonchain.com](https:\u002F\u002Fink-kit.inkonchain.com\u002F)\n- **NPM Package**: [@inkonchain\u002Fink-kit](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@inkonchain\u002Fink-kit)\n\n---\n\nThis repository was archived in October 2025. The code remains available under the MIT license for anyone who wishes to reference or fork it.\n","Ink Kit 是一个专为链上应用设计的 React 组件库，提供 UI 组件、应用布局和主题，并集成了基于 wagmi 的钱包连接组件。其核心功能包括可定制的应用布局模板、动画组件、丰富的主题选项以及高效的开发体验，特别适用于需要快速搭建美观且功能完备的区块链 Web 应用场景。尽管项目已归档，不再维护，但 Ink Kit 依然可以通过 CSS 变量进行高度自定义，支持多种预设主题（如浅色、深色、对比度等），并提供了 Storybook 文档和 NPM 包以方便开发者使用。","2026-06-11 02:44:09","top_all"]