Atom components

Atoms are the smallest pieces of the interface: a button, an input, a badge. Each one does a single job and works on its own, anywhere in a page. Combine them into fragment components when a piece only makes sense inside something larger, and into UI patterns for whole sections like a filtered table or a form.

Every atom wraps a Nuxt UI(opens in new tab) component and sets its styling from the design tokens, so the product and this site look the same. They live in the packages/foundation layer, which the Hacktron app and these docs both extend.

Atoms are auto-imported, so use them by name, like <Button>, with no import line. Reach for the atom rather than the raw Nuxt UI component it wraps; the app's lint rules block most of those directly. Each atom's page has a live preview, its props and guidelines.