{"id":36502079,"url":"https://github.com/samuelarbibe/dnd-timeline","last_synced_at":"2026-01-12T02:23:16.582Z","repository":{"id":179425420,"uuid":"657541768","full_name":"samuelarbibe/dnd-timeline","owner":"samuelarbibe","description":"dnd-timeline: A headless timeline library for React, based on dnd-kit","archived":false,"fork":false,"pushed_at":"2025-09-10T13:53:18.000Z","size":5275,"stargazers_count":158,"open_issues_count":5,"forks_count":22,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T10:56:58.053Z","etag":null,"topics":["dnd","dnd-kit","gantt","gantt-chart","react","timeline"],"latest_commit_sha":null,"homepage":"https://dnd-timeline.net","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/samuelarbibe.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":"2023-06-23T09:40:28.000Z","updated_at":"2025-09-29T10:34:07.000Z","dependencies_parsed_at":"2023-09-26T18:44:46.835Z","dependency_job_id":"9dcf0aea-066a-4cea-9a34-88c7fb043800","html_url":"https://github.com/samuelarbibe/dnd-timeline","commit_stats":null,"previous_names":["samuelarbibe/dnd-timeline"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/samuelarbibe/dnd-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelarbibe%2Fdnd-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelarbibe%2Fdnd-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelarbibe%2Fdnd-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelarbibe%2Fdnd-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelarbibe","download_url":"https://codeload.github.com/samuelarbibe/dnd-timeline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelarbibe%2Fdnd-timeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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":["dnd","dnd-kit","gantt","gantt-chart","react","timeline"],"created_at":"2026-01-12T02:23:14.238Z","updated_at":"2026-01-12T02:23:16.565Z","avatar_url":"https://github.com/samuelarbibe.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/samuelarbibe)!","https://www.buymeacoffee.com/samuelarbibe"],"categories":[],"sub_categories":[],"readme":"![Screenshot 2024-07-04 at 22 01 52](https://github.com/samuelarbibe/dnd-timeline/assets/38098325/f3229bc4-c855-4b50-9ab2-9fd2ac37f0ca)\n\n# [🎉 dnd-timeline](https://dnd-timeline.net)\n\n## dnd-timeline: A headless timeline library, based on [`dnd-kit`](https://docs.dndkit.com/)\n\n![npm bundle size](https://img.shields.io/bundlephobia/min/dnd-timeline)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/dnd-timeline)\n\n## Support\n\nIf you find this project helpful, consider supporting me on [Buy Me a Coffee](https://www.buymeacoffee.com/samuelarbibe)!\n\n[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://www.buymeacoffee.com/samuelarbibe)\n\n---\n\n- 🧠 **Headless:** `dnd-timeline` is a headless-ui library, and contains 0 styling, aside from functional styling (position, z-index, etc.).\n- 🪝 **Hook-based :** exposes simple hooks like `useItem` and `useRow`, that should integrate seamlessly into your existing architecture.\n- 🤺 **Flexible:** very slim and flexible by design. `dnd-timeline` exposes utility functions and positional styling, and you can use them in conjunction with you favorite libraries - styling libraries (MUI, tailwindcss, ant-design, etc.), and functional libraries (react-virtual, framer-motion, etc.)\n- 🏗️ **Based on [`dnd-kit`](https://docs.dndkit.com/) :** all features exposed by the [`dnd-kit`](https://docs.dndkit.com/) library are applicable to dnd-timeline.\n- 🏎️ **Performant:** renders only when needed. All the intermediate states and animations are done using css transformations, and require 0 re-renders.\n- 👆 **Touch Support:** Works with touch by default. Sensors can be highly configured using [`dnd-kit`](https://docs.dndkit.com/)'s sensors.\n- 🌍 **RTL:** `dnd-timeline` nativly supports RTL. simply declare one of the parent divs as rtl with `dir=\"rtl\"`, and thats it.\n\n![2024-03-09 00 35 27](https://github.com/samuelarbibe/dnd-timeline/assets/38098325/39e1e0c7-22ac-4286-8f35-58dc7380b7eb)\n\n## Installation\n\nThe library requires a single peer-dependency: react\n\nTo install it, run:\n\n```sh\nnpm install react\n```\n\nThen, you can install the library itself:\n\n```sh\nnpm install dnd-timeline\n```\n\n## Examples\n\n- [**External**](https://dnd-timeline-external.vercel.app/): Drag items from outside to the timeline, from one timeline to another, nest timelines in each other... What ever you want!\n- [**Timeaxis**](https://dnd-timeline-timeaxis.vercel.app/): Add custom components using the timeline's data, for example a timeaxis with custom labels.\n- [**Sortable**](https://dnd-timeline-sortable.vercel.app/): Allow for sortable rows.\n- [**Virtual**](https://dnd-timeline-virtual.vercel.app/): Render thousands of items and rows using your favorite virtualization library.\n- [**Grouped**](https://dnd-timeline-grouped.vercel.app/): Group the rows in any way you like.\n- [**Nested**](https://dnd-timeline-nested.vercel.app/): Nest rows under collapsible rows.\n- [**Performance**](https://dnd-timeline-performance.vercel.app): Debounce scrolling and panning to allow for a large amount of items at once.\n- [**Drag to Create**](https://dnd-timeline-create.vercel.app/): Create items on the timeline by dragging their shape on a row.\n\n#### 💡 These are just a few examples of what can be done with this library.\n\nI invite you to share your ideas, and challange the library with any idea you come up with by opening a discussion [**here**](https://github.com/samuelarbibe/dnd-timeline/discussions/categories/ideas).\n\n## Contribution\n\nThis project uses [turborepo](https://turbo.build/repo/docs) to manage the monorepo.\nIt also uses [pnpm](https://pnpm.io/) instead of npm as a package manager.\n\nTo install pnpm, you can run:\n\n```sh\ncorepack enable pnpm\n```\n\nIf you want to develop on your local machine, simply clone the project, and run\n\n```sh\npnpm install\npnpm run dev\n```\n\nAnd all the examples will run on your local machine, likned to the local instance of the library.\nAny changes made to the library will be reflected in the examples.\n\nIf you want to run only a specific example, checkout turborepo's [`--filter`](https://turbo.build/repo/docs/crafting-your-repository/running-tasks#using-filters) operator:\n\n```sh\npnpm run dev --filter home...\n```\n\nFor example this will run the `home` package and all the packages' it is depending on (`dnd-timeline`).\n\nGood luck 🤞\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelarbibe%2Fdnd-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelarbibe%2Fdnd-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelarbibe%2Fdnd-timeline/lists"}