{"id":29687229,"url":"https://github.com/katerinalupacheva/nextjs-dashboard-layout","last_synced_at":"2025-07-23T04:36:21.034Z","repository":{"id":45542790,"uuid":"401115275","full_name":"KaterinaLupacheva/nextjs-dashboard-layout","owner":"KaterinaLupacheva","description":"The classic dashboard layout built with Nextjs and Styled components","archived":false,"fork":false,"pushed_at":"2022-06-03T21:44:35.000Z","size":704,"stargazers_count":27,"open_issues_count":1,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-04T05:52:08.906Z","etag":null,"topics":["dashboard","nested-menus","nextjs","react","styled-components"],"latest_commit_sha":null,"homepage":"https://nextjs-dashboard-layout.vercel.app/","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/KaterinaLupacheva.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}},"created_at":"2021-08-29T18:34:58.000Z","updated_at":"2023-02-23T17:49:44.000Z","dependencies_parsed_at":"2022-08-23T03:01:04.028Z","dependency_job_id":null,"html_url":"https://github.com/KaterinaLupacheva/nextjs-dashboard-layout","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/KaterinaLupacheva/nextjs-dashboard-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Fnextjs-dashboard-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Fnextjs-dashboard-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Fnextjs-dashboard-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Fnextjs-dashboard-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaterinaLupacheva","download_url":"https://codeload.github.com/KaterinaLupacheva/nextjs-dashboard-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Fnextjs-dashboard-layout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266618996,"owners_count":23957273,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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","nested-menus","nextjs","react","styled-components"],"created_at":"2025-07-23T04:36:19.788Z","updated_at":"2025-07-23T04:36:21.008Z","avatar_url":"https://github.com/KaterinaLupacheva.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js Dashboard Layout template (with Styled Components)\n\n![demo](demo.gif)\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FKaterinaLupacheva%2Fnextjs-dashboard-layout)\n\nStarter code with the implementation of:\n\n- Basic layout: header, the main content area with drawer, footer\n- Drawer toggle\n- Multilevel (nested) [menu](#menu)\n- [Theming](#theme)\n\n## Technologies used\n\n- Next.js v.12\n- TypeScript v.4\n- Styled Components v.5\n- Styled Icons (Material) v.10\n\n### Menu\n\nTo change (add/remove) menu options, open `constants/menu-items.ts` file, and edit **MENU_OPTIONS** variable by updating a name, url and icon props. Any menu item can have nested options (_subItems_ array). There is no menu depth limit (although some additional styling might require for 3+ levels). The template will generate a menu structure automatically based on the provided **MENU_OPTIONS**.\n\n### Theme\n\nTo add/remove/change any theme colors (or add any other theme props, like font-size, border-radius, spacing, etc.) edit `styled.d.ts` file to have type safety, and `styles/theme.ts`.\n\n## Getting Started\n\n1. Get the latest version:\n\n```bash\ngit clone https://github.com/KaterinaLupacheva/nextjs-dashboard-layout.git\ncd nextjs-dashboard-layout\n```\n\n2. Run\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open http://localhost:3000 to view it in the browser.\n\n## How to create from scratch\n\nI wrote the blog post on how to create the Dashboard layout. You can read it [here](https://ramonak.io/posts/nextjs-dashboard-layout).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaterinalupacheva%2Fnextjs-dashboard-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaterinalupacheva%2Fnextjs-dashboard-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaterinalupacheva%2Fnextjs-dashboard-layout/lists"}