{"id":51801055,"url":"https://github.com/stainless-code/layers","last_synced_at":"2026-07-21T09:33:44.125Z","repository":{"id":371019897,"uuid":"1295523364","full_name":"stainless-code/layers","owner":"stainless-code","description":"Headless manager for modal/dialog/drawer/popover/toast UI — open any layer from anywhere, manage it as an ordered named stack, and optionally await a typed result. UI-agnostic core + React/Preact/Vue/Solid/Angular/Svelte adapters.","archived":false,"fork":false,"pushed_at":"2026-07-12T18:25:23.000Z","size":426,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-12T20:09:29.328Z","etag":null,"topics":["angular","dialog","drawer","headless","modal","monorepo","overlay","popover","preact","react","solid","stack","state-management","svelte","toast","typescript","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@stainless-code/layers","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stainless-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["SutuSebastian"]}},"created_at":"2026-07-09T16:15:03.000Z","updated_at":"2026-07-10T16:34:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/stainless-code/layers","commit_stats":null,"previous_names":["stainless-code/layers"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/stainless-code/layers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Flayers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Flayers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Flayers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Flayers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stainless-code","download_url":"https://codeload.github.com/stainless-code/layers/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Flayers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35719682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-21T02:00:06.728Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dialog","drawer","headless","modal","monorepo","overlay","popover","preact","react","solid","stack","state-management","svelte","toast","typescript","vue"],"created_at":"2026-07-21T09:33:41.839Z","updated_at":"2026-07-21T09:33:44.119Z","avatar_url":"https://github.com/stainless-code.png","language":"TypeScript","funding_links":["https://github.com/sponsors/SutuSebastian"],"categories":[],"sub_categories":[],"readme":"# Layers\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://stainless-code.com/layers/icon.svg\" alt=\"Layers\" height=\"48\" /\u003e\n\u003c/p\u003e\n\nModals are just async functions you forgot to `await`.\n\nHeadless layer/stack manager — modals, dialogs, drawers, popovers, toasts are **layers in named stacks**. Open any layer from anywhere and `await` a typed result. A zero-dependency core plus React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte adapters. State coordination, not UI ownership: Layers owns ordering, keys, transitions, blockers, and the `await client.open(...)` contract; you own rendering, focus, portals, and a11y.\n\n\u003e Experimental — the API may change between minor releases. Pin your version. ([Stability \u0026 versioning](https://stainless-code.com/layers/concepts/stability))\n\nFull docs: [stainless-code.com/layers](https://stainless-code.com/layers).\n\n## Packages\n\n| Package                                                            | Peer                                                                | Install                                            |\n| ------------------------------------------------------------------ | ------------------------------------------------------------------- | -------------------------------------------------- |\n| [`@stainless-code/layers`](packages/core)                          | —                                                                   | `bun add @stainless-code/layers`                   |\n| [`@stainless-code/react-layers`](packages/react)                   | `react`                                                             | `bun add @stainless-code/react-layers`             |\n| [`@stainless-code/preact-layers`](packages/preact)                 | `preact`                                                            | `bun add @stainless-code/preact-layers`            |\n| [`@stainless-code/solid-layers`](packages/solid)                   | `solid-js`                                                          | `bun add @stainless-code/solid-layers`             |\n| [`@stainless-code/angular-layers`](packages/angular)               | `@angular/core`                                                     | `bun add @stainless-code/angular-layers`           |\n| [`@stainless-code/vue-layers`](packages/vue)                       | `vue`                                                               | `bun add @stainless-code/vue-layers`               |\n| [`@stainless-code/lit-layers`](packages/lit)                       | `lit`, `@lit/context`                                               | `bun add @stainless-code/lit-layers`               |\n| [`@stainless-code/alpine-layers`](packages/alpine)                 | `alpinejs`                                                          | `bun add @stainless-code/alpine-layers`            |\n| [`@stainless-code/svelte-layers`](packages/svelte)                 | `svelte`                                                            | `bun add @stainless-code/svelte-layers`            |\n| [`@stainless-code/layers-devtools`](packages/devtools)             | — (Solid panel)                                                     | `bun add -d @stainless-code/layers-devtools`       |\n| [`@stainless-code/react-layers-devtools`](packages/react-devtools) | `react`, `@stainless-code/react-layers`, `@tanstack/react-devtools` | `bun add -d @stainless-code/react-layers-devtools` |\n\nInstall only the adapter for your framework — it pulls the core in transitively and re-exports it, so adapter APIs (`StackProvider`, `useStack`, …) and core APIs (`LayerClient`, `layerOptions`, …) both come from the one package. Each adapter lists its framework as a required peer. Svelte ships two entries: `@stainless-code/svelte-layers` (runes, 5.7+) and `@stainless-code/svelte-layers/store` (stores, 3+). Devtools packages are optional; see [Devtools](https://stainless-code.com/layers/guides/devtools).\n\n## Taste (React)\n\n```tsx\nimport {\n  layerOptions,\n  StackProvider,\n  StackOutlet,\n  useLayer,\n  type LayerComponentProps,\n} from \"@stainless-code/react-layers\";\n\ntype ConfirmPayload = { title: string };\ntype ConfirmResponse = boolean;\n\nfunction ConfirmDialog({\n  call,\n  payload,\n}: LayerComponentProps\u003cConfirmPayload, ConfirmResponse\u003e) {\n  return (\n    \u003cdiv role=\"dialog\"\u003e\n      \u003ch2\u003e{payload.title}\u003c/h2\u003e\n      \u003cbutton onClick={() =\u003e void call.end(true)}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e void call.end(false)}\u003eNo\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst confirm = layerOptions\u003cConfirmPayload, ConfirmResponse\u003e({\n  stack: \"confirm\",\n  key: [\"confirm\", \"remove\"],\n  component: ConfirmDialog,\n});\n\nfunction App() {\n  return (\n    \u003cStackProvider\u003e\n      \u003cStackOutlet stack=\"confirm\" /\u003e\n    \u003c/StackProvider\u003e\n  );\n}\n\nfunction useRemove() {\n  const c = useLayer(confirm);\n  return async () =\u003e {\n    const ok = await c.open({ title: \"Remove?\" });\n    //    ^? boolean\n  };\n}\n```\n\n## Docs\n\n- [Getting started](https://stainless-code.com/layers/guides/getting-started)\n- [When to use Layers](https://stainless-code.com/layers/concepts/when-to-use)\n- [Concepts](https://stainless-code.com/layers/concepts)\n- [Adapters](https://stainless-code.com/layers/adapters)\n- [Reference](https://stainless-code.com/layers/reference)\n- [Changelog](https://stainless-code.com/layers/changelog)\n\n## Concepts\n\n- **`useLayer(options)`** — wired handle (drive + observe). **`useLayerState`** / **`useLayerQueuedState`** / **`useQueuedStack`** — observe-only. Core **`createLayer(options, client)`** for headless callers. See [Concepts](https://stainless-code.com/layers/concepts).\n\n## Develop\n\nThis is a [bun workspaces](https://bun.sh/docs/install/workspaces) monorepo; root scripts fan out across packages with `bun run --filter '*' \u003cscript\u003e`.\n\n```bash\nbun install\nbun run check          # build (core-first) + format + lint + test + test:dom + typecheck\n```\n\nSee [`.github/CONTRIBUTING.md`](.github/CONTRIBUTING.md) to contribute and [`AGENTS.md`](AGENTS.md) for agent instructions.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstainless-code%2Flayers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstainless-code%2Flayers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstainless-code%2Flayers/lists"}