{"id":25258829,"url":"https://github.com/radix-ng/primitives","last_synced_at":"2026-06-10T20:00:51.829Z","repository":{"id":232016759,"uuid":"783008024","full_name":"radix-ng/primitives","owner":"radix-ng","description":"Angular port of Radix UI Primitives. Accessible. Customizable.","archived":false,"fork":false,"pushed_at":"2026-06-06T19:48:45.000Z","size":13734,"stargazers_count":250,"open_issues_count":19,"forks_count":17,"subscribers_count":7,"default_branch":"main","last_synced_at":"2026-06-06T20:10:27.633Z","etag":null,"topics":["angular","base-ui","components","design-system","headless-components","radix","radix-ui","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://radix-ng.com","language":"TypeScript","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/radix-ng.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":".github/CODEOWNERS","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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2024-04-06T17:19:25.000Z","updated_at":"2026-06-06T19:28:26.000Z","dependencies_parsed_at":"2024-07-16T21:51:23.417Z","dependency_job_id":"240cbf8d-4290-4849-bc8a-fb9f75a67528","html_url":"https://github.com/radix-ng/primitives","commit_stats":null,"previous_names":["ng-radix/primitives","radix-ng/primitives"],"tags_count":123,"template":false,"template_full_name":null,"purl":"pkg:github/radix-ng/primitives","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radix-ng%2Fprimitives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radix-ng%2Fprimitives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radix-ng%2Fprimitives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radix-ng%2Fprimitives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radix-ng","download_url":"https://codeload.github.com/radix-ng/primitives/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radix-ng%2Fprimitives/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34168086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"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","base-ui","components","design-system","headless-components","radix","radix-ui","shadcn-ui"],"created_at":"2025-02-12T07:01:34.635Z","updated_at":"2026-06-10T20:00:51.813Z","avatar_url":"https://github.com/radix-ng.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","Third Party Components","Recently Updated"],"sub_categories":["UI Primitives","[Feb 11, 2025](/content/2025/02/11/README.md)"],"readme":"# Radix NG\n\n[![Build Size](https://img.shields.io/bundlephobia/minzip/@radix-ng/primitives@latest?label=bundle%20size\u0026style=flat\u0026colorA=000000\u0026colorB=000000)](https://bundlephobia.com/result?p=@radix-ng/primitives@latest)\n[![Version](https://img.shields.io/npm/v/@radix-ng/primitives?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/@radix-ng/primitives)\n[![Downloads](https://img.shields.io/npm/dm/@radix-ng/primitives.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/@radix-ng/primitives)\n[![License](https://img.shields.io/npm/l/@radix-ng/primitives?style=flat\u0026colorA=000000\u0026colorB=000000)](/LICENSE)\n[![Angular](https://img.shields.io/badge/Angular-21+-000000?style=flat\u0026logo=angular\u0026logoColor=fff\u0026colorA=000000\u0026colorB=000000)](https://angular.dev)\n[![Discord Chat](https://img.shields.io/discord/1231525968586346567?style=flat\u0026logo=discord\u0026logoColor=fff\u0026color=000)](https://discord.gg/NaJb2XRWX9)\n\n\u003e **Headless, signals-first UI primitives for Angular.**\n\nRadix NG is a low-level UI primitive library for Angular with a focus on accessibility, customization,\nand developer experience. The primitives are **headless** — they ship no styles and expose state via\n`data-*` attributes, so you can use them as the base layer of your design system or adopt them\nincrementally.\n\nThe library grew out of an Angular port of [Radix UI](https://www.radix-ui.com/); its API and behavior\nnow align primarily with [Base UI](https://base-ui.com/).\n\n## Features\n\n- 🎯 **Headless** — no styles, full control. State is exposed through `data-*` attributes.\n- ♿ **Accessible** — built to the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/), with keyboard navigation and focus management.\n- ⚡ **Signals-first** — modern Angular API (`input()`, `model()`, `computed()`, `signal()`).\n- 🧩 **Composable** — primitives compose via `hostDirectives` and shared building blocks.\n- 🌗 **Theme-ready** — state-driven styling works with light/dark and any design tokens.\n- 📦 **Tree-shakeable** — granular secondary entry points (`@radix-ng/primitives/\u003cname\u003e`).\n- 🤖 **AI-ready** — installable [Skills](#ai-assistant-skills) teach AI coding assistants the APIs, examples, and `data-*` styling contract.\n\n## Installation\n\n```bash\nnpm install @radix-ng/primitives\n# or\npnpm add @radix-ng/primitives\n# or\nyarn add @radix-ng/primitives\n```\n\n## Quick start\n\n```ts\nimport { Component } from '@angular/core';\nimport {\n  RdxCollapsibleRootDirective,\n  RdxCollapsibleTriggerDirective,\n  RdxCollapsibleContentDirective\n} from '@radix-ng/primitives/collapsible';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsibleContentDirective],\n  template: `\n    \u003cdiv rdxCollapsibleRoot\u003e\n      \u003cbutton rdxCollapsibleTrigger\u003eToggle\u003c/button\u003e\n      \u003cdiv rdxCollapsibleContent\u003eContent\u003c/div\u003e\n    \u003c/div\u003e\n  `\n})\nexport class DemoComponent {}\n```\n\nPrimitives are headless: style them via the `data-*` attributes they expose (e.g.\n`[data-state=\"open\"]`, `[data-disabled]`) with the tooling of your choice.\n\n## Documentation\n\n- 📖 [radix-ng.com](https://radix-ng.com) — documentation, examples \u0026 API reference (Storybook)\n- 📄 [radix-ng.com/llms.txt](https://radix-ng.com/llms.txt) — docs for LLMs (full text at [/llms-full.txt](https://radix-ng.com/llms-full.txt))\n- 🤖 [AI assistant skills](#ai-assistant-skills) — for Claude Code, Cursor, Copilot, and others\n- 🎙 [The Story of My Radix UI Port for Angular](https://frontendconf.ru/moscow/2025/abstracts/16014) — talk, FrontendConf Moscow 2025\n\n## AI assistant skills\n\nGive your AI coding assistant structured knowledge of the primitives — APIs, working examples, and\nthe `data-*` styling contract — so it writes correct, accessible code instead of guessing. The\n[Skills](skills/) are self-contained (everything bundled offline) and work with Claude Code, Cursor,\nCodex, Cline, Windsurf, GitHub Copilot, Gemini, and other agents via the open\n[Agent Skills ecosystem](https://skills.sh).\n\n```bash\nnpx skills add radix-ng/primitives/skills\n```\n\n## Components\n\n**Status:** ✅ Completed · 🚀 In Progress · 🛠 In Review\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCore primitives\u003c/strong\u003e\u003c/summary\u003e\n\n| Primitive       | Status |\n| --------------- | ------ |\n| Accordion       | ✅     |\n| Alert Dialog    | beta   |\n| Avatar          | ✅     |\n| Aspect Ratio    | ✅     |\n| Button          | ✅     |\n| Checkbox        | ✅     |\n| Collapsible     | ✅     |\n| Context Menu    | ✅     |\n| Dialog          | ✅     |\n| DropdownMenu    | ✅     |\n| Form            | ?      |\n| Hover Card      | ✅     |\n| Label           | ✅     |\n| Menubar         | ✅     |\n| Navigation Menu | ✅     |\n| Popover         | ✅     |\n| Progress        | ✅     |\n| Radio           | ✅     |\n| Select          | beta   |\n| Separator       | ✅     |\n| Slider          | ✅     |\n| Switch          | ✅     |\n| Tabs            | ✅     |\n| Toast           |        |\n| Toggle          | ✅     |\n| Toggle Group    | ✅     |\n| Toolbar         | ✅     |\n| Tooltip         | ✅     |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDates \u0026 inputs\u003c/strong\u003e\u003c/summary\u003e\n\n| Primitive         | Status |\n| ----------------- | ------ |\n| Calendar          | ✅     |\n| Date Field        | ✅     |\n| Date Picker       |        |\n| Date Range Field  |        |\n| Date Range Picker |        |\n| Editable          | ✅     |\n| Number Field      | ✅     |\n| Pagination        | ✅     |\n| Range Calendar    |        |\n| Stepper           | ✅     |\n| Time Field        | ✅     |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eUtilities\u003c/strong\u003e\u003c/summary\u003e\n\n| Primitive          | Status |\n| ------------------ | ------ |\n| FocusOutside       | ✅     |\n| PointerDownOutside | ✅     |\n| FocusGuards        |        |\n| FocusScope         |        |\n\n\u003c/details\u003e\n\n## Ecosystem\n\n- [OriginUI for Angular](https://originui-ng.com/) — styled components built on these primitives\n- [shadcn/ui for Angular](https://ui.adrianub.dev/) — shadcn-style components\n- [DataGrid](https://originui-ng.com/table) — built with [TanStack Table](https://tanstack.com/table/latest)\n\n## Contributing\n\nContributions are welcome! The repository is an Nx monorepo:\n\n```\n.\n├── apps\n│   ├── radix-docs         documentation (Astro)\n│   ├── radix-ssr-testing  SSR tests for unstyled primitives\n│   └── radix-storybook    Storybook for primitives\n└── packages\n    └── primitives         headless primitives (no styling)\n```\n\n```bash\npnpm primitives:test       # run tests\npnpm primitives:build      # build the library\npnpm storybook:primitives  # start Storybook\n```\n\n## Community\n\nWe're excited to see the community adopt Radix NG, raise issues, and provide feedback —\nwhether it's a feature request, bug report, or a project to showcase.\n\n- [Join our Discord](https://discord.gg/NaJb2XRWX9)\n- [Join our Telegram](https://t.me/radixng)\n- [GitHub Discussions](https://github.com/radix-ng/primitives/discussions)\n\n## Contributor analytics\n\n![Repobeats analytics image](https://repobeats.axiom.co/api/embed/7c1e0b2754a8973c9cfd458060d168e9dd7b5b8e.svg 'Repobeats analytics image')\n\n## License\n\nThis project is licensed under the terms of the [MIT license](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradix-ng%2Fprimitives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradix-ng%2Fprimitives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradix-ng%2Fprimitives/lists"}