{"id":14970950,"url":"https://github.com/diconium/ui-toolbox","last_synced_at":"2025-10-26T14:30:40.382Z","repository":{"id":200647752,"uuid":"588081313","full_name":"diconium/ui-toolbox","owner":"diconium","description":"Common UI components library to build similar themed React web applications faster.","archived":false,"fork":false,"pushed_at":"2024-12-18T01:24:16.000Z","size":60518,"stargazers_count":8,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-31T20:14:34.286Z","etag":null,"topics":["components-library","design-system","diconium","hacktoberfest","opensource","react","react-component-library","storybook","tailwindcss","toolbox","ui"],"latest_commit_sha":null,"homepage":"https://diconium.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diconium.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-12T09:29:58.000Z","updated_at":"2024-09-23T11:25:55.000Z","dependencies_parsed_at":"2024-07-22T07:45:55.201Z","dependency_job_id":"5427e611-f5ac-47ee-8cd8-d7a5d880ee2e","html_url":"https://github.com/diconium/ui-toolbox","commit_stats":{"total_commits":552,"total_committers":9,"mean_commits":"61.333333333333336","dds":"0.23188405797101452","last_synced_commit":"969457d304ab1098b363eb8d316f9d59325a372b"},"previous_names":["diconium/ui-toolbox"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diconium%2Fui-toolbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diconium%2Fui-toolbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diconium%2Fui-toolbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diconium%2Fui-toolbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diconium","download_url":"https://codeload.github.com/diconium/ui-toolbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238337788,"owners_count":19455372,"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":["components-library","design-system","diconium","hacktoberfest","opensource","react","react-component-library","storybook","tailwindcss","toolbox","ui"],"created_at":"2024-09-24T13:44:24.524Z","updated_at":"2025-10-26T14:30:40.376Z","avatar_url":"https://github.com/diconium.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @diconium/ui-toolbox - React UI Component Library\n\n\u003ca href=\"https://diconium.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\".github/diconium.svg\" width=150/\u003e\n\u003c/a\u003e\n\n\u003cdiv align=\"center\" style=\"margin-block: 10px;\"\u003e\n\u003ca href=\"https://docs.toolbox.diconium.com/\" target=\"_blank\" style=\"display: flex; align-items:center; justify-content:center;\"\u003e\n        \u003cimg src=\".github/logo.png\" width=160/\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\n\u003cp\u003e\u003cstrong\u003e@diconium/ui-toolbox\u003c/strong\u003e is a common UI components library to build faster similar themed React web applications.\u003c/p\u003e\n\n[![Apache 2.0 License](https://img.shields.io/badge/License-Apache-2.svg)](https://choosealicense.com/licenses/apache-2.0/)\n![Github Actions](https://github.com/diconium/ui-toolbox/actions/workflows/workflows.yaml/badge.svg)\n[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://docs.toolbox.diconium.com/)\n\n\u003c/div\u003e\n\n\u003ca href=\"https://docs.toolbox.diconium.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\".github/cover.png\"/\u003e\n\u003c/a\u003e\n\n## Features\n\n- **Customizable Components:** Each component in **@diconium/ui-toolbox** is designed to be highly customizable, allowing you to easily adapt the look and feel to match your application's design and branding.\n- **Responsive and Mobile-Friendly:** **@diconium/ui-toolbox** components are built with responsiveness in mind, ensuring a seamless user experience across various devices and screen sizes.\n- **Easy Integration:** Integrating **@diconium/ui-toolbox** components into your existing React project is a breeze. With simple import statements, you can start using the components right away.\n- **Well-Documented:** We provide comprehensive documentation for each component, along with examples and usage guidelines to facilitate smooth integration.\n- **Consistent Design Language:** **@diconium/ui-toolbox** components follow a consistent and coherent design language, promoting a polished and professional UI across your entire application.\n\n## Installation\n\nTo install **@diconium/ui-toolbox** in your project, simply use npm:\n\n```bash\nnpm install @diconium/ui-toolbox\n```\n\n## Linting\n\n**@diconium/ui-toolbox** comes with a set of linting rules to maintain code consistency and readability. You can run the linting process using the following npm command:\n\n```bash\nnpm run lint\n// or\nnpm run lint:fix\n```\n\n## Usage\n\nUsing a component from **@diconium/ui-toolbox** is straightforward. Import the component you need and use it in your React application:\n\n```jsx\nimport React from 'react';\nimport { Button } from '@diconium/ui-toolbox';\n\nfunction App() {\n  return \u003cButton\u003eClick me\u003c/Button\u003e;\n}\n```\n\n### Run storybook locally\n\n```\nnpm run build:css:fonts\nnpm run build:css:watch\nnpm run storybook\n```\n\n### Build the library\n\n```\nnpm run build:prod\n```\n\n### Component generators\n\nIf you want to create a new component you can call the following command on the terminal to create all the required files at once.\n\n```\nnpm run generate:component \u003cNAME OF NEW COMPONENT\u003e\n```\n\n## Components\n\n**@diconium/ui-toolbox** provides the following set of components:\n\n- Avatar\n- Avatars\n- Button\n- Primary\n- Secondary\n- Quick\n- Sticky\n- Radio\n- Text\n- Toggle\n- Icon\n- PaginationDots\n- Tag\n- Chip\n- Checkbox\n- TextField\n- Searchbar\n- Badge\n- BadgeContainer\n- State\n- StateContainer\n- TopNavigation\n- Drawer\n- NavigationBar\n- Utils/Swipeable\n- Dot\n- Toast\n- ProgressBar\n- Spinner\n- Layout/Mobile\n- Layout/Centered\n- Layout/Desktop\n- Modal\n- List\n- ListItem\n- TextArea\n- Tooltip\n- Calendar\n- Message\n- Select\n- Tabs\n- Table\n- SideNavigation\n- TestProvider\n\nPlease refer to the [documentation](https://docs.toolbox.diconium.com) for each component to learn more about their props, customization options, and examples of usage.\n\n## Contribute\n\nIf you want to enhance the **@diconium/ui-toolbox**, you are welcome to fork the repository and create a pull request.\nPlease take into account, that we will have to conduct a code review before accepting your changes.\n\nMore details on how to best do that are described in our [Contributing guideline](https://github.com/DicoAuto/toolbox/blob/main/CONTRIBUTING.md).\n\n\u003cimg src=\".github/illustration.png\"/\u003e\n\n## Contributors\n\n\u003ca href=\"https://github.com/robdembitel\"\u003e\n  \u003cimg src=\"https://github.com/robdembitel.png?size=50\" style=\"height: 50px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/5041A\"\u003e\n  \u003cimg src=\"https://github.com/5041A.png?size=50\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/umerfarooq-diconium\"\u003e\n  \u003cimg src=\"https://github.com/umerfarooq-diconium.png?size=50\"\u003e\n\u003c/a\u003e\n\n## License\n\n**@diconium/ui-toolbox** is released under the Apache License 2.0.\n\nHappy coding!\n\n© 2024 diconium GmbH. All rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiconium%2Fui-toolbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiconium%2Fui-toolbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiconium%2Fui-toolbox/lists"}