radix-ng/primitives/radix-ng-examples

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).

1. 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. _(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 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)_