HeadlinesBriefing favicon HeadlinesBriefing.com

Astro Component Fix: @data-slot Separates Markup and Behavior

DEV Community •
×

In Astro, developers copy shadcn-style components, but behavior bugs stay stuck in each copy. The author, building bejamas/ui, noticed that fixing an accessibility issue required manual code updates across projects. This friction prompted a new approach to separate markup from behavior and improve maintainability today.

The solution is @data-slot/, a set of tiny, headless primitives that treat the data‑slot attribute as a parts contract. By installing only the needed package, developers can wire focus, keyboard navigation, and ARIA into static HTML without a framework and keep styles under full control.

With this split, the markup stays in the project, while interaction logic lives in a versioned dependency. A bug fix in @data-slot/tabs propagates to every consumer with a simple npm update, eliminating the need to hunt for copied code and ensures consistent accessibility across sites.

The author plans to ship additional primitives—navigation‑menu, dialog, accordion, tooltip, popover, and disclosure—mirroring Radix or Base UI. By treating bejamas/ui as a styled layer and @data-slot/ as the behavior layer, Astro libraries can scale without sacrificing ownership or quality and maintain a robust developer experience.