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/[email protected] — 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 — 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)
• Cropper — Headless component for interactive image cropping — inspired by the experience on X. (2 examples)
• Date Field — Enables users to input specific dates within a designated field. (2 examples)
• Dialog — A window overlaid on the page, rendering the content underneath inert. (14 examples)
• Drawer — An edge-anchored sheet that opens over the page and dismisses with a swipe. (12 examples)
• Editable — An inline text field that swaps a read-only preview for an editable input. (2 examples)
• Field — Groups a control with accessible label, description, error message, and field state. (4 examples)
• Fieldset — Groups related form controls with a legend and shared disabled state. (3 examples)
• Form — The top of the forms layer cake: aggregates fields, maps server errors by name, and intercepts submit and reset. (4 examples)
• Input — A native text input with headless state attributes and Field integration. (4 examples)
• Menu — A headless dropdown menu anchored to a trigger button. (11 examples)
• Menubar — A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. (1 example)
• Meter — A graphical display of a numeric value within a range. (3 examples)
• Navigation Menu — A collection of links and menus for website navigation. (8 examples)
• Number Field — A numeric input with stepper buttons, drag-to-scrub, locale-aware formatting and keyboard control. (6 examples)
• Pagination — Displays data in paged format and provides navigation between pages. (2 examples)
• Popover — An accessible popup anchored to a button. (10 examples)
• Preview Card — A popup that appears when a link is hovered or focused, showing a visual preview. (4 examples)
• Progress — Displays task completion with accessible label, value, track, and indicator parts. (4 examples)
• Radio Group — 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 — A native scroll container with a custom, cross-browser scrollbar. (4 examples)
• Select — A control that presents a list of options for the user to pick from, triggered by a button. (9 examples)
• Separator — A separator element accessible to screen readers. (2 examples)
• Signal Forms — Bridge Angular Signal Forms into headless Field and Form. (6 examples)
• Slider — An input where the user selects a value, or a range of values, from within a given range. (5 examples)
• Stepper — A set of steps that are used to indicate progress through a multi-step process. (2 examples)
• Switch — A control that allows the user to toggle between checked and not checked. (4 examples)
• Tabs — A set of layered sections of content—known as tab panels—that are displayed one at a time. (8 examples)
• Time Field — A segmented time input that lets users enter a time hour-by-hour with full keyboard control and localization. (7 examples)
• Toast — A succinct, low-priority message that appears temporarily, stacks, and can be swiped away. (11 examples)
• Toggle — A two-state button that can be either on or off. (3 examples)
• Toggle Group — A set of two-state buttons that can be toggled on or off. (4 examples)
• Toolbar — A container for grouping a set of controls, such as buttons, toggle groups or menus. (5 examples)
• Tooltip — Displays contextual information when a trigger is hovered or focused. (6 examples)