Skip to content
ALNEAS Ecosystem

react-ui

@alneas/react-ui

Section titled “@alneas/react-ui”

Themed Base UI primitives, shared themes and callback-controlled React components. Independent ISC package. React 19 and Node 24+; the only host peers are React, React DOM and Base UI. Installing a Button does not install data-engine, data-access, React Hook Form, Query, TanStack Table or DnD.

import { Button, Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from '@alneas/react-ui';
import '@alneas/react-ui/styles';
// Optional application reset, before styles:
// import '@alneas/react-ui/reset.css';


<Dialog>
  <DialogTrigger render={<Button />}>Open</DialogTrigger>
  <DialogContent><DialogTitle>Details</DialogTitle><DialogDescription>Order information</DialogDescription></DialogContent>
</Dialog>

Use render for composition. Custom elements must forward refs and spread props. The root exports primitives (including Field and controlled SearchableSelectInput), themes, utility functions and UI hooks. /theme, /utils, /hooks, /styles, /theme.css and /reset.css are explicit subpaths. CSS is prebuilt; consumers need no Tailwind compiler. Styles omit global preflight; provide your app’s base text and background styles, or opt into reset.css. Fonts use the system stack.

Schema FieldFactory, React Hook Form integration, rich data tables, CRUD search, CSV/Excel dialogs and date processing belong to @alneas/react-tools. Both packages use this package’s single theme/context implementation.

Composition and examples · Contributing · Release preparation. Storybook uses docs, a11y and Vitest addons only, is development-only and has no hosting/publishing side effects. This is a local first-release candidate. Publication requires a separate release.

The /hooks entry also provides useGPS: one geolocation request after mount, undefined before success/on denial/when unavailable, with late callbacks ignored after unmount. Host permission and a secure context are required.

Consumer AI setup

Section titled “Consumer AI setup”

The build generates exact exports, peer dependencies and CSS paths in dist/ai/package-context.json. Preview package-scoped project instructions with:

Terminal window
node node_modules/@alneas/react-ui/dist/ai/setup.mjs

Add --write to update bounded blocks in AGENTS.md and CLAUDE.md while preserving host instructions. Package-specific skills live in dist/ai/skills/.

React and React DOM 19 only; see peerDependencies for the minimum supported 19.x version.

Consumer AI guidance ships in dist/ai/SKILL.md and package-context.json. Preview the package-scoped additions to your project instructions with the following command. Add --write after reviewing the preview; existing instructions are preserved.

Terminal window
node node_modules/@alneas/react-ui/dist/ai/setup.mjs --project .