[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10877":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":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":34,"discoverSource":35},10877,"liftkit","Chainlift\u002Fliftkit","Chainlift","Components from design to production","https:\u002F\u002Fwww.chainlift.io\u002Fliftkit",null,"CSS",3267,61,15,19,0,2,3,16,6,64.48,"Apache License 2.0",false,"main",[26,27,28,29,30],"component-library","css","nextjs","shadcn","web","2026-06-12 04:00:52","\u003C!-- markdownlint-disable -->\n\u003Cbr \u002F>\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fchainlift\u002Fliftkit\">\n    \u003Cimg src=\"https:\u002F\u002Fcdn.prod.website-files.com\u002F657f62adb6ceeafe578853be\u002F68748d8bdb8b734290a3db92_h-lockup-transparent.svg\" width=\"240px\" alt=\"chainlift-liftkit\">\n  \u003C\u002Fa>\n  \u003Cp>\n    \u003Cstrong>\n      The UI Framework for Perfectionists\n    \u003C\u002Fstrong>\n  \u003C\u002Fp>\n\n[![css][css-shield]][css-url]\n[![NextJS][nextjs-shield]][nextjs-url]\n\n[![GPL2 License][license-shield]][license-url]\n[![Issues][issues-shield]][issues-url]\n\n\n> [!WARNING]\n> **NOT RECOMMENDED FOR PRODUCTION USE** \n> \n> **The current version of LiftKit was developed by a designer without consulting professional developers, and you can tell.** Thanks to community feedback, the project is currently being rewritten to satisfy modern best practices. The new components will wrap around Base UI primitives. The updated docs will include live component demos, copy-pastable code samples, and more. As of March 4, 2026, this initiative is about 50% complete.\n> \n> Thank you for your patience. To receive an email when new versions come out, visit **[chainlift.io\u002Fliftkit](https:\u002F\u002Fwww.chainlift.io\u002Fliftkit)** and input your email underneath \"Get Notified About Updates\" in the hero section.\n\n\u003C\u002Fdiv>\n\u003C!-- markdownlint-restore -->\n\n \n\n# :grey_question: What is LiftKit?\n\nLiftKit is a UI framework that makes you a better designer without even realizing it. At its core, it's a platform-agnostic system of formulas for scaling, spacing, and color that automatically enforce design best practices such as optical symmetry, balanced proportions, and smooth color ramps.\n\n## Overview\n\n- The following instructions are easier to read on our website: See [Documentation](https:\u002F\u002Fwww.chainlift.io\u002Fliftkit\u002Fget-started)\n\n### This is the official repo.\n\nThis is the official repository. Currently, it only has support for Next.js without Tailwind. The project is maintained by Chainlift, which is itself maintained entirely by part-time contributors. So while we do plan to expand support to every framework imaginable, we are currently limited by time and availability.\n\nCommunity contributors are responsible for their own forks. However, we help out however we can by adding serious contributors to our internal Slack, where they can communicate and collaborate with everyone else working on the project.\n\n### Community Projects\n\nNot officially supported by Chainlift, but we do communicate with the owners. Contact each project's owner for support.\n\n- [liftkit-tailwind](https:\u002F\u002Fgithub.com\u002Fjellydeck\u002Fliftkit-tailwind)\n\n### How to Become a Contributor\n\nWe strongly prefer that contributors work with us directly to maintain the system's integrity.\n\nIf interested in contributing and being listed on our site and this readme, contact info@chainlift.io with a brief introduction and description of how you'd like to help.\n\n# Install for Next.js\n\nThis documentation assumes the following:\n\n- You already have **Node.js**, **npm**, and **Git** installed on your local machine\n- You’re familiar with basic terminal commands like `cd`\n\n## 1. Create the Config Files\n\n### Option A: Clone Template Project\n\n1. Paste the following command into your terminal to clone the template:\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FChainlift\u002Fliftkit-template.git\n   ```\n\n2. `cd` into the newly-created project.\n\n   - If you get an error that says `direnv: error`, just ignore it. It's a bug we'll fix soon.\n\n3. Run:\n\n   ```bash\n   npm install\n   ```\n\n4. Install the components you need (see section 2 below).\n5. Import LiftKit’s CSS into your app’s `globals.css`:\n\n   ```css\n   @import url(\"@\u002Flib\u002Fcss\u002Findex.css\");\n   ```\n\n#### What’s in the template?\n\nA blank Next.js project with LiftKit Core’s config files pre-installed—fastest way to get up and running.\n\n---\n\n### Option B: Add to Existing Next.js Project\n\n1. `cd` into your project’s root directory.\n2. Install LiftKit CLI as a dev dependency:\n\n   ```bash\n   npm install @chainlift\u002Fliftkit --save-dev\n   ```\n\n3. Initialize LiftKit:\n\n   ```bash\n   npx liftkit init\n   ```\n\n   - If prompted to add an `add` script to `package.json`, say **yes**.\n   - If prompted to install **shadcn** as a devDependency, say **yes**.\n\n4. Install the components you need (see section 2 below).\n5. Import LiftKit’s CSS into your app’s `globals.css`:\n\n   ```css\n   @import url(\"@\u002Flib\u002Fcss\u002Findex.css\");\n   ```\n\n#### What does `npx liftkit init` do?\n\nIt adds two files to your project root:\n\n- `components.json`\n- `tailwind.config.ts`\n\n> _You do not need Tailwind itself to use LiftKit—just the config file for now._\n\n---\n\n## 2. Install LiftKit Components & Styles\n\nLiftKit Core is just the base config. LiftKit Components are the actual UI components (with their CSS). At build time, unused CSS is tree-shaken away.\n\n| Method            | Instructions                                      | Command                                 |\n| ----------------- | ------------------------------------------------- | --------------------------------------- |\n| **Everything**    | All components, CSS, and types                    | `npm run add all`                       |\n| **One Component** | Specified component only (with its CSS and types) | `npm run add component-name-kebab-case` |\n| **Base**          | CSS and types only                                | `npm run add base`                      |\n\n> If warned about React 19 compatibility, add `--force` and proceed.\n\n---\n\n## FAQ\n\n- **I only installed one component, but it installed multiple. Why?**\n  Some components import others. E.g., installing `Badge` also brings in `Icon`.\n- **Why did it install CSS for components I’m not using?**\n  By design—to let you play freely. Unused styles are removed at build time.\n- **How can I get rid of unused CSS?**\n  It’s automatically removed at build time.\n- **Does LiftKit require Tailwind?**\n  No—only a `tailwind.config.ts` file is needed (a requirement of the current registry). Tailwind itself is _not_ a dependency.\n\n---\n\n## The Figma Template\n\n> **Warning:** It’s currently a dumpster fire. We’re working on improvements—contributors welcome!\n\n### Clone the Community File\n\n- [View File on Figma](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1404856652359938563) (opens in new tab)\n\n---\n\n## Known Issues\n\n### Button variants are out of control\n\n- We know. We’ll fix it soon.\n\n  - Buttons adjust padding based on icon presence, and padding values aren’t controllable via props.\n  - Our only option was to list everything explicitly—clearly a bad idea in hindsight.\n\n### Local variables need documentation\n\n- Figma doesn’t support margins or `em` units, so we converted everything to pixels (assuming `1rem = 16px`).\n- Variables are organized into collections:\n\n  - **Global collection** = base `LkSizeUnit` variables\n  - **Text Spacing Vals** = subsets per `LkFontClass`, simulating spacing props like `.m-bottom-xs`\n\n---\n\n## Clone the Webflow Template\n\n- [View on Made in Webflow](https:\u002F\u002Fwww.webflow.com) (opens in new tab)\n\n\u003C!-- MARKDOWN LINKS & IMAGES -->\n\n[nextjs-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNext.js-000000.svg?style=for-the-badge&logo=next.js&logoColor=white\n[nextjs-url]: https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\n[nix-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnix-0175C2?style=for-the-badge&logo=NixOS&logoColor=white\n[nix-url]: https:\u002F\u002Fnixos.org\u002F\n[css-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCSS3-1572B6.svg?style=for-the-badge&logo=css3&logoColor=white\n[css-url]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\n[shadcn-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fshadcn-registry-%23EDE9FE.svg?style=for-the-badge&logo=vercel&logoColor=black\n[shadcn-url]: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry\n[license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fchainlift\u002Fliftkit.svg?style=for-the-badge\n[license-url]: https:\u002F\u002Fgithub.com\u002Fchainlift\u002Fliftkit\u002Fblob\u002Fmaster\u002FLICENSE\n[issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fchainlift\u002Fliftkit.svg?style=for-the-badge\n[issues-url]: https:\u002F\u002Fgithub.com\u002Fchainlift\u002Fliftkit\u002Fissues\n[license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fchainlift\u002Fliftkit.svg?style=for-the-badge\n[license-url]: https:\u002F\u002Fgithub.com\u002Fchainlift\u002Fliftkit\u002Fblob\u002Fmaster\u002FLICENSE\n","LiftKit 是一个面向完美主义者的UI框架，旨在通过自动执行设计最佳实践（如视觉对称、平衡比例和平滑色彩过渡）来提升设计师的工作效率。项目核心功能包括一套跨平台的公式系统，用于控制缩放、间距和颜色等关键设计元素。目前仅支持Next.js，并且不推荐直接用于生产环境，因为该项目正在根据社区反馈进行重构以符合现代最佳实践。LiftKit 适合那些希望在Web开发中快速实现高质量界面设计但又不想牺牲代码质量或性能的场景。尽管当前维护团队规模较小，但他们积极鼓励社区参与贡献，共同推动项目的进一步发展。","2026-06-11 03:30:35","top_topic"]