@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.
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
This repository ships an integration skill for AI coding agents that consume @tedi-design-system/react in a downstream application. The skill lives at skills/tedi-react/ and conforms to the skill.sh standard, so it works with any modern AI tool that supports skills.
It teaches an agent:
- The canonical import paths (
/tedivs/community), required providers, and setup snippet - How to read the current component roster and props out of the installed package (the generated
component.manifest.jsonplus the shipped.d.tstree), so the agent never works from a stale prop list - Component patterns: polymorphic
as, per-breakpoint props, compound sub-components - Form control conventions (controlled/uncontrolled, helpers, validation)
- Theming with design tokens from
@tedi-design-system/core, looked up in itstokens.json - Behaviour the types don't express: composition constraints, responsive quirks, and the accessibility requirements a prop signature won't tell you
- Common pitfalls to avoid (deprecated Community components, hardcoded colors,
var()fallbacks, etc.)
Use the skills.sh CLI from your project root:
npx skills add TEDI-Design-System/reactThe CLI auto-discovers the tedi-react skill under skills/ and registers it for any compatible agent. Once installed, the agent will trigger the skill whenever you work with TEDI React components.
Skills for contributing to the TEDI Design System (contributor skills, standards validation, etc.) live in a separate repo: TEDI-Design-System/ai-skills.
The following instructions apply only if you are working on this repository itself (e.g. developing, fixing, or adding components).
npm install
To view and develop components in isolation, start Storybook:
npm run start
This will launch a local Storybook instance for component development.
Check the wiki for component guidelines and coding standards.
Report issues or contribute via GitHub Issues.
This project ships with AI agent skills to help both contributors and consumers work with TEDI components.
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-reactGuides development inside this repo: creating new components, running tests/lint, WCAG audits, refactoring, and Storybook stories. Available as /contributing when working in this repository.
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.
We use Chromatic for visual testing, reviewing UI changes, and preventing visual regressions.