Radix UI

Radix UI is the primitive layer for accessible React components and design-system behavior; shadcn/ui builds heavily on this model.

Routing Summary

Load this through Component Library Sources and the design-system pack when component behavior is the hard part. Radix is the default answer for popovers, dialogs, dropdowns, tooltips, menus, tabs, selects, focus management, keyboard interaction, portals, and collision-aware overlays. Source: Radix UI, https://www.radix-ui.com/, accessed 2026-06-26

Position In Kevin's Stack

• Radix primitives: behavior and accessibility substrate.
• shadcn/ui: copy-paste component layer built on Radix/Tailwind conventions.
• Sigil/Reticle/local systems: Kevin-owned tokens, density, brand, and taste.
• Skiper/Cult/Chanh Dai/etc.: source libraries layered on top when a screen needs specificity.

Use Radix directly when shadcn's component is insufficient or when the local design system needs primitive behavior without the shadcn default styling.

Integration Rules

• Keep state, focus, aria, escape-key, outside-click, and pointer-grace behavior owned by primitives.
• Retokenize visuals locally; do not ship Radix Themes defaults unless the project intentionally uses them.
• Use Radix CSS variables for transform origins and collision-aware animations when available.
• Verify keyboard navigation, screen-reader labels, focus traps, and reduced-motion behavior.

---

Timeline

• 2026-07-07 | Cross-linked Base UI as the adjacent unstyled React primitive library so agents compare Base/Radix before rebuilding accessible behavior. Source: User request, 2026-07-07
• 2026-06-26 | Created to make Radix discoverable in design and design-system packs instead of only appearing indirectly through shadcn/Sigil references. Source: User request, 2026-06-26; https://www.radix-ui.com/