@aurea-uds/react
v0.6.0
Published
React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.
Maintainers
victor1morReadme
@aurea-uds/react
React components for Aurea Universal Design System.
pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/iconsUse
Load the fonts before the stylesheet — the core no longer embeds IBM Plex.
import "@aurea-uds/fonts/css";
import "@aurea-uds/core/css";
import {AureaProvider, Button} from "@aurea-uds/react";
export default () => (
<AureaProvider spriteUrl="/aurea-icons.svg">
<Button variant="primary">Ship it</Button>
</AureaProvider>
);spriteUrl points at the file from @aurea-uds/icons — copy it into whatever your app
serves as static assets. It is configuration, so it belongs to the provider, not to every
component that draws an icon.
Subpath imports
The barrel works, but each category is also its own entry point, so you can take a part of the system without the rest:
import {Button} from "@aurea-uds/react/actions";Six modules carry an optional engine and are therefore outside the barrel — importing a Button must never pull in a peer you did not install:
| Import | Needs you to install |
|---|---|
| @aurea-uds/react/code-editor | codemirror and its @codemirror/* packages |
| @aurea-uds/react/data-grid | @tanstack/react-table |
| @aurea-uds/react/qrcode | qr |
| @aurea-uds/react/calendar | react-day-picker |
| @aurea-uds/react/chart | recharts |
| @aurea-uds/react/graph | @xyflow/react |
Hooks
Four of them are public, and they are the part of the API that has no page in the catalogue — the catalogue documents components, and a hook is not one. Until that changes, this is where they are written down.
import {AureaProvider, useToast} from "@aurea-uds/react";
function SaveButton() {
const toast = useToast(); // inside AureaProvider
return <Button onClick={() => toast.add({
title: "Saved",
description: "Two files uploaded.",
type: "success", // info | success | warning | danger
})}>Save</Button>;
}The stack renders itself: AureaProvider already mounts the viewport, so there is no <Toaster/>
to place and no second provider to install.
| Hook | What it gives you |
|---|---|
| useToast() | add({title, description, type}), plus close(id) and the live list. The queue is Base UI's |
| useAureaTheme() | reads and sets both axes on <html>: theme (dark/light) and density. theme is null on the server — do not draw theme-dependent UI until it isn't |
| useAureaStrings() | the label dictionary, merged with what you passed to the provider |
| useSpriteUrl() | where the icon sprite is being loaded from |
Requirements
React 19 or later. ref is a plain prop in React 19, and the types depend on that.
Licence
Apache-2.0.