{"id":23305378,"url":"https://gfazioli.github.io/mantine-split-pane/","last_synced_at":"2025-08-22T09:32:24.338Z","repository":{"id":224946928,"uuid":"761778869","full_name":"gfazioli/mantine-split-pane","owner":"gfazioli","description":"A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.","archived":false,"fork":false,"pushed_at":"2024-10-24T10:02:33.000Z","size":7561,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-25T05:05:47.847Z","etag":null,"topics":["mantine","pane","react","split","splitpane","typescript","ui"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-split-pane/","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/gfazioli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["gfazioli","wpbones"]}},"created_at":"2024-02-22T13:29:59.000Z","updated_at":"2024-10-24T10:02:37.000Z","dependencies_parsed_at":"2024-10-24T13:14:47.161Z","dependency_job_id":"7696ecb8-7743-4e71-b3a7-f3e4f2038624","html_url":"https://github.com/gfazioli/mantine-split-pane","commit_stats":{"total_commits":52,"total_committers":3,"mean_commits":"17.333333333333332","dds":0.09615384615384615,"last_synced_commit":"df4c092aeb1aba762dc7c203214c6900a85a3968"},"previous_names":["gfazioli/mantine-split-pane"],"tags_count":15,"template":false,"template_full_name":"gfazioli/mantine-flip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-split-pane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-split-pane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-split-pane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-split-pane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-split-pane/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229961047,"owners_count":18151609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["mantine","pane","react","split","splitpane","typescript","ui"],"created_at":"2024-12-20T12:00:58.301Z","updated_at":"2025-08-22T09:32:24.328Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/wpbones"],"categories":["Libraries"],"sub_categories":[],"readme":"# Mantine Split pane Component\n\n\u003cdiv align=\"center\"\u003e\n\n  https://github.com/user-attachments/assets/2e45af2b-60c7-4cb3-9b9a-6cf0e710af1c\n  \n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-split-pane?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-split-pane)\n  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-split-pane?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-split-pane)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-split-pane?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-split-pane)\n  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-split-pane?style=for-the-badge)\n\n\n\u003c/div\u003e\n\n## Overview\n\nThis component is created on top of the [Mantine](https://mantine.dev/) library.\n\n[![Mantine UI Library](https://img.shields.io/badge/-MANTINE_UI_LIBRARY-blue?style=for-the-badge\u0026labelColor=black\u0026logo=mantine\n)](https://mantine.dev/)\n\nUtilizing Mantine UI, enables users to create a flexible layout with resizable split panes. It supports both vertical and horizontal splitting, allowing the arrangement of content in various configurations. The component seamlessly handles nested split panes, enabling complex layouts with ease.\nWith intuitive resizing functionality, users can adjust the size of each pane effortlessly. This component provides a responsive and user-friendly interface for organizing and displaying content in a way that best suits the application's needs.\n\n[![Mantine Extensions](https://img.shields.io/badge/-Watch_the_Video-blue?style=for-the-badge\u0026labelColor=black\u0026logo=youtube\n)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)\n[![Demo and Documentation](https://img.shields.io/badge/-Demo_%26_Documentation-blue?style=for-the-badge\u0026labelColor=black\u0026logo=typescript\n)](https://gfazioli.github.io/mantine-split-pane/)\n[![Mantine Extensions HUB](https://img.shields.io/badge/-Mantine_Extensions_Hub-blue?style=for-the-badge\u0026labelColor=blue\n)](https://mantine-extensions.vercel.app/)\n\n👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.\n\n## Installation\n\n```sh\nnpm install @gfazioli/mantine-split-pane\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-split-pane\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-split-pane/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Split } from '@gfazioli/mantine-split-pane';\nimport { Paper } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    \u003cSplit\u003e\n      \u003cSplit.Pane\u003e\n        \u003cPaper withBorder w=\"100%\" mih=\"100%\"\u003e\n          \u003ch1\u003ePane 1\u003c/h1\u003e\n        \u003c/Paper\u003e\n      \u003c/Split.Pane\u003e\n\n      \u003cSplit.Resizer /\u003e\n\n      \u003cSplit.Pane\u003e\n        \u003cPaper withBorder\u003e\n          \u003ch1\u003ePane 2\u003c/h1\u003e\n        \u003c/Paper\u003e\n      \u003c/Split.Pane\u003e\n    \u003c/Split\u003e\n  );\n}\n```\n\n\u003cdiv align=\"center\"\u003e\n  \n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-split-pane\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-split-pane\u0026Timeline)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/gfazioli.github.io%2Fmantine-split-pane%2F","html_url":"https://awesome.ecosyste.ms/projects/gfazioli.github.io%2Fmantine-split-pane%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gfazioli.github.io%2Fmantine-split-pane%2F/lists"}