@dataimago/ui

React components for the dataimago ethical AI design system.

Registry: published to public npm (registry.npmjs.org) under the @dataimago scope alongside @dataimago/tokens and @dataimago/css. No scoped .npmrc or GITHUB_PACKAGES_TOKEN is required — a plain pnpm install @dataimago/ui works.

Peer dependencies

• react ≥ 18
• react-dom ≥ 18
• @dataimago/tokens ≥ 0.1.0-alpha.0
• @dataimago/css ≥ 0.1.0-alpha.0 (visual styling consumes the semantic CSS variables emitted by this package)

Alpha scope

Just one smoke component for now:

import { Button } from '@dataimago/ui';

<Button variant="primary">Generate</Button>
<Button variant="secondary" size="sm">Cancel</Button>

Additional components get harvested from consumer prototypes (dataimago-ai, dissertation.ai, etc.) via the prototype-in-consumer workflow.

Building

pnpm --filter @dataimago/ui build

Storybook

Storybook is the local workshop for validating dataimago components and visual directions before they are harvested into the published package or adopted by dataimago-ai.

pnpm --filter @dataimago/ui storybook
pnpm --filter @dataimago/ui build-storybook

The Storybook preview imports @dataimago/css/dataimago.css, so stories should use semantic CSS variables rather than app-local Tailwind classes. When the dev server is running, the Storybook MCP addon is available at http://localhost:6006/mcp for AI-assisted component discovery and story testing.