{"id":28350933,"url":"https://github.com/edgarberm/dashup","last_synced_at":"2026-01-12T05:35:50.372Z","repository":{"id":171402104,"uuid":"647701695","full_name":"edgarberm/dashup","owner":"edgarberm","description":"⚛️ React Dashboard Component","archived":false,"fork":false,"pushed_at":"2024-06-12T08:28:28.000Z","size":2273,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-06T02:53:45.207Z","etag":null,"topics":["dashboard","react","reactjs","reactjs-components","typescript","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://edgarberm.github.io/dashup/","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/edgarberm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2023-05-31T10:44:46.000Z","updated_at":"2025-10-29T17:07:30.000Z","dependencies_parsed_at":"2024-04-24T11:41:50.984Z","dependency_job_id":"6956fdec-a357-47b5-84fb-b0b9763394e1","html_url":"https://github.com/edgarberm/dashup","commit_stats":null,"previous_names":["builtbyedgar/react-dashboard","builtbyedgar/re-dash","builtbyedgar/redashify","builtbyedgar/dashup","edgarberm/dashup"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/edgarberm/dashup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarberm%2Fdashup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarberm%2Fdashup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarberm%2Fdashup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarberm%2Fdashup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edgarberm","download_url":"https://codeload.github.com/edgarberm/dashup/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarberm%2Fdashup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335210,"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":["dashboard","react","reactjs","reactjs-components","typescript","ui","ui-components"],"created_at":"2025-05-27T22:08:45.833Z","updated_at":"2026-01-12T05:35:50.367Z","avatar_url":"https://github.com/edgarberm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"./assets/Icon.png\" width=\"22px\" height=\"22px\" /\u003e Dashup\n\n\u003cimg src=\"./assets/Icon.png\" width=\"120px\" height=\"120px\" /\u003e\n\n#### Built with 🖤 and some lines of React and TypeScript\n\n\u003cdiv style=\"display: flex; flex-direction: row; align-items: center; margin-bottom: 24px\"\u003e\n  \u003cimg align=\"left\" alt=\"react\" width=\"24px\" height=\"24px\" style=\"padding-right: 12px\" src=\"https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png\" /\u003e\n  \u003cimg align=\"left\" alt=\"typescript\" width=\"24px\" height=\"24px\" style=\"padding-right: 12px\" src=\"https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png\" /\u003e\n\u003c/div\u003e\n$$\n\u003cbr\u003e\n\u003cbr\u003e\n\n[![npm version](https://badge.fury.io/js/dashup.svg)](https://badge.fury.io/js/dashup)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Coverage Status](https://coveralls.io/repos/github/builtbyedgar/dashup/badge.svg?branch=main)](https://coveralls.io/github/builtbyedgar/dashup?branch=main)\n![GitHub issues](https://img.shields.io/github/issues/builtbyedgar/dashup)\n\n\u003cbr\u003e\n\nHighly customizable and performant **React** components specifically designed for creating interactive dashboards. With a focus on simplicity and flexibility, this library empowers developers to effortlessly build stunning dashboard interfaces.\n\n\u003cimg src=\"./assets/dashup-screen-recording.gif\" width=\"800px\" /\u003e\n\n\u003cbr\u003e\n\n## Examples\n\nSee in action in the [Storybook](https://builtbyedgar.github.io/dashup/)\n\n#### More examples (soon)\n\n- Codesandbox\n- Stackblitz\n\n## Features\n\nDashup provides a simple and versatile solution for building interactive dashboards in your **React** applications. With its intuitive API and extensive customization options, you can create dynamic and visually dope dashboards in no time.\n\nWhether you need draggable and resizable widgets for flexible layout arrangements, fixed widgets, or a serialized layout for saving and loading dashboard configurations, this component library has you covered.\n\n#### ⚛️ 100% React \u0026 TypeScript\n\nThe components are built using [React v18](https://github.com/facebook/react/) and [TypeScript](https://www.typescriptlang.org/), ensuring type safety and a seamless integration with your existing projects.\n\n#### 🍿 Zero dependencies\n\nThe library has no external dependencies, making it lightweight and easy to manage.\n\n#### 🎛️ Draggable and resizable widgets\n\nIntuitively drag and rearrange widgets within the dashboard to suit your needs. Resize widgets to optimize the layout and maximize content visibility.\n\n#### ⏸️ Fixes widgets\n\nCreate widgets that can't be resized or moved, not even by other widgets!\n\n#### 🗂️ Serialized layout\n\nSave and load the dashboard layout effortlessly using a serialized format.\n\n#### 🎨 Fully customizable\n\nCustomize the appearance, behavior, and styling of the components to match your application's branding and requirements.\n\n#### 🔋 High performance\n\nUsing the best practices for React performance optimization, the library ensures smooth rendering and fluid user experiences.\n\n#### 📘 Storybook integration\n\nUses the power of [Storybook](https://storybook.js.org/) for easy development and interactive documentation.\n\n## Requirements\n\n- React \u003e= 18\n- ReactDOM \u003e= 18\n\n## Usage\n\nGetting started with the **Dashup** is quick and straightforward. Follow the steps below to install the package and begin using the components in your project.\n\n### Installation\n\nTo install the **Dashup**, use the package manager of your choice:\n\n#### NPM\n\n```bash\nnpm install dashup\n```\n\n#### Yarn\n\n```bash\nyarn add dashup\n```\n\n#### PNPM\n\n```bash\npnpm install dashup\n```\n\n### Dashboard component\n\nThe `\u003cDashboard /\u003e` component exposes a simple but effective API:\n\n```ts\ninterface DashboardProps {\n  /** The widget list WidgetProps[] */\n  widgets: Layout\n  /** number of columns */\n  columns?: number\n  /** the rows height */\n  rowHeight?: number\n  /** the margin between widgets */\n  margin?: [number, number]\n  /** packing the layout */\n  packing?: boolean\n  /** the className for the placeholder (ghost) */\n  placeholderClassName?: string\n  /** callback method when a widget is moved, resized or deleted */\n  onChange?: (widgets: Layout) =\u003e void\n  /** callback method when the dashboard (or window) is resized */\n  onResize?: () =\u003e void\n}\n```\n\n```tsx\nconst widget: WidgetProps = {\n  id: uuidv4(),\n  x: 0,\n  y: 2,\n  width: 3,\n  height: 2,\n  title: 'Widget 1',\n  draggable: true,\n  removible: true,\n  stationary: false,\n  component: \u003cComponentForWidget /\u003e,\n}\n\nconst widgets: Layout = [widget, ...]\n\n\u003cDashboard\n  widgets={widgets}\n  columns={12}\n  rowHeight={100}\n  onChange={handleDashboardChange}\n/\u003e\n```\n\n#### Widget props\n\n```ts\ninterface WidgetProps {\n  id: string\n  /** In columns */\n  x: number\n  /** In rows */\n  y: number\n  /** In columns */\n  width: number\n  /** In rows */\n  height: number\n  /** In columns */\n  minWidth?: number\n  /** In rows */\n  minHeight?: number\n  maxWidth?: number\n  maxHeight?: number\n  /** make widget fixed */\n  fixed?: boolean\n  /** make widget draggable */\n  draggable?: boolean\n  /** make widget resizable */\n  resizable?: boolean\n  /** the widget title */\n  title: string\n  /** the component that will be rendered into the widget */\n  component?: JSX.Element\n  /** the component that will be the wiidget toolbar */\n  toolbar?: ReactElement\n}\n```\n\n#### Custom toolbar props\n\n```ts\ninterface CustomToolbarProps {\n  id?: string\n  title?: string\n  className?: string\n}\n```\n\n## Todo's\n\nI'm actively seeking help to ensure the quality and reliability of the library through comprehensive testing. If you have experience with testing React components and would like to contribute, I would greatly appreciate your assistance. Whether it's writing unit tests, integration tests, or providing feedback on existing tests.\n\nAs you can see, there are quite a few tasks on the to-do list... Feel like helping me out with one?\n\nYour contributions will be welcome!\n\n- [ ] ⚡️ Extra features\n- [ ] 💻 Codesandbox and Stackblitz examples\n- [ ] 📄 Docuentation\n- [ ] 📄 Contributing\n- [ ] 🔬 Testing\n\n## Contributing\n\nPlease, help me for test the component 🙏🏻\n\nI welcome contributions from the community! If you'd like to contribute to this project, please review the [contribution guidelines](CONTRIBUTING.md) and submit a pull request.\n\n## License\n\nThis project is licensed under the [MIT](LICENSE.md) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgarberm%2Fdashup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedgarberm%2Fdashup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgarberm%2Fdashup/lists"}