Basic usage

Basic UI and render composition

react-ui owns visual primitives and interaction state. It accepts ordinary values, callbacks and render elements; schema interpretation and record fetching live in react-tools or the host application. There is no schema/CRUD type dependency.

<DialogTrigger render={<Button />}>Open</DialogTrigger>
<Button nativeButton={false} render={<a href='/help' />}>Help</Button>
<Button render={(props, state) => <button {...props} data-disabled={state.disabled} />}>Save</Button>

Custom components must forward the ref and all received props, including events, aria attributes and className. React 19 ref props and forwardRef components are both supported. For nested triggers, nest render elements rather than native buttons. Base UI merges events and refs. Use event.preventBaseUIHandler() to cancel its handler; native preventDefault() retains its browser meaning. Setting loading on Button sets disabled and aria-busy. Set nativeButton=false for non-button tags.

Field + FieldLabel + FieldControl render={<Input />} connects the label and description without any form provider. SearchableSelectInput accepts options, value/onValueChange, onSearch and onCreateOption callbacks without a CRUD context. Use the tools version when dataAccessConfig integration is needed.

The executable examples are examples/basic-ui.tsx. The same functions are imported by stories/basic-ui.stories.tsx, covering normal/error/disabled/loading, long Japanese text, dark theme, Dialog and Select keyboard operations. Guides link the canonical example instead of copying it.

Run bun run storybook to explore components. Run bun run test:storybook for real Chromium interactions and axe checks. a11y.test is globally error; no disabled rules or story exclusions are used. The test command additionally injects a missing-alt image in a temporary story, asserts that image-alt fails, and removes the control in finally. Automated checks cover these stories; manual keyboard and assistive technology review still belongs in release review.

CSS is explicit. Import /styles for utilities and tokens, optionally /reset.css before it for global defaults. Without reset, supply application base foreground and background styles. /theme.css contains standalone tokens. ThemeProvider and useTheme share one context even when imported through tools compatibility facades.