| name | radix-ng-examples |
| description | Index of every documented @radix-ng/primitives example. Use when implementing a UI
feature to find a working, copy-paste-ready Angular pattern built on the primitives.
Each component has an index doc linking to per-example source shards you can copy-paste.
|
| compatibility | Requires @radix-ng/primitives installed in an Angular 21 project. |
| license | MIT |
| metadata | {"author":"radix-ng"} |
Radix NG Primitives — Examples Index
Auto-generated by tools/scripts/skills/generate.mjs from the Storybook docs.
Do not edit by hand — the Storybook stories are the source of truth.
Generated from @radix-ng/primitives@1.1.2 — if the installed version differs, verify the API against the installed package.
Working examples built on @radix-ng/primitives. Full source is bundled offline under
references/; browse visually at https://radix-ng.com.
How to use this skill
- Describe the UI you want to build (e.g. "a multi-select combobox", "a form field with validation").
- Find the matching component below by name and description.
- Open that component's bundled
references/components/<slug>.md — an index with the import,
anatomy, and a link to each example's full source (references/examples/<slug>--<example>.md).
- Open the example shard you need and adapt it: keep the primitive directives and
data-* styling
hooks, swap in the project's own design-system classes/tokens.
To style a primitive with a custom design system, pair an example with its per-primitive data-attribute
contract in the radix-ng skill (references/styling-contract/<slug>.json).
Reload a single example (e.g. after your context is compacted): open
references/examples/<component>--<example>.md — one file per example, just that example's source,
addressed by the component slug and the kebab-cased example name. Cheaper than re-reading the whole
component doc.
Total: 247 examples across 43 components.
Components
- Accordion — A vertically stacked set of interactive headings that each reveal an associated section of content. (6 examples)
- Alert Dialog — A modal dialog that interrupts the user with important content and expects a response. (7 examples)
- Autocomplete — A text input with a list of suggestions: free-form text whose value is the input string, with the active option tracked via
aria-activedescendant. (16 examples)
- Avatar — An image element with a fallback for representing the user. (3 examples)
- Button — A button, or any element that should behave like one. (5 examples)
- Calendar — Displays dates and days of the week, facilitating date-related interactions. (7 examples)
- Checkbox — A control that allows the user to toggle between checked and not checked. (9 examples)
- Collapsible — A collapsible panel controlled by a button. (3 examples)
- Combobox — A filterable select: a text input that filters a list of options, with the highlighted option tracked via
aria-activedescendant. (16 examples)
- Context Menu — A menu that appears at the pointer on right click (or touch long-press), built on the Menu primitive. (1 example)
