TEDI Design System for React

@tedi-design-system/react is a library of React components implementing the TEDI Design System. It provides reusable, accessible, and consistent UI components to streamline building React applications.

Usage instructions and detailed documentation for using the components in your application are available in Storybook.

---

Getting Started (Using the package)

If you are installing @tedi-design-system/react in your own project, follow the Get Started guide in Storybook

The Storybook documentation covers:

• installation instructions
• required styles and providers
• component usage examples
• accessibility notes
• component APIs

---

Repository Development Guide (Contributors)

The following instructions apply only if you are working on this repository itself (e.g. developing, fixing, or adding components).

Install dependencies

npm install

Running Storybook locally

To view and develop components in isolation, start Storybook:

npm run start

This will launch a local Storybook instance for component development.

---

Contributing

Check the wiki for component guidelines and coding standards.
Report issues or contribute via GitHub Issues.

---

AI Skills

This project ships with AI agent skills to help both contributors and consumers work with TEDI components.

For consumers — tedi-react

Helps you build UIs with @tedi-design-system/react: component usage, forms integration, and theming. Lives in skills/tedi-react.

Install it into your agent (Claude Code, Cursor, Codex, and others) with the skills CLI:

npx skills add https://github.com/tedi-design-system/react --skill tedi-react

For contributors — contributing

Guides development inside this repo: creating new components, running tests/lint, WCAG audits, refactoring, and Storybook stories. Available as /contributing when working in this repository.

For AI-driven design & UI generation — DESIGN.md

DESIGN.md is the machine-readable representation of the design system — semantic tokens plus tedi-ready component rules — that AI agents read to ground generated UI in real TEDI tokens and components. It also covers where to look things up, and how to use TEDI as a design system in claude.ai/design (each organisation runs its own; design-system projects cannot be shared across organisations).

Its token table is read straight from @tedi-design-system/core/tokens.json (core generates it from Figma and publishes it with the stylesheet it describes) and component.manifest.json is derived from the src/tedi barrel; both are produced by npm run design:build (see design-docs/). The surrounding prose is hand-maintained, with the update-design-docs skill keeping it current. design-system-spec.json is a descriptor pointing at those files, intended for repository-URL import.

---

Visual Testing

We use Chromatic for visual testing, reviewing UI changes, and preventing visual regressions.