Components for the framework you already use

React 19 · setup

• Import the stylesheet once at the app root: import "@boxy-design/react/styles.css".
• Render <IconSprite /> once near the root so <Icon name="..." /> resolves.
• Optional: <ThemeScript /> in <head> (SSR) and useBoxy() for theme, density and mode.
• Render <Behaviors /> once near the root to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond. Tabs, Modal and Drawer are components and need nothing.

Notes

• Field wires id, aria-describedby and aria-invalid into the control inside it; do not set them by hand.
• Extend with className, never by overriding bx-* classes. buttonClass() and the other *Class() builders give the same classes for a non-Boxy element.

Next.js 16 (App Router) · setup

• In app/layout.tsx: import "@boxy-design/next/styles.css", render <ThemeScript /> inside <head>, <IconSprite /> first in <body>, and put suppressHydrationWarning on <html>.
• Button, Card, Table, Tag, Callout and the rest of the stateless components are Server Components. Field, Input, Select, Textarea, Tabs and Modal are client components and carry their own "use client"; import them from a Server Component directly, no wrapper needed.
• Render <Behaviors /> (a client component) once in the root layout if the app uses menus, tooltips, combobox, calendar, kanban, grid, picker, inbox or charts.

Notes

• ButtonLink is a next/link styled as a Button; use it for navigation instead of wrapping a <Link> in a <Button>.
• useBoxy() (client) reads and sets theme, density and mode; the ThemeScript prevents a flash on first paint.

Preact 11 · setup

• Import the stylesheet once: import "@boxy-design/preact/styles.css".
• Render <IconSprite /> once near the root.
• Render <Behaviors /> once near the root to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Notes

• Native Preact: class, not className, and no preact/compat needed.

Vue 3.5 · setup

• Import the stylesheet once in main.ts: import "@boxy-design/vue/styles.css".
• Render <IconSprite /> once in App.vue.
• Components are named exports (Button, Field, Input, ...); import the ones you use and put them in a template.
• Render <Behaviors /> once in App.vue (or call useBehaviors()) to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Notes

• Tabs takes v-model, Modal takes v-model:open and a #footer slot.
• useBoxy() returns the current theme, density and mode as a ref plus setters.

Nuxt 4 · setup

• Add modules: ["@boxy-design/nuxt"] to nuxt.config.ts. That registers every component (prefix Bx: <BxButton>), the stylesheet, the no-flash theme script and the icon sprite. Nothing else to import.
• Options live under boxy: { prefix, css, themeScript, sprite, mode }.
• Behaviours (menus, tooltips, combobox, calendar, kanban, ...) start in the browser automatically; turn them off with boxy: { behaviors: false }.

Notes

• useBoxy() is auto-imported.

Svelte 5 · setup

• Import the stylesheet once in the root layout: import "@boxy-design/svelte/styles.css".
• Render <IconSprite /> once in the root layout.
• Render <Behaviors /> once near the root to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Notes

• Runes-based; content is passed as children and the Modal footer is a footer snippet.
• Textarea takes value, not child text.

Angular 22 · setup

• Add node_modules/@boxy-design/angular/styles.css to the styles array in angular.json (or @import it from your global stylesheet).
• Add <svg bxIconSprite></svg> once in the root template.
• Import what you use into each standalone component's imports (BxButton, BxField, ...), or ...BOXY while prototyping.
• Add provideBoxyBehaviors() to the application providers to make menus, tooltips, combobox, calendar, kanban and the other interactive widgets respond.

Notes

• Directives sit on the native element (<button bxButton>), so the DOM is exactly the design system's markup. Components with internal structure (Icon, Field, Callout) are components on a native element too.
• Tabs: <ng-container bxTabs defaultValue="a">. Modal: <bx-modal [(open)]="open" title="..."> with <ng-container bxModalFooter>.

HTMX / server-rendered HTML · setup

• Link the stylesheet (styles.css from the package) and include boxy-htmx.js once; it handles tab keys and turns any .bx-dialog swapped into the page into a real modal (focus trap, inert page, scroll lock, Esc, focus return).
• Render iconSprite() once in the base layout.
• Not a Node server? Use the HTML in partials/*.html, or spec.json, to template the same markup in any language.
• boxy-htmx.js also starts every interactive widget (menus, tooltips, combobox, calendar, kanban, ...), tabs and modal dialogs; there is nothing more to wire.

Notes

• Every function takes (props, children) and returns an HTML string. Pass hx-* and any other attribute through attrs.
• Escape user text with esc(): children are trusted HTML.
• field() and tabs() hand their wiring to a callback because a server has no context.

Elm 0.19 · setup

• Add the package's src to source-directories in elm.json (npm install) or elm install avestura/boxy-design.
• Link boxy.css + boxy-components.css from your HTML, and put Boxy.IconSprite.view once in the view.
• Include boxy-htmx.js (from @boxy-design/htmx) if you want focus trapping and an inert page for modals.
• Load @boxy-design/elm/boxy-behaviors.js with a plain <script> so menus, tooltips, combobox, calendar, kanban and dialogs respond; it picks up what Elm renders.

Notes

• One module per component, an options list for variants: Button.view [ Button.primary, Button.sm ] attrs children.
• Elm has no context, so Field and Tabs hand their wiring to their children explicitly.
• Also published to the Elm registry as avestura/boxy-design (elm install avestura/boxy-design) when the release mirror is configured.
• Use the className option instead of Html.Attributes.class on the root, which would replace the component's classes.