{"id":22546281,"url":"https://github.com/ngx-primer/primer-ui","last_synced_at":"2026-03-01T04:08:11.671Z","repository":{"id":261482383,"uuid":"858311271","full_name":"ngx-primer/primer-ui","owner":"ngx-primer","description":"Ngx Primer - A collection of reusable Angular components, modules, and directives designed to help you build beautiful UIs, following the GitHub Primer Design System.","archived":false,"fork":false,"pushed_at":"2025-03-22T14:47:09.000Z","size":1513,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-09T16:53:38.838Z","etag":null,"topics":["angular","angular-components","angular-ui-kit","component-library","design-system","modular-design","ngx-primer","open-source","primer-design-system","responsive-ui","responsive-ui-kit","ui-components","web-components","web-components-library"],"latest_commit_sha":null,"homepage":"","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/ngx-primer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2024-09-16T17:17:31.000Z","updated_at":"2025-03-22T14:47:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"ebfe27be-93d3-4711-bc48-e0f0893ea530","html_url":"https://github.com/ngx-primer/primer-ui","commit_stats":null,"previous_names":["ngx-primer/primer-ui"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ngx-primer/primer-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-primer%2Fprimer-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-primer%2Fprimer-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-primer%2Fprimer-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-primer%2Fprimer-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-primer","download_url":"https://codeload.github.com/ngx-primer/primer-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-primer%2Fprimer-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29960235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"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":["angular","angular-components","angular-ui-kit","component-library","design-system","modular-design","ngx-primer","open-source","primer-design-system","responsive-ui","responsive-ui-kit","ui-components","web-components","web-components-library"],"created_at":"2024-12-07T15:06:47.774Z","updated_at":"2026-03-01T04:08:11.654Z","avatar_url":"https://github.com/ngx-primer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-primer\n\n`ngx-primer` is an Angular-based implementation of the [Primer Design System](https://primer.style/), which is the design system used by GitHub. The project aims to bring the clean, accessible, and customizable components from Primer to the Angular ecosystem, providing developers with a powerful set of tools for building modern and user-friendly interfaces.\n\nThis library builds on existing implementations of Primer, such as the React and other versions, but focuses on leveraging the latest updates in Angular to create a robust and scalable solution.\n\n## Inspiration\n\nThis project is inspired by the [Primer Design System](https://primer.style/) and aims to bring its flexible, accessible, and reusable components to Angular applications. Primer was originally developed by GitHub to standardize the design language and improve user experience across their products. It is now an open-source project, and its components have been implemented in various frameworks, including React, Vue, and now Angular.\n\nWhile the design system is available for multiple frameworks, this Angular implementation takes advantage of the latest features in Angular, ensuring high performance and reactivity, especially with Angular's new signal-based API and other modern updates. With Angular being increasingly powerful, it was the ideal choice for this implementation.\n\n## Features\n\n- **Accessible Components**: All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience.\n- **Customizable**: Tailor the components' appearance and behavior using Angular's flexible input properties and directives.\n- **Responsive**: The library is designed to be responsive and work seamlessly across all device types and screen sizes.\n- **Built-in ID Generator**: Automatically generates unique IDs for components, ensuring they work well in dynamic contexts.\n- **Themes Support**: Easily switch between light and dark modes, as well as apply custom themes to your components.\n- **Angular Signal API**: Leverage the latest Angular features, such as signals, for highly reactive, optimized performance.\n\n## Installation\n\nTo install `ngx-primer` into your Angular project, run the following command:\n\n```bash\nnpm install ngx-primer\n```\n\n## Usage\n\nTo use the components in your Angular application, import the necessary modules and include the components in your templates.\n\n1. Import `NgxPrimerAccordionModule` (or any other component module) into your Angular module:\n\n```typescript\nimport { NgxPrimerAccordionModule } from 'ngx-primer';\n\n@NgModule({\n  imports: [NgxPrimerAccordionModule],\n  ...\n})\nexport class AppModule {}\n```\n\n2. Use the component in your templates:\n\n```html\n\u003cngx-primer-accordion-root [type]=\"'Single'\" [collapsible]=\"true\"\u003e\n  \u003cngx-primer-accordion-item [value]=\"'item1'\"\n    \u003eItem 1 Content\u003c/ngx-primer-accordion-item\n  \u003e\n  \u003cngx-primer-accordion-item [value]=\"'item2'\"\n    \u003eItem 2 Content\u003c/ngx-primer-accordion-item\n  \u003e\n\u003c/ngx-primer-accordion-root\u003e\n```\n\n## Available Components\n\nThe `ngx-primer` library includes a variety of components inspired by the Primer Design System, including:\n\n- Accordion\n- Buttons\n- Cards\n- Forms\n- Icons\n- Layouts\n- Navigation\n- Modals\n- And more...\n\nEach component is designed to be flexible and easily customizable to fit your application's needs.\n\n## Running Unit Tests\n\nTo run the unit tests for the project, use the following command:\n\n```bash\nnx test ngx-primer\n```\n\nThis will run the tests using the Jest framework.\n\n## Contributing\n\nWe welcome contributions to `ngx-primer`! If you want to add a new component, improve an existing one, or fix a bug, feel free to submit a pull request. Please follow the [contribution guidelines](CONTRIBUTING.md) for more details.\n\n## Credits\n\nThis project is inspired by the [Primer Design System](https://primer.style/), created and maintained by GitHub. We would like to credit the GitHub team and all the contributors to the Primer Design System for their work on this incredible resource.\n\n- [Primer Design System](https://primer.style/)\n- [Primer GitHub Repository](https://github.com/primer)\n\nAnd never forgetting special Thanks To (credit for project inspirations) :\n\n- [Angular Primitives](https://angularprimitives.com/getting-started/introduction)\n- [Angular CDK](https://material.angular.io/cdk)\n- [Radix UI](https://radix-ui.com/)\n\n## License\n\n`ngx-primer` is licensed under the [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0).\n\nSee the [LICENSE](LICENSE) file for more information.\n\n## Changelog\n\nFor details on what's changed in each release, check out the [Changelog](CHANGELOG.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-primer%2Fprimer-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-primer%2Fprimer-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-primer%2Fprimer-ui/lists"}