# tedi-design-system/react architecture

> Architecture diagram of the GitHub repository tedi-design-system/react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tedi-design-system/react
- Repository: https://github.com/tedi-design-system/react

## Overview

TEDI Design System for React is a reusable UI component library, exposed through separate `/tedi` and `/community` entry points. An application imports components and composes them into accessible interfaces; users then interact with navigation, overlays, forms, tables, and other controls. The tree and entry-point barrels support these capability branches, but sampled implementation does not establish a single runtime pipeline between them. The graph focuses on documented exports and meaningful product areas; unsampled subsystem links are limited to the entry-point exports.

Main entry points: [`src/tedi/index.ts`](https://github.com/tedi-design-system/react/blob/rc/src/tedi/index.ts) (TEDI Exports), [`src/community/index.ts`](https://github.com/tedi-design-system/react/blob/rc/src/community/index.ts) (Community Exports), [`src/community/helpers`](https://github.com/tedi-design-system/react/tree/rc/src/community/helpers) (Helpers), [`src/tedi/components/base/typography/text/text.tsx`](https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/base/typography/text/text.tsx) (Typography And Icons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Package Entry Points"]
  node_tedi["TEDI Exports<br/>[index.ts]"]
  node_community_entry["Community Exports<br/>[index.ts]"]
end

subgraph group_ui["Core UI"]
  node_base["Typography And Icons<br/>[text.tsx]"]
  node_content["Content Components<br/>[card.tsx]"]
  node_navigation["Navigation And Layout"]
  node_status["Status And Notices"]
end

subgraph group_interaction["Forms And Interaction"]
  node_forms["TEDI Forms<br/>[field.tsx]"]
  node_filters["Filtering"]
  node_overlays["Overlays"]
end

subgraph group_community["Community Components"]
  node_community_layout["Community Layout"]
  node_community_forms["Community Forms"]
  node_community_data["Tables And Data"]
  node_map_ui["Map Components<br/>[map-preview.tsx]"]
  node_community_content["Community Content"]
end

subgraph group_foundation["Shared Foundations"]
  node_providers["Providers"]
  node_helpers["Helpers"]
end

node_app(("Consuming Application"))
node_core["TEDI Core Package"]
node_react["React Application"]

node_app -->|"imports TEDI"| node_tedi
node_app -->|"imports community"| node_community_entry
node_tedi -->|"exports"| node_base
node_tedi -->|"exports"| node_content
node_tedi -->|"exports"| node_navigation
node_tedi -->|"exports"| node_status
node_tedi -->|"exports"| node_forms
node_tedi -->|"exports"| node_filters
node_tedi -->|"exports"| node_overlays
node_tedi -->|"exports"| node_providers
node_tedi -->|"exports"| node_helpers
node_community_entry -->|"exports"| node_community_layout
node_community_entry -->|"exports"| node_community_forms
node_community_entry -->|"exports"| node_community_data
node_community_entry -->|"exports"| node_map_ui
node_community_entry -->|"exports"| node_community_content
node_community_entry -->|"exports"| node_helpers
node_providers -->|"uses design-system core"| node_core
node_app -->|"renders components"| node_react

click node_tedi "https://github.com/tedi-design-system/react/blob/rc/src/tedi/index.ts"
click node_community_entry "https://github.com/tedi-design-system/react/blob/rc/src/community/index.ts"
click node_base "https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/base/typography/text/text.tsx"
click node_content "https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/content/card/card.tsx"
click node_navigation "https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/navigation/breadcrumbs"
click node_forms "https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/form/field/field.tsx"
click node_filters "https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/filter/filter"
click node_overlays "https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/overlays/modal"
click node_community_layout "https://github.com/tedi-design-system/react/tree/rc/src/community/components/layout"
click node_community_forms "https://github.com/tedi-design-system/react/tree/rc/src/community/components/form/category-search"
click node_community_data "https://github.com/tedi-design-system/react/tree/rc/src/community/components/table"
click node_map_ui "https://github.com/tedi-design-system/react/blob/rc/src/community/components/map-components/map-preview/map-preview.tsx"
click node_community_content "https://github.com/tedi-design-system/react/tree/rc/src/community/components/accordion"
click node_helpers "https://github.com/tedi-design-system/react/tree/rc/src/community/helpers"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_tedi,node_community_entry toneBlue
class node_base,node_content,node_navigation,node_status toneAmber
class node_forms,node_filters,node_overlays toneMint
class node_community_layout,node_community_forms,node_community_data,node_map_ui,node_community_content toneRose
class node_providers,node_helpers,node_app,node_core,node_react toneIndigo
```

## Components

### Package Entry Points

- [TEDI Exports](https://github.com/tedi-design-system/react/blob/rc/src/tedi/index.ts): `src/tedi/index.ts`
- [Community Exports](https://github.com/tedi-design-system/react/blob/rc/src/community/index.ts): `src/community/index.ts`

### Core UI

- [Typography And Icons](https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/base/typography/text/text.tsx): `src/tedi/components/base/typography/text/text.tsx`
- [Content Components](https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/content/card/card.tsx): `src/tedi/components/content/card/card.tsx`
- [Navigation And Layout](https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/navigation/breadcrumbs): `src/tedi/components/navigation/breadcrumbs`
- **Status And Notices**

### Forms And Interaction

- [TEDI Forms](https://github.com/tedi-design-system/react/blob/rc/src/tedi/components/form/field/field.tsx): `src/tedi/components/form/field/field.tsx`
- [Filtering](https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/filter/filter): `src/tedi/components/filter/filter`
- [Overlays](https://github.com/tedi-design-system/react/tree/rc/src/tedi/components/overlays/modal): `src/tedi/components/overlays/modal`

### Community Components

- [Community Layout](https://github.com/tedi-design-system/react/tree/rc/src/community/components/layout): `src/community/components/layout`
- [Community Forms](https://github.com/tedi-design-system/react/tree/rc/src/community/components/form/category-search): `src/community/components/form/category-search`
- [Tables And Data](https://github.com/tedi-design-system/react/tree/rc/src/community/components/table): `src/community/components/table`
- [Map Components](https://github.com/tedi-design-system/react/blob/rc/src/community/components/map-components/map-preview/map-preview.tsx): `src/community/components/map-components/map-preview/map-preview.tsx`
- [Community Content](https://github.com/tedi-design-system/react/tree/rc/src/community/components/accordion): `src/community/components/accordion`

### Shared Foundations

- **Providers**
- [Helpers](https://github.com/tedi-design-system/react/tree/rc/src/community/helpers): `src/community/helpers`

### Other components

- **Consuming Application**
- **TEDI Core Package**
- **React Application**

## Connections

- Consuming Application → TEDI Exports: imports TEDI
- Consuming Application → Community Exports: imports community
- TEDI Exports → Typography And Icons: exports
- TEDI Exports → Content Components: exports
- TEDI Exports → Navigation And Layout: exports
- TEDI Exports → Status And Notices: exports
- TEDI Exports → TEDI Forms: exports
- TEDI Exports → Filtering: exports
- TEDI Exports → Overlays: exports
- TEDI Exports → Providers: exports
- TEDI Exports → Helpers: exports
- Community Exports → Community Layout: exports
- Community Exports → Community Forms: exports
- Community Exports → Tables And Data: exports
- Community Exports → Map Components: exports
- Community Exports → Community Content: exports
- Community Exports → Helpers: exports
- Providers → TEDI Core Package: uses design-system core
- Consuming Application → React Application: renders components