{"id":30315628,"url":"https://github.com/zksailor534/react-adminlte-dash","last_synced_at":"2025-08-17T19:08:09.271Z","repository":{"id":55459529,"uuid":"57971281","full_name":"zksailor534/react-adminlte-dash","owner":"zksailor534","description":"This project is No Longer Maintained.  React implementation of AdminLTE themed dashboard","archived":false,"fork":false,"pushed_at":"2018-11-05T03:30:06.000Z","size":5463,"stargazers_count":167,"open_issues_count":11,"forks_count":36,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-09T14:17:47.771Z","etag":null,"topics":["adminlte","dashboard","react","sidebar","styled-components"],"latest_commit_sha":null,"homepage":"http://zksailor534.github.io/react-adminlte-dash/","language":"JavaScript","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/zksailor534.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":"2016-05-03T13:28:08.000Z","updated_at":"2024-01-31T12:32:18.000Z","dependencies_parsed_at":"2022-08-15T00:40:55.547Z","dependency_job_id":null,"html_url":"https://github.com/zksailor534/react-adminlte-dash","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/zksailor534/react-adminlte-dash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zksailor534%2Freact-adminlte-dash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zksailor534%2Freact-adminlte-dash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zksailor534%2Freact-adminlte-dash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zksailor534%2Freact-adminlte-dash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zksailor534","download_url":"https://codeload.github.com/zksailor534/react-adminlte-dash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zksailor534%2Freact-adminlte-dash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270892247,"owners_count":24663544,"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-08-17T02:00:09.016Z","response_time":129,"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":["adminlte","dashboard","react","sidebar","styled-components"],"created_at":"2025-08-17T19:03:14.496Z","updated_at":"2025-08-17T19:08:09.246Z","avatar_url":"https://github.com/zksailor534.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/react-adminlte-dash.svg)](https://www.npmjs.com/package/react-adminlte-dash)\n[![build status](https://secure.travis-ci.org/zksailor534/react-adminlte-dash.svg)](http://travis-ci.org/zksailor534/react-adminlte-dash)\n[![bitHound Score](https://www.bithound.io/github/zksailor534/react-adminlte-dash/badges/score.svg)](https://www.bithound.io/github/zksailor534/react-adminlte-dash)\n\n## react-adminlte-dash\nReact.js components for AdminLTE themed dashboard.\n\n\u003e Based off of [AdminLTE](https://github.com/almasaeed2010/AdminLTE). Static hosted [demo](http://zksailor534.github.io/react-adminlte-dash/) on GitHub Pages.\n\n### Todo (Path to 1.0.0)\n\n- [ ] Universal/Isomorphic component\n- [ ] Right sidebar\n- [x] Footer\n- [x] Content formatting\n- [ ] Generic Navbar dropdowns\n- [ ] Messaging Navbar dropdown\n- [ ] Notifications Navbar dropdown\n- [ ] Tasks Navbar dropdown\n- [ ] Top-nav formatting option\n- [ ] Boxed formatting option\n\n## Installation\n\n```bash\nnpm install --save react-adminlte-dash\n```\n\n## Usage\n\nThis module is in development, usage is subject to change.  Not all components are fully functional.\n\nThis module uses [Styled Components](https://github.com/styled-components/styled-components), so all CSS styling is included when the module is called.\nHowever, in order for the dashboard to use the entire available screen height, the parent container components must be set to `height: 100%`.  This component sets the html \u0026 body styles, the user must set the app container.\n\nIn CSS:\n```css\n#app {\n  min-height: 100vh;\n}\n```\n\nIn ES6:\n```javascript\nimport { Dashboard, Header, Sidebar } from 'react-adminlte-dash';\n\nconst nav = () =\u003e ([\n  \u003cHeader.Item href=\"/some/link\" key=\"1\" /\u003e\n]);\n\nconst sb = () =\u003e ([\n  \u003cSidebar.Menu header=\"NAVIGATION\" key=\"1\"\u003e\n    \u003cSidebar.Menu.Item title=\"Home\" href=\"/\" /\u003e\n  \u003c/Sidebar.Menu\u003e\n]);\n\nconst App = ({ children }) =\u003e (\n  \u003cDashboard\n    navbarChildren={nav()}\n    sidebarChildren={sb()}\n    theme=\"skin-blue\"\n  \u003e\n    {children}\n  \u003c/Dashboard\u003e\n);\n```\n\nIn order to create themed child components (not wrapped in navbarChildren, sidebarChildren, or footerChildren), use the `withTheme` wrapper provided by `styled-components`.  This will provide the `theme` object to the child component.  See `src/styles/variables.js` for the available variables.  Documentation for these variables is TBD.\n\n## Included Components\n\n### *Dashboard*\n\nMain component for theme.  Handles theming, layout options, and tracks state.\nProvides a default empty header and sidebar.\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| children | `node` | Any React child components to be rendered in content fields | n/a |\n| navbarChildren | `node` | Any React child components to be rendered in the Header's navbar | n/a |\n| sidebarChildren | `node` | Any React child components to be rendered in the Sidebar | n/a |\n| footerChildren | `node` | Any React child components to be rendered in the Footer | n/a |\n| theme | `string` | Choice of AdminLTE skin themes: `skin-blue`, `skin-black`, `skin-purple`, `skin-green`, `skin-red`, `skin-yellow`, `skin-blue-light`, `skin-black-light`, `skin-purple-light`, `skin-green-light`, `skin-red-light`, `skin-yellow-light` | `skin-blue` |\n| initialCollapse | `bool` | Determines initial state of sidebar: collapsed (`true`) or expanded (`false`) | `false` |\n| sidebarMini | `bool` | Determines whether sidebar collapses to mini size (`true`) or off-screen (`false`) | `true` |\n| fixed | `bool` | Determines whether the Header is fixed | `false` |\n| logoOnClick | `func` | Function to be called on logo click, overrides logoHref | n/a |\n| logoHref | `string` | Link target for Logo, overridden by logoOnClick | `'/'` |\n| logoLg | `element` | A single React component to be rendered when logo is in large state | `\u003cspan\u003e\u003cb\u003eAdmin\u003c/b\u003eLTE\u003c/span\u003e` |\n| logoSm | `element` | A single React component to be rendered when logo is in small state | `\u003cspan\u003e\u003cb\u003eA\u003c/b\u003eLT\u003c/span\u003e` |\n\n### *Header*\n\nHeader component which can be used independently of Dashboard (TBD).  Wrapper for any top-based navigation components.  Provides the following subcomponents:\n* `Header.Item`\n* `Header.User`\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| children | `node` | Any React child components to be rendered | n/a |\n| fixed | `bool` | Determines whether the Header is fixed | `false` |\n| logoOnClick | `func` | Function to be called on logo click, overrides logoHref | n/a |\n| logoHref | `string` | Link target for Logo, overridden by logoOnClick | `'/'` |\n| logoLg | `element` | A single React component to be rendered when logo is in large state | `\u003cspan\u003e\u003cb\u003eAdmin\u003c/b\u003eLTE\u003c/span\u003e` |\n| logoSm | `element` | A single React component to be rendered when logo is in small state | `\u003cspan\u003e\u003cb\u003eA\u003c/b\u003eLT\u003c/span\u003e` |\n| sidebarMini | `bool` | Determines whether sidebar collapses to mini size (`true`) or off-screen (`false`) | `false` |\n| sidebarCollapse | `bool` | Determines whether sidebar is in a collapsed state | `false` |\n| sidebarToggle | `func` | (Required) function passed to sidebar toggle component to handle sidebar collapse state | n/a |\n\n### *Header.Item*\n\nHeader navbar menu item component.  Renders links with images in header.\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| title | `string` | Item title to be displayed | n/a |\n| onClick | `func` | Function to be called on item click | n/a |\n| link | `string` | Link target for logo component, overridden by `onClick` | n/a |\n| image | `string` | Path to image object, overrides iconClass | n/a |\n| iconClass | `string` | Class names to use for icon (libraries not included),  | n/a |\n\n### *Header.UserMenu*\n\nHeader user menu component.  Renders user menu dropdown component in header bar.\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| name | `string` | User Name | n/a |\n| image | `string` | Path to user image object | n/a |\n| profileAction | `func` | Function to perform on selection of `Profile` button, button only displayed if action provided | n/a |\n| signOutAction | `func` | Function to perform on selection of `Sign Out` button, button only displayed if action provided | n/a |\n\n### *Sidebar*\n\nSidebar component which can be used independently of Dashboard (TBD).  Wrapper for any sidebar navigation components.  Provides the following subcomponents:\n* `Sidebar.Menu`\n* `Sidebar.UserPanel`\n* `Sidebar.Search`\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| children | `node` | Any React child components to be rendered | n/a |\n| fixed | `bool` | Determines whether the Header is fixed | `false` |\n| sidebarMini | `bool` | Determines whether sidebar collapses to mini size (`true`) or off-screen (`false`) | `false` |\n| sidebarCollapse | `bool` | Determines whether sidebar is in a collapsed state | `false` |\n\n### *Sidebar.Menu*\n\nSidebar navigation menu component.  Wrapper for SidebarMenuItem components, which are provided as subcomponent:\n* `Sidebar.Menu.Item`\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| children | `node` | Any React child components to be rendered | n/a |\n| header | `string` | Header title for navigation component | none |\n\n### *Sidebar.Menu.Item*\n\nSidebar navigation menu item component.  Renders as link or dropdown menu.  Can be nested in itself to provided nested dropdown menus.\n\n```javascript\n\u003cSidebar.Menu.Item title=\"Level 1\"\u003e\n  \u003cSidebar.Menu.Item title=\"Level 2\"\u003e\n    \u003cSidebar.Menu.Item title=\"Level 3\" /\u003e\n  \u003c/Sidebar.Menu.Item\u003e\n\u003c/Sidebar.Menu.Item\u003e\n```\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| children | `node` | Any React child components to be rendered | n/a |\n| title | `string` | Title for component | none |\n| active | `bool` | Determines if item is considered active | `false` |\n| href | `string` | Link target for component, unused if onClick or children provided | `null` |\n| onClick | `func` | Action for component, unused if children provided, overrides href | `null` |\n| icon | `object` | Expects a `className` key which accepts a string describing any font-awesome icon (i.e. `fa-th`) and/or a `color` key which accepts any Bootstrap style type (i.e. `danger`) or CSS color string (hex, name, or rgb) | `{ className: 'fa-circle-o' }` |\n| labels | `[objects]` | Array of objects, each requires a React `key` string, a `type` key which accepts a string describing any Bootstrap style type (i.e. `danger`) and a `text` key of any string to display | n/a |\n\n### *Sidebar.Search*\n\nSidebar search component.\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| name | `string` | Initial value displayed in search field | `''` |\n| placeholder | `string` | Initial value displayed in search field | `'Search...'` |\n| onClick | `func` | Function to call on search submit, provided with value prop | `v =\u003e alert(`Searching for ${v}`)` |\n\n### *Sidebar.UserPanel*\n\nSidebar user component.\n\n| Property | Type | Description | Default |\n|:--------:|:----:|:-----------:|:-------:|\n| name | `string` | User name | n/a |\n| image | `string` | String providing source path for user image | n/a |\n| online | `bool` | User status: online = `true`, offline = `false` | `false` |\n| href | `string` | Target for user status link | n/a |\n\n### License\n\n*react-adminlte-dash* is available under MIT. See LICENSE for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzksailor534%2Freact-adminlte-dash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzksailor534%2Freact-adminlte-dash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzksailor534%2Freact-adminlte-dash/lists"}