[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1954":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":14,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},1954,"floating-ui","floating-ui\u002Ffloating-ui","A JavaScript library to position floating elements and create interactions for them.","https:\u002F\u002Ffloating-ui.com",null,"TypeScript",32613,1678,246,36,0,9,44.68,"MIT License",false,"master",true,[23,24,25,26,27,28,29,30,31],"dropdown","hacktoberfest","popover","popovers","position","positioning","positioning-engine","tooltip","tooltip-position","2026-06-12 02:00:35","\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffloating-ui\u002Ffloating-ui\u002Fblob\u002Fmaster\u002Fwebsite\u002Fassets\u002Ffloating-ui-banner.png\" alt=\"Floating UI\" width=\"70%\">\n\u003Cp>\n\n> [!NOTE]\n> Popper is now Floating UI! For Popper v2, visit\n> [its dedicated branch](https:\u002F\u002Fgithub.com\u002Ffloating-ui\u002Ffloating-ui\u002Ftree\u002Fv2.x) and [its documentation](https:\u002F\u002Fpopper.js.org\u002Fdocs).\n> For help on migrating, check out the\n> [Migration Guide.](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Fmigration)\n\n[Floating UI](https:\u002F\u002Ffloating-ui.com) is a small library that helps you create\n\"floating\" elements such as tooltips, popovers, dropdowns, and more.\n\nIt offers two main features:\n\n1. **Anchor positioning**: Anchor a floating element (such as a tooltip) to\n   another element (such as a button) while simultaneously ensuring it stays in\n   view as best as possible by avoiding collisions. This feature is available\n   for all platforms.\n2. **User interactions for React**: Hooks and components for composing\n   interactions to create accessible floating UI components.\n\n## Sponsors\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Ca href=\"https:\u002F\u002Fmilfordasset.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg width=\"176\" height=\"150\" src=\"https:\u002F\u002Fgithub.com\u002Ffloating-ui\u002Ffloating-ui\u002Fblob\u002Fmaster\u002Fwebsite\u002Fassets\u002Fsponsors\u002Fmilford.svg\" alt=\"Milford\" \u002F>\u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\nYou can support Floating UI in a variety of ways on\n[Open Collective](https:\u002F\u002Fopencollective.com\u002Ffloating-ui).\n\n## Why\n\nFloating elements are absolutely positioned, typically anchored to another UI\nelement. Ensuring a floating element remains anchored next to another element\ncan be challenging, especially in unique layout contexts like scrolling\ncontainers.\n\nAbsolute positioning can also cause problems when the floating element is too\nclose to the edge of the viewport and becomes obscured, also known as a\ncollision. When a collision occurs, the position must be adjusted to ensure the\nfloating element remains visible.\n\nFurther, floating elements are often interactive, which can raise complex\naccessibility issues when designing user interactions.\n\nFloating UI offers a set of low-level features to help you navigate these\nchallenges and build accessible floating UI components.\n\n## Install\n\nTo install Floating UI, you can use a package manager like npm or a\n[CDN](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Fgetting-started#cdn). There are different\nversions available for different platforms.\n\n### Vanilla\n\nUse on the web with vanilla JavaScript.\n\n```shell\nnpm install @floating-ui\u002Fdom\n```\n\nYou can either start by\n[reading the tutorial](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Ftutorial), which teaches you\nhow to use the library by building a basic tooltip, or you can jump right into\nthe [API documentation](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002FcomputePosition).\n\n### React\n\nUse with [React DOM](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Freact) or\n[React Native](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Freact-native).\n\n#### React DOM\n\n```shell\n# Positioning + interactions\nnpm install @floating-ui\u002Freact\n\n# Positioning only (smaller size)\nnpm install @floating-ui\u002Freact-dom\n```\n\n#### React Native\n\n```shell\nnpm install @floating-ui\u002Freact-native\n```\n\n### Vue\n\nUse with [Vue](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Fvue).\n\n```shell\nnpm install @floating-ui\u002Fvue\n```\n\n### Canvas or other platforms\n\nIf you're targeting a platform other than the vanilla DOM (web), React, or React\nNative, you can create your own\n[Platform](https:\u002F\u002Ffloating-ui.com\u002Fdocs\u002Fplatform). This allows you to support\nthings like Canvas\u002FWebGL, or other platforms that can run JavaScript.\n\n```shell\nnpm install @floating-ui\u002Fcore\n```\n\n## Contributing\n\nThis project is a monorepo written in TypeScript using [pnpm](https:\u002F\u002Fpnpm.io\u002F)\nworkspaces. The website is using Next.js SSG and Tailwind CSS for styling.\n\n- Fork and clone the repo\n- Install dependencies in root directory with `pnpm install`\n- Build initial package dist files with `pnpm run build`\n\n### Testing grounds\n\n#### DOM\n\n`pnpm run --filter @floating-ui\u002Fdom dev` in the root will launch the\n`@floating-ui\u002Fdom` development visual tests at `http:\u002F\u002Flocalhost:1234`. The\nplayground uses React to write each test route, bundled by Vite.\n\nEach route has screenshots taken of the page by Playwright to ensure all the\nfunctionalities work as expected; this is an easy, reliable and high-level way\nof testing the positioning logic.\n\nBelow the main container are UI controls to turn on certain state and options.\nEvery single combination of state is tested visually via the snapshots to cover\nas much as possible.\n\n#### React\n\n`pnpm run --filter @floating-ui\u002Freact dev` in the root will launch the\n`@floating-ui\u002Freact` development tests at `http:\u002F\u002Flocalhost:1234`.\n\n## Credits\n\nThe floating shapes in the banner image are made by the amazing artists\n[@artstar3d](https:\u002F\u002Ffigma.com\u002F@artstar3d),\n[@killnicole](https:\u002F\u002Ffigma.com\u002F@killnicole) and\n[@liiiiiiii](https:\u002F\u002Fwww.figma.com\u002F@liiiiiii) on Figma — check out their work!\n\n## License\n\nMIT\n","Floating UI 是一个用于定位浮动元素并为其创建交互的 JavaScript 库，适用于如提示框、弹出框和下拉菜单等场景。其核心功能包括锚点定位和React平台上的用户交互支持：锚点定位确保浮动元素（例如提示框）与另一个元素（例如按钮）关联时尽可能保持在视图内，避免碰撞；而针对React提供的Hooks和组件则有助于构建可访问性强的浮动UI组件。此库特别适合需要处理复杂布局环境下的浮动元素展示问题，比如滚动容器内的元素定位或解决因绝对定位导致的内容遮挡问题。",2,"2026-06-11 02:47:03","top_all"]