---
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.2.1` — 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: **248 examples** across **43 components**.

## Components

- **[Accordion](./references/components/accordion.md)** — A vertically stacked set of interactive headings that each reveal an associated section of content. _(6 examples)_
- **[Alert Dialog](./references/components/alert-dialog.md)** — A modal dialog that interrupts the user with important content and expects a response. _(7 examples)_
- **[Autocomplete](./references/components/autocomplete.md)** — 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](./references/components/avatar.md)** — An image element with a fallback for representing the user. _(3 examples)_
- **[Button](./references/components/button.md)** — A button, or any element that should behave like one. _(5 examples)_
- **[Calendar](./references/components/calendar.md)** — Displays dates and days of the week, facilitating date-related interactions. _(7 examples)_
- **[Checkbox](./references/components/checkbox.md)** — A control that allows the user to toggle between checked and not checked. _(9 examples)_
- **[Collapsible](./references/components/collapsible.md)** — A collapsible panel controlled by a button. _(3 examples)_
- **[Combobox](./references/components/combobox.md)** — A filterable select: a text input that filters a list of options, with the highlighted option tracked via `aria-activedescendant`. _(16 examples)_
- **[Context Menu](./references/components/context-menu.md)** — A menu that appears at the pointer on right click (or touch long-press), built on the Menu primitive. _(1 example)_
- **[Cropper](./references/components/cropper.md)** — Headless component for interactive image cropping — inspired by the experience on [X](https://x.com/). _(2 examples)_
- **[Date Field](./references/components/date-field.md)** — Enables users to input specific dates within a designated field. _(2 examples)_
- **[Dialog](./references/components/dialog.md)** — A window overlaid on the page, rendering the content underneath inert. _(14 examples)_
- **[Drawer](./references/components/drawer.md)** — An edge-anchored sheet that opens over the page and dismisses with a swipe. _(12 examples)_
- **[Editable](./references/components/editable.md)** — An inline text field that swaps a read-only preview for an editable input. _(2 examples)_
- **[Field](./references/components/field.md)** — Groups a control with accessible label, description, error message, and field state. _(4 examples)_
- **[Fieldset](./references/components/fieldset.md)** — Groups related form controls with a legend and shared disabled state. _(3 examples)_
- **[Form](./references/components/form.md)** — The top of the forms layer cake: aggregates fields, maps server errors by name, and intercepts submit and reset. _(4 examples)_
- **[Input](./references/components/input.md)** — A native text input with headless state attributes and Field integration. _(4 examples)_
- **[Menu](./references/components/menu.md)** — A headless dropdown menu anchored to a trigger button. _(11 examples)_
- **[Menubar](./references/components/menubar.md)** — A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. _(1 example)_
- **[Meter](./references/components/meter.md)** — A graphical display of a numeric value within a range. _(3 examples)_
- **[Navigation Menu](./references/components/navigation-menu.md)** — A collection of links and menus for website navigation. _(8 examples)_
- **[Number Field](./references/components/number-field.md)** — A numeric input with stepper buttons, drag-to-scrub, locale-aware formatting and keyboard control. _(6 examples)_
- **[Pagination](./references/components/pagination.md)** — Displays data in paged format and provides navigation between pages. _(2 examples)_
- **[Popover](./references/components/popover.md)** — An accessible popup anchored to a button. _(10 examples)_
- **[Preview Card](./references/components/preview-card.md)** — A popup that appears when a link is hovered or focused, showing a visual preview. _(4 examples)_
- **[Progress](./references/components/progress.md)** — Displays task completion with accessible label, value, track, and indicator parts. _(4 examples)_
- **[Radio Group](./references/components/radio.md)** — A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. _(3 examples)_
- **[Scroll Area](./references/components/scroll-area.md)** — A native scroll container with a custom, cross-browser scrollbar. _(4 examples)_
- **[Select](./references/components/select.md)** — A control that presents a list of options for the user to pick from, triggered by a button. _(9 examples)_
- **[Separator](./references/components/separator.md)** — A separator element accessible to screen readers. _(2 examples)_
- **[Signal Forms](./references/components/signal-forms.md)** — Bridge Angular [Signal Forms](https://angular.dev/guide/forms/signals/overview) into headless `Field` and `Form`. _(6 examples)_
- **[Slider](./references/components/slider.md)** — An input where the user selects a value, or a range of values, from within a given range. _(5 examples)_
- **[Stepper](./references/components/stepper.md)** — A set of steps that are used to indicate progress through a multi-step process. _(2 examples)_
- **[Switch](./references/components/switch.md)** — A control that allows the user to toggle between checked and not checked. _(4 examples)_
- **[Tabs](./references/components/tabs.md)** — A set of layered sections of content—known as tab panels—that are displayed one at a time. _(8 examples)_
- **[Time Field](./references/components/time-field.md)** — A segmented time input that lets users enter a time hour-by-hour with full keyboard control and localization. _(7 examples)_
- **[Toast](./references/components/toast.md)** — A succinct, low-priority message that appears temporarily, stacks, and can be swiped away. _(11 examples)_
- **[Toggle](./references/components/toggle.md)** — A two-state button that can be either on or off. _(3 examples)_
- **[Toggle Group](./references/components/toggle-group.md)** — A set of two-state buttons that can be toggled on or off. _(4 examples)_
- **[Toolbar](./references/components/toolbar.md)** — A container for grouping a set of controls, such as buttons, toggle groups or menus. _(5 examples)_
- **[Tooltip](./references/components/tooltip.md)** — Displays contextual information when a trigger is hovered or focused. _(6 examples)_