{"id":37429435,"url":"https://github.com/kubit-ui/kubit-react-components","last_synced_at":"2026-01-24T19:11:51.225Z","repository":{"id":228824089,"uuid":"774991817","full_name":"kubit-ui/kubit-react-components","owner":"kubit-ui","description":"Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience.","archived":false,"fork":false,"pushed_at":"2026-01-11T08:59:49.000Z","size":9203,"stargazers_count":31,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-11T14:27:36.718Z","etag":null,"topics":["accesibility","components","components-library","components-react","design-pattern","design-system","javascript","react","storybook","typescript","wcag"],"latest_commit_sha":null,"homepage":"https://www.kubit-ui.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/kubit-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-03-20T15:12:02.000Z","updated_at":"2025-11-30T11:39:45.000Z","dependencies_parsed_at":"2026-01-04T23:04:05.242Z","dependency_job_id":null,"html_url":"https://github.com/kubit-ui/kubit-react-components","commit_stats":null,"previous_names":["kubit-ui/kubit-react-components"],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/kubit-ui/kubit-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fkubit-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fkubit-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fkubit-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fkubit-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kubit-ui","download_url":"https://codeload.github.com/kubit-ui/kubit-react-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fkubit-react-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["accesibility","components","components-library","components-react","design-pattern","design-system","javascript","react","storybook","typescript","wcag"],"created_at":"2026-01-16T06:33:43.957Z","updated_at":"2026-01-16T06:33:44.030Z","avatar_url":"https://github.com/kubit-ui.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://kubit-ui.com\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/banner_kubit_readme.png\"\u003e\n      \u003cimg src=\"./assets/banner_kubit_readme.png\" width=\"70%\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align='center'\u003e\n  \n\u003ca href='#'\u003e\n\u003cimg src='./assets/version.png' width=\"150px\"\u003e\n\u003c/a\u003e\n  \n\u003ca href='#'\u003e\n\u003cimg src='./assets/license.png' width=\"230px\"\u003e\n\u003c/a\u003e\n  \n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n# Getting Started\n\n## Installation\n\nTo install the package, run the following command:\n\n### npm\n\n```bash\nnpm install @kubit-ui-web/react-components\n```\n\n### yarn\n\n```bash\nyarn add @kubit-ui-web/react-components\n```\n\nThis will install the package and its dependencies. Now you can import the components and use them in your application.\n\n## Usage\n\nTo use the components, import them from the package and use them in your application.\n\n```tsx\nimport { Button, KubitProvider } from '@kubit-ui-web/react-components';\nimport React from 'react';\n\nconst App = () =\u003e {\n  return (\n    \u003cKubitProvider\u003e\n      \u003cButton variant=\"PRIMARY\" size=\"MEDIUM\"\u003e\n        Click me\n      \u003c/Button\u003e\n    \u003c/KubitProvider\u003e\n  );\n};\n\nexport default App;\n```\n\nThis will render the button with the default styles and functionality.\n\n\u003e Note: The `KubitProvider` is required to use the components. It provides the theme and other context to the components.\n\nYou can foud more information about change the theme and other options in the [Customize theme](https://kubit-ui.com)\n\n## Documentation\n\nYou can find the documentation for the web components in the [Kubit UI website](https://kubit-ui.com)\n\n## Storybook\n\nTo run the storybook, first of all clone the repository and install the dependencies. Then run the following command:\n\n```bash\nnpm run storybook\n\nyarn storybook\n```\n\nThis will start the storybook server and you can see the components in action.\n\n## Tests\n\nTo run the tests, you can use the following command:\n\n```bash\nnpm run test\n\nyarn test\n```\n\nThis will run the tests and show the results in the terminal.\n\n## Contributing\n\nWe are open to contributions. If you want to contribute to the project, please follow the steps below:\n\n### Development Workflow\n\n1. **Fork the Repository**: Click the \"Fork\" button in the upper right corner of the repository's page on GitHub. This will create a copy of the repository in your account.\n\n2. **Clone the Repository**: Use `git clone` to clone the repository to your local machine.\n\n   ```sh\n   git clone https://github.com/your-username/kubit-react-components.git\n   ```\n\n3. **Create a Branch**: Use proper branch naming conventions for automatic version detection.\n\n   ```sh\n   git checkout -b \u003cbranch-type\u003e/\u003cbranch-name\u003e\n   ```\n\n4. **Make Changes**: Make any necessary changes to the codebase and **test** the changes thoroughly.\n\n5. **Commit Changes**: Use conventional commit messages when possible.\n\n   ```sh\n   git commit -m \"feat: add new component feature\"\n   ```\n\n6. **Push Changes**: Use `git push` to push your changes to your forked repository.\n\n   ```sh\n   git push origin \u003cbranch-name\u003e\n   ```\n\n7. **Open a Pull Request**: Go to the original repository on GitHub and click the \"New pull request\" button. Fill out the form with details about your changes and submit the pull request.\n\n### Branch Naming \u0026 Automatic Publishing\n\nThis repository uses an **automatic publishing system** that determines the version bump based on your branch name and PR content. When your PR is merged, the package will be automatically published to NPM.\n\n#### Branch Naming Patterns\n\nUse these branch prefixes to ensure automatic publishing works correctly:\n\n| Branch Pattern | Version Bump | Example | Description |\n|----------------|--------------|---------|-------------|\n| `feat/` or `feature/` | **MINOR** | `feat/add-tooltip` | New features or enhancements |\n| `fix/` or `bugfix/` | **PATCH** | `fix/button-hover-state` | Bug fixes |\n| `break/` or `breaking/` | **MAJOR** | `break/remove-old-api` | Breaking changes |\n| `hotfix/` | **PATCH** | `hotfix/critical-security-fix` | Urgent fixes |\n| `chore/` | **PATCH** | `chore/update-dependencies` | Maintenance tasks |\n\n#### Advanced Version Detection\n\nThe system also analyzes your **PR title** and **description** for more precise version detection:\n\n##### MAJOR (Breaking Changes)\n- `BREAKING CHANGE:` in PR description\n- `!` in PR title (e.g., `feat!: redesign button API`)\n- `[breaking]` tag in PR title\n- Conventional commits with `!` (e.g., `feat(api)!: change interface`)\n\n##### MINOR (New Features)\n- PR titles starting with `feat:` or `feature:`\n- `[feature]` tag in PR title\n- Conventional commits like `feat(ui): add dark mode`\n\n##### PATCH (Bug Fixes \u0026 Others)\n- PR titles starting with `fix:` or `bugfix:`\n- All other changes (default behavior)\n- Conventional commits like `fix(button): hover state`\n\n#### Examples\n\n**Adding a new feature:**\n```sh\ngit checkout -b feat/dark-mode-support\n# Make your changes\ngit commit -m \"feat(theme): add dark mode support for all components\"\n# Create PR with title: \"feat(theme): add dark mode support\"\n# Result: MINOR version bump (e.g., 1.0.0 → 1.1.0)\n```\n\n**Fixing a bug:**\n```sh\ngit checkout -b fix/button-accessibility\n# Make your changes  \ngit commit -m \"fix(button): improve keyboard navigation\"\n# Create PR with title: \"fix(button): improve keyboard navigation\"\n# Result: PATCH version bump (e.g., 1.0.0 → 1.0.1)\n```\n\n**Breaking changes:**\n```sh\ngit checkout -b break/remove-deprecated-props\n# Make your changes\ngit commit -m \"feat!: remove deprecated size prop from Button\"\n# Create PR with title: \"feat!: remove deprecated size prop\"\n# PR description: \"BREAKING CHANGE: The 'size' prop has been removed...\"\n# Result: MAJOR version bump (e.g., 1.0.0 → 2.0.0)\n```\n\n### Quality Assurance\n\nBefore publishing, the system automatically runs:\n\n- ✅ **Linting** - Code style validation\n- ✅ **Type Checking** - TypeScript validation  \n- ✅ **Tests** - Full test suite execution\n- ✅ **Build** - Package compilation\n- ✅ **Integration Tests** - Component functionality validation\n\n### Publishing Process\n\nWhen your PR is merged:\n\n1. **Automatic Analysis** - System analyzes branch name, PR title, and description\n2. **Version Calculation** - Determines MAJOR/MINOR/PATCH version bump\n3. **Quality Checks** - Runs all tests and validations\n4. **NPM Publication** - Publishes to NPM with appropriate version\n5. **GitHub Release** - Creates GitHub release with changelog\n6. **Notifications** - Posts success/failure status in PR comments\n\n### Manual Override\n\nIf you need to override the automatic version detection, you can:\n\n1. Use explicit markers in your PR description:\n   ```\n   BREAKING CHANGE: This removes the old authentication API\n   ```\n\n2. Use conventional commit format in PR title:\n   ```\n   feat!: redesign component API structure\n   ```\n\n3. Add tags to PR title:\n   ```\n   [breaking] Update component props interface\n   ```\n\n### Testing Your Changes\n\nBefore submitting a PR, make sure to:\n\n```bash\n# Install dependencies\nyarn install\n\n# Run linter\nyarn lint\n\n# Run type checking\nyarn type-check\n\n# Run tests\nyarn test\n\n# Build the package\nyarn build\n```\n\n### Getting Help\n\nIf you have questions about contributing or the automatic publishing system:\n\n- Check existing [GitHub Issues](https://github.com/kubit-ui/kubit-react-components/issues)\n- Review [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions)\n- Read the full `CONTRIBUTING.md` file\n\nOnce your pull request has been submitted, a maintainer will review your changes and provide feedback. If everything looks good, your pull request will be merged and your changes will be automatically published to NPM!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubit-ui%2Fkubit-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkubit-ui%2Fkubit-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubit-ui%2Fkubit-react-components/lists"}