{"id":13912662,"url":"https://github.com/Svetloslav15/react-sidebar-ui","last_synced_at":"2025-07-18T12:32:19.826Z","repository":{"id":39115397,"uuid":"265596270","full_name":"Svetloslav15/react-sidebar-ui","owner":"Svetloslav15","description":"⚛️  The Sidebar Component for React.js","archived":false,"fork":false,"pushed_at":"2024-01-10T10:57:50.000Z","size":5174,"stargazers_count":62,"open_issues_count":3,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T23:07:45.895Z","etag":null,"topics":["front-end","react","react-component","react-sidebar","reactcomponents","reactjs","sidebar","ui"],"latest_commit_sha":null,"homepage":"https://svetloslav15.github.io/react-sidebar-ui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Svetloslav15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"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}},"created_at":"2020-05-20T14:46:28.000Z","updated_at":"2024-09-09T20:01:12.000Z","dependencies_parsed_at":"2024-06-09T08:49:04.096Z","dependency_job_id":"20e339a5-0abd-463d-8d3c-debd51e95fa7","html_url":"https://github.com/Svetloslav15/react-sidebar-ui","commit_stats":{"total_commits":106,"total_committers":4,"mean_commits":26.5,"dds":0.5754716981132075,"last_synced_commit":"a76981319f91abb172f892a70a81a979b943bffa"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetloslav15%2Freact-sidebar-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetloslav15%2Freact-sidebar-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetloslav15%2Freact-sidebar-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetloslav15%2Freact-sidebar-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Svetloslav15","download_url":"https://codeload.github.com/Svetloslav15/react-sidebar-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226409840,"owners_count":17620717,"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":["front-end","react","react-component","react-sidebar","reactcomponents","reactjs","sidebar","ui"],"created_at":"2024-08-07T01:01:39.789Z","updated_at":"2024-11-25T22:30:44.464Z","avatar_url":"https://github.com/Svetloslav15.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/svetloslav"],"categories":["react","ui"],"sub_categories":[],"readme":"# react-sidebar-ui\n\n\u003e ⚛️ Sidebar component for React projects with customizable design\n\n [![NPM](https://img.shields.io/npm/v/react-sidebar-ui.svg)](https://www.npmjs.com/package/react-sidebar-ui)\n[![NPM Downloads](https://img.shields.io/npm/dt/react-sidebar-ui.svg)](https://www.npmjs.com/package/react-sidebar-ui)\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/svetloslav)\n\u003cbr/\u003e\n![React Sidebar UI Black](https://i.imgur.com/4dXhYpU.gif)\n![React Sidebar UI Light](https://i.imgur.com/ZzmB4pY.gif)\n![React Sidebar UI Light](https://imgur.com/hDpzihz.gif)\n## Install\n```bash\nnpm install react-sidebar-ui\nor\nyarn add react-sidebar-ui\n```\n## Usage\n1. Import `https://unpkg.com/react-sidebar-ui@1.2.0/dist/index.css` into your index.html file\n2. In order to use icons, you should import Font-Awesome\n3. Start using the component\n\n```jsx\nimport React from 'react'\nimport {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cSidebar bgColor='black' isCollapsed={false}\u003e\n        \u003cLogo\n          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'\n          imageName='react logo'/\u003e\n        \u003cLogoText\u003eReact Sidebar UI\u003c/LogoText\u003e\n        \u003cDropdownItem\n          values={['First', 'Second', 'Third']}\n          bgColor={'black'}\u003e\n          Menu\n        \u003c/DropdownItem\u003e\n\n        \u003cItem bgColor='black'\u003e\n          \u003cIcon\u003e\u003ci className=\"fas fa-home\"/\u003e\u003c/Icon\u003e\n          Home\n        \u003c/Item\u003e\n        \u003cItem bgColor='black'\u003e\n          \u003cIcon\u003e\u003ci className=\"fas fa-info\"/\u003e\u003c/Icon\u003e\n          About\n        \u003c/Item\u003e\n        \u003cItem bgColor='black'\u003e\n          \u003cIcon\u003e\u003ci className=\"fas fa-sitemap\"/\u003e\u003c/Icon\u003e\n          My Website\n        \u003c/Item\u003e\n        \u003cItem bgColor='black'\u003e\n          \u003cIcon\u003e\u003ci className=\"far fa-address-book\"/\u003e\u003c/Icon\u003e\n          Contacts\n        \u003c/Item\u003e\n        \u003cItem bgColor='black'\u003e\n          \u003cIcon\u003e\u003ci className=\"fas fa-rss-square\"/\u003e\u003c/Icon\u003e\n          Blog\n        \u003c/Item\u003e\n        \u003cInputItem type='text' placeholder={'Search...'}/\u003e\n      \u003c/Sidebar\u003e\n    \u003c/div\u003e\n  )\n};\n```\n## Props\n\nCommon props you may want to specify include:\n### Sidebar\n- `bgColor` - change the color of the sidebar, it can be `black`, `light`, `blue`, `purple`, `aqua`, `peach`\n- `isCollapsed` - add start position of the sidebar if it will be collapsed or not\n- `classes` - add your custom classes if you want to add custom style to the component\n- `position` - add where the sidebar will be positioned on the screen, it can be `left` and `right`. If you don't specify it will be `left`.\n### DropdownItem\n- `bgColor` - change the color of the sidebar it can be `black`, `light`, `blue`, `purple`, `aqua`, `peach`\n- `values` - items that will be displayed\n- `classes` - add your custom classes if you want to add custom style to the component\n### Item\n- `bgColor` - change the color of the sidebar it can be `black`, `light`, `blue`, `purple`, `aqua`, `peach`\n- `classes` - add your custom classes if you want to add custom style to the component\n### Logo\n- `image` - url to the image\n- `imageText` - alt tag of the image\n- `classes` - add your custom classes if you want to add custom style to the component\n### InputItem\n- `type` - type of the input field\n- `placeholder` - placeholder of the input field\n- `classes` - add your custom classes if you want to add custom style to the component\n### Icon\n- `classes` - you should add font-awesome class here add your custom classes if you want to add custom style to the component\n\n## Customization\nIf you want to change the style of a component, you can do it by adding your own classes to the component.\n## Contribute \nContributions are always welcome!\nPlease read the [contribution guidelines](contributing.md) first.\n\n### ⭐ If you liked the component, please consider giving me a star. Thank you!\n## License\n\nCopyright © [Svetloslav Novoselski](https://github.com/Svetloslav15)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSvetloslav15%2Freact-sidebar-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSvetloslav15%2Freact-sidebar-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSvetloslav15%2Freact-sidebar-ui/lists"}