{"id":50343066,"url":"https://github.com/kekyo/react-mui-dockpanel","last_synced_at":"2026-05-29T18:30:25.456Z","repository":{"id":356507719,"uuid":"1232742789","full_name":"kekyo/react-mui-dockpanel","owner":"kekyo","description":"React MUI edge stacking layout component.","archived":false,"fork":false,"pushed_at":"2026-05-08T10:24:41.000Z","size":77,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-29T18:30:24.224Z","etag":null,"topics":["docking","dockpanel","layout","mui","react"],"latest_commit_sha":null,"homepage":"","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/kekyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-08T08:17:13.000Z","updated_at":"2026-05-08T10:24:46.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kekyo/react-mui-dockpanel","commit_stats":null,"previous_names":["kekyo/react-mui-dockpanel"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kekyo/react-mui-dockpanel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kekyo%2Freact-mui-dockpanel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kekyo%2Freact-mui-dockpanel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kekyo%2Freact-mui-dockpanel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kekyo%2Freact-mui-dockpanel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kekyo","download_url":"https://codeload.github.com/kekyo/react-mui-dockpanel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kekyo%2Freact-mui-dockpanel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33666290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"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":["docking","dockpanel","layout","mui","react"],"created_at":"2026-05-29T18:30:24.516Z","updated_at":"2026-05-29T18:30:25.446Z","avatar_url":"https://github.com/kekyo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mui-dockpanel\n\nA DockPanel component library for React MUI that provides perimeter stacking.\n\n![react-mui-dockpanel](./images/react-mui-dockpanel-120.png)\n\n[![Project Status: Active - The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://img.shields.io/npm/v/react-mui-dockpanel.svg)](https://www.npmjs.com/package/react-mui-dockpanel)\n\n---\n\n[(For Japanese language/日本語はこちら)](./README_ja.md)\n\n\u003e Please note that this English version of the document was machine-translated and then partially edited, so it may contain inaccuracies.\n\u003e We welcome pull requests to correct any errors in the text.\n\n## What is this?\n\nHave you ever wanted to design a website where the layout scales roughly in proportion to the page size while maintaining the logical arrangement of each component?\nWhile this layout can be achieved using CSS Flexbox, managing and positioning components can often become cumbersome.\nThis is particularly common in administrative page layouts and is often used when implementing a so-called \"Explorer-style\" pane layout.\n\n`DockPanel` is a layout component in React MUI that makes it easy to implement this type of page layout.\n\nChild components are placed in the outer `Dock` panels according to the order in the JSX.\nEach `Dock` takes up space from the remaining rectangle at that point, and the final `fill` takes the remaining space.\n\nWith TypeScript JSX like this (style declarations omitted):\n\n```tsx\nimport { Dock, DockPanel } from \"react-mui-dockpanel\";\n\nexport const Workspace = () =\u003e (\n  \u003cDockPanel\u003e\n    \u003cDock dock=\"top\"\u003etop[0]\u003c/Dock\u003e\n    \u003cDock dock=\"right\"\u003eright[1]\u003c/Dock\u003e\n    \u003cDock dock=\"bottom\"\u003ebottom[2]\u003c/Dock\u003e\n    \u003cDock dock=\"left\"\u003eleft[3]\u003c/Dock\u003e\n    \u003cDock\u003efill\u003c/Dock\u003e\n  \u003c/DockPanel\u003e\n);\n```\n\nThe components inside each `Dock` are laid out like this:\n\n![Stacking sequence](images/stacking_seq.png)\n\nEach component consumes an edge in order, starting from the outermost perimeter and moving toward the center. The remaining area is occupied by the `fill` pane.\nEach `Dock` area naturally follows changes to the outer bounds, so you only need to decide roughly which edge should contain each component to build responsive layouts.\nThis is especially useful for admin-style page designs.\n\n\u003e If you know layout rules such as \"Windows Forms docking,\" this should feel familiar.\n\n### Features\n\n- Works as a lightweight layout component for React MUI\n- Provides logical component layout without complex CSS flex declarations\n\n---\n\n## Installation\n\n```bash\nnpm install react-mui-dockpanel\n```\n\nReact and React MUI must also be available.\nThey are listed as `peerDependencies`, so install those packages manually in your application.\n\n## Basic usage\n\n```tsx\nimport { Box } from \"@mui/material\";\nimport { Dock, DockPanel } from \"react-mui-dockpanel\";\n\nexport const Workspace = () =\u003e (\n  \u003cDockPanel sx={{ width: 800, height: 600 }}\u003e\n    \u003cDock dock=\"top\" size={48}\u003e\n      \u003cBox sx={{ height: \"100%\" }}\u003eToolbar\u003c/Box\u003e\n    \u003c/Dock\u003e\n    \u003cDock dock=\"left\" size={240}\u003e\n      \u003cBox sx={{ height: \"100%\" }}\u003eNavigation\u003c/Box\u003e\n    \u003c/Dock\u003e\n    \u003cDock dock=\"top\" size=\"auto\"\u003e\n      \u003cBox sx={{ height: 32 }}\u003eDocument tabs\u003c/Box\u003e\n    \u003c/Dock\u003e\n    \u003cDock\u003e\n      \u003cBox sx={{ height: \"100%\" }}\u003eContent\u003c/Box\u003e\n    \u003c/Dock\u003e\n  \u003c/DockPanel\u003e\n);\n```\n\nThe default value of `dock` is `\"fill\"`, so the final `Dock` above is equivalent to `\u003cDock dock=\"fill\"\u003e`.\n\n## Stacking order\n\nDock placement depends on order. In this example:\n\n```tsx\n\u003cDockPanel sx={{ width: 800, height: 600 }}\u003e\n  \u003cDock dock=\"top\" size={100} /\u003e\n  \u003cDock dock=\"left\" size={200} /\u003e\n  \u003cDock dock=\"top\" size={50} /\u003e\n  \u003cDock /\u003e\n\u003c/DockPanel\u003e\n```\n\nThe following rectangles are produced:\n\n| Pane      | Rectangle                             |\n| --------- | ------------------------------------- |\n| outer top | `x=0, y=0, width=800, height=100`     |\n| left      | `x=0, y=100, width=200, height=500`   |\n| inner top | `x=200, y=100, width=600, height=50`  |\n| fill      | `x=200, y=150, width=600, height=450` |\n\nThe same direction can be specified multiple times. Each item consumes the rectangle that remains at that point.\n\n## Size\n\n`size` accepts numbers and CSS strings.\n\n```tsx\n\u003cDock dock=\"left\" size={240} /\u003e\n\u003cDock dock=\"right\" size=\"25%\" /\u003e\n\u003cDock dock=\"top\" size=\"auto\" /\u003e\n```\n\nNumbers are treated as pixels. `\"auto\"` is the default and uses the natural size of the pane content.\nWhen using natural size with `left` or `right`, the child component must provide a stable width.\n\n`size` is ignored for `dock=\"fill\"`.\n\n## Fill rules\n\n`DockPanel` supports zero or one fill pane.\n\n```tsx\n\u003cDockPanel\u003e\n  \u003cDock dock=\"top\" size={48} /\u003e\n  \u003cDock /\u003e\n\u003c/DockPanel\u003e\n```\n\nPerimeter panes must be placed before the fill pane. If no fill pane is specified, the remaining rectangle is left empty.\n\n---\n\n## Limitations\n\nFor special components that make up page-level layouts, such as the MUI `AppBar` or `Drawer`, place them outside the `DockPanel`.\n\n```tsx\nimport { AppBar, Box, Toolbar } from \"@mui/material\";\nimport { Dock, DockPanel } from \"react-mui-dockpanel\";\n\nexport const Shell = () =\u003e (\n  \u003cBox sx={{ display: \"flex\", flexDirection: \"column\", height: \"100vh\" }}\u003e\n    \u003cAppBar position=\"static\"\u003e\n      \u003cToolbar /\u003e\n    \u003c/AppBar\u003e\n    \u003cDockPanel sx={{ flex: \"1 1 auto\", minHeight: 0 }}\u003e\n      \u003cDock dock=\"left\" size={240} /\u003e\n      \u003cDock /\u003e\n    \u003c/DockPanel\u003e\n  \u003c/Box\u003e\n);\n```\n\nIf you place an `AppBar` inside a docked top pane, `position=\"static\"` is recommended so it can participate in flex layout.\nMUI `Drawer` can also be placed inside a pane, but the application must choose a variant and sizing that fit inside the `DockPanel` area.\n\n---\n\n## Development\n\n```bash\nnpm install\nnpm run build\nnpm test\n```\n\n- `npm test` runs both Vitest unit tests and Playwright browser layout tests.\n- Playwright screenshots are saved to `test-results/YYYYMMDD_HHmmss_fff/{test-name}/screenshot.png`.\n- Playwright's internal `outputDir` is `.playwright-output`, so screenshots already saved under `test-results` are not removed during e2e runs.\n- The e2e app does not assign concrete pixel sizes to `DockPanel`. It fills the full page, and the viewport configured by Playwright determines the measured layout and screenshot size.\n\n## License\n\nUnder MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkekyo%2Freact-mui-dockpanel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkekyo%2Freact-mui-dockpanel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkekyo%2Freact-mui-dockpanel/lists"}