radix-ng-examples

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

1. Describe the UI you want to build (e.g. "a multi-select combobox", "a form field with validation").
2. Find the matching component below by name and description.
3. 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).
4. 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)