uxElle

The next-gen React design system for Bayer

Build polished, accessible UIs from a single npm install — no CSS-in-JS runtime, no drama.

22 Components Actions · Content · Data Navigation · Layout · Forms

Multi-Theme Green & Velocity Light + Dark modes

Zero Runtime Plain CSS · PostCSS No JS overhead

RSC Ready "use client" marked Next.js App Router

---

Table of Contents

• Overview
• Quick Start
• Usage
• Components
• Themes
• Project Structure
• Development
• Architecture Decisions
• Contributing
• License

---

Overview

UXElle provides production-ready React components styled with design tokens from Bayer's design language. Components ship as ESM and CJS with TypeScript declarations and a bundled CSS stylesheet.

---

Quick Start

git clone https://github.com/Bayer-Group/bayer-uxelle.git && cd bayer-uxelle
npm install
npm run dev        # Storybook + watch mode

That's it. Three commands and you're live.

---

Usage

import { Button, Typography, Icon } from "@uxelle/components";
import "@uxelle/components/styles.css";

function App() {
  return (
    <Button variant="primary" size="md">
      Get Started
    </Button>
  );
}

Theme tokens (colors, spacing, typography scales) are provided separately via CSS custom properties — see the themes/ directory.

---

Components

Category	Components
Actions	Button · IconButton · Link · NavButton · Switch
Content	Typography · Icon · Divider · Label · HelperText
Data	List · ListItem · ListColumns · Accordion · AccordionGroup
Navigation	Navigation · Menu · LanguageSelector · LanguageSelectorButton
Layout	Layout · Footer
Form	Textfield

---

Themes

uxElle ships with two theme packages, each supporting light and dark modes:

| Theme | CSS File | | :--- | :--- | :--- | | Green | themes/green/green.css | | Velocity | themes/velocity/velocity.css |

Apply a theme via data-* attributes on any parent element for scoped theming, color-mode switching, decorative palettes, and responsive breakpoint tokens.

---

Project Structure

bayer-uxelle/
├── packages/
│   └── components/       @uxelle/components — core React library
├── apps/
│   └── storybook/        @uxelle/storybook — dev & documentation
├── themes/               Design token CSS outputs + manifest
├── docs/
│   └── adr/              Architecture Decision Records
└── package.json          Monorepo root (npm workspaces)

---

Development

Monorepo managed with npm workspaces. All scripts run from the root:

Script	What it does
npm run dev	Components in watch mode + Storybook
npm run build	Build every package
npm run lint	Type-check all packages
npm run lint:eslint	ESLint pass
npm run format	Prettier pass
npm run clean	Nuke all dist/ directories

Requirements

Dependency	Version
Node.js	>= 22
npm	ships with Node

---

Architecture Decisions

Key technical choices are documented as ADRs in docs/adr/:

ADR	Decision
001	React as the frontend framework
002	Tailwind CSS for styling
003	Next.js SSR compatibility
004	npm as the package manager
005	npm workspaces for the monorepo
006	tsup as the bundler

---

Contributing

We welcome contributions! Please read our Contribution Guidelines before submitting a pull request.

---

Built with care at Bayer.

MIT License © 2026 Bayer AG