Open-source React components, public themes, the Material Symbols icon catalog, agent skills, and A2UI adapters.
Canonical development happens in a private repository. This GitHub tree is a one-way sanitized snapshot of the six published packages. Use GitHub Issues for bugs and requests. npm packages are published from the private side, not from this mirror.
| Package | npm |
|---|---|
@uxelle/components |
npmjs.com/package/@uxelle/components |
@uxelle/themes |
npmjs.com/package/@uxelle/themes |
@uxelle/icons |
npmjs.com/package/@uxelle/icons |
@uxelle/skills |
npmjs.com/package/@uxelle/skills |
@uxelle/a2ui |
npmjs.com/package/@uxelle/a2ui |
@uxelle/a2ui-transport |
npmjs.com/package/@uxelle/a2ui-transport |
Requires Node.js 22+.
git clone https://github.com/Bayer-Group/bayer-uxelle.git && cd bayer-uxelle
npm install
npm run build
npm testnpm run build compiles the React theme provider and the component, icon, skills, and A2UI bundles.
Two sets of files in this tree are generated privately and committed here rather than built from source: theme CSS under packages/themes/build/ comes from a design-token pipeline, and the skill markdown under packages/skills/skills/ comes from a content pipeline. Neither pipeline is part of this snapshot, so there is no tokens:build or content-staging script to run.
import "@uxelle/components/base.css";
import "@uxelle/themes/open-source.css";
import { Button, Text } from "@uxelle/components";
import { UXelleThemeProvider } from "@uxelle/themes/react";
export function App() {
return (
<UXelleThemeProvider theme="open-source" darkMode={false} colorSwitcher="default">
<Button emphasis="high" size="medium">
<Text type="Button">Get started</Text>
</Button>
</UXelleThemeProvider>
);
}base.css loads the global baseline and the component rules in one import; @uxelle/components/styles.css and @uxelle/components/index.css stay exported if you need them separately. Built package JS does not import CSS for you.
Set data-open-source="light" or data-open-source="dark" on a parent (typically <html>). Next.js / SSR notes: docs/guides/nextjs.md.
Two public themes ship here. Import one theme stylesheet and match the data attribute to it:
| Theme | Import | Attribute |
|---|---|---|
| Open Source | @uxelle/themes/open-source.css |
data-open-source |
| Marmalade | @uxelle/themes/marmalade.css |
data-marmalade |
The public Logo asset set is the trademark-free generic mark only. Logo files in this tree are produced by the private sanitization sync — do not expect a generate:logos script here. Treat Logo as an asset slot: supply your own artwork and confirm you hold the rights to redistribute it.
GPL-3.0-only. Material Symbols in @uxelle/components styles.css and in @uxelle/icons is Apache-2.0 (see packages/components/NOTICE and packages/icons/NOTICE). Open Sans in the Open Source theme is SIL Open Font License 1.1.
Bayer name, logo, and corporate design are trademarks of Bayer AG and are not licensed by the GPL grant covering this source code.