# innovaccer/design-system architecture

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

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

## Overview

Masala Design System is a customizable, accessible React component library. An application developer imports components from the public API, renders them in a React application, and supplies the separately loaded CSS for styling and theming. The runtime is primarily a collection of components rather than a service-backed workflow. The graph groups core controls, layout and data presentation, AI-specific components, and shared accessibility utilities. Relationships are limited to exports and component composition shown in the README or sampled source; other internal dependencies were not inspected.

Main entry points: [`core/index.tsx`](https://github.com/innovaccer/design-system/blob/master/core/index.tsx) (Component exports), [`core/ai-components/AIResponse/index.tsx`](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/index.tsx) (AI response), [`core/ai-components/AIIconButton/index.tsx`](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIIconButton/index.tsx) (AI icon button), [`core/components/atoms/button/Button.tsx`](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/button/Button.tsx) (Button)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Public API"]
  node_public_api["Component exports<br/>[index.tsx]"]
end

subgraph group_controls["Core Controls"]
  node_button["Button<br/>[Button.tsx]"]
  node_checkbox["Checkbox<br/>[Checkbox.tsx]"]
  node_chip["Chip<br/>[Chip.tsx]"]
  node_chip_group["Chip group<br/>[ChipGroup.tsx]"]
  node_dropdown["Dropdown<br/>[Dropdown.tsx]"]
  node_input["Input<br/>[Input.tsx]"]
end

subgraph group_presentation["Layout &amp; Data"]
  node_avatar["Avatar<br/>[Avatar.tsx]"]
  node_avatar_group["Avatar group<br/>[AvatarGroup.tsx]"]
  node_backdrop["Backdrop<br/>[Backdrop.tsx]"]
  node_breadcrumbs["Breadcrumbs<br/>[Breadcrumbs.tsx]"]
  node_card["Card<br/>[Card.tsx]"]
  node_grid["Grid"]
  node_table["Table"]
  node_reorder["Draggable list<br/>[Draggable.tsx]"]
end

subgraph group_ai["AI Components"]
  node_ai_api["AI components"]
  node_ai_icon["AI icon button<br/>[index.tsx]"]
  node_sara_icon["Sara icon<br/>[SaraIcon.tsx]"]
  node_ai_response["AI response<br/>[index.tsx]"]
  node_chat_box["Chat box<br/>[ChatBox.tsx]"]
  node_chat_button["Chat button<br/>[ChatButton.tsx]"]
  node_chat_action["Chat action bar<br/>[ChatActionBar.tsx]"]
  node_chat_body["Chat body<br/>[ChatBody.tsx]"]
end

subgraph group_shared["Accessibility"]
  node_accessibility["Accessibility helpers"]
  node_css["Stylesheet &amp; theming"]
end

node_developer(("Application developer"))
node_app["React application"]

node_developer -->|"imports"| node_public_api
node_public_api -->|"used in"| node_app
node_public_api -->|"exports"| node_button
node_public_api -->|"exports"| node_checkbox
node_public_api -->|"exports"| node_chip
node_public_api -->|"exports"| node_chip_group
node_public_api -->|"exports"| node_avatar
node_public_api -->|"exports"| node_avatar_group
node_public_api -->|"exports"| node_backdrop
node_public_api -->|"exports"| node_breadcrumbs
node_public_api -->|"exports"| node_card
node_public_api -->|"exports"| node_grid
node_public_api -->|"exports"| node_table
node_public_api -->|"exports"| node_dropdown
node_public_api -->|"exports"| node_input
node_developer -->|"loads separately"| node_css
node_ai_icon -->|"renders"| node_sara_icon
node_ai_response -->|"renders"| node_chat_box
node_ai_response -->|"uses"| node_chat_button
node_ai_response -->|"uses"| node_chat_action
node_ai_response -->|"uses"| node_chat_body

click node_public_api "https://github.com/innovaccer/design-system/blob/master/core/index.tsx"
click node_button "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/button/Button.tsx"
click node_checkbox "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/checkbox/Checkbox.tsx"
click node_chip "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/chip/Chip.tsx"
click node_chip_group "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/chipGroup/ChipGroup.tsx"
click node_dropdown "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/dropdown/Dropdown.tsx"
click node_input "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/input/Input.tsx"
click node_avatar "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/avatar/Avatar.tsx"
click node_avatar_group "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/avatarGroup/AvatarGroup.tsx"
click node_backdrop "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/backdrop/Backdrop.tsx"
click node_breadcrumbs "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/breadcrumbs/Breadcrumbs.tsx"
click node_card "https://github.com/innovaccer/design-system/blob/master/core/components/atoms/card/Card.tsx"
click node_grid "https://github.com/innovaccer/design-system/tree/master/core/components/organisms/grid"
click node_table "https://github.com/innovaccer/design-system/tree/master/core/components/organisms/table"
click node_reorder "https://github.com/innovaccer/design-system/blob/master/core/components/organisms/listbox/reorderList/Draggable.tsx"
click node_ai_api "https://github.com/innovaccer/design-system/tree/master/core/ai-components"
click node_ai_icon "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIIconButton/index.tsx"
click node_sara_icon "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIIconButton/SaraIcon.tsx"
click node_ai_response "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/index.tsx"
click node_chat_box "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatBox.tsx"
click node_chat_button "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatButton.tsx"
click node_chat_action "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatActionBar.tsx"
click node_chat_body "https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatBody.tsx"
click node_accessibility "https://github.com/innovaccer/design-system/tree/master/core/accessibility/utils"
click node_css "https://github.com/innovaccer/design-system/tree/master/css"

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_public_api toneBlue
class node_button,node_checkbox,node_chip,node_chip_group,node_dropdown,node_input toneAmber
class node_avatar,node_avatar_group,node_backdrop,node_breadcrumbs,node_card,node_grid,node_table,node_reorder toneMint
class node_ai_api,node_ai_icon,node_sara_icon,node_ai_response,node_chat_box,node_chat_button,node_chat_action,node_chat_body toneRose
class node_accessibility,node_css,node_developer,node_app toneIndigo
```

## Components

### Public API

- [Component exports](https://github.com/innovaccer/design-system/blob/master/core/index.tsx): `core/index.tsx`

### Core Controls

- [Button](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/button/Button.tsx): `core/components/atoms/button/Button.tsx`
- [Checkbox](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/checkbox/Checkbox.tsx): `core/components/atoms/checkbox/Checkbox.tsx`
- [Chip](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/chip/Chip.tsx): `core/components/atoms/chip/Chip.tsx`
- [Chip group](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/chipGroup/ChipGroup.tsx): `core/components/atoms/chipGroup/ChipGroup.tsx`
- [Dropdown](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/dropdown/Dropdown.tsx): `core/components/atoms/dropdown/Dropdown.tsx`
- [Input](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/input/Input.tsx): `core/components/atoms/input/Input.tsx`

### Layout & Data

- [Avatar](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/avatar/Avatar.tsx): `core/components/atoms/avatar/Avatar.tsx`
- [Avatar group](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/avatarGroup/AvatarGroup.tsx): `core/components/atoms/avatarGroup/AvatarGroup.tsx`
- [Backdrop](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/backdrop/Backdrop.tsx): `core/components/atoms/backdrop/Backdrop.tsx`
- [Breadcrumbs](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/breadcrumbs/Breadcrumbs.tsx): `core/components/atoms/breadcrumbs/Breadcrumbs.tsx`
- [Card](https://github.com/innovaccer/design-system/blob/master/core/components/atoms/card/Card.tsx): `core/components/atoms/card/Card.tsx`
- [Grid](https://github.com/innovaccer/design-system/tree/master/core/components/organisms/grid): `core/components/organisms/grid`
- [Table](https://github.com/innovaccer/design-system/tree/master/core/components/organisms/table): `core/components/organisms/table`
- [Draggable list](https://github.com/innovaccer/design-system/blob/master/core/components/organisms/listbox/reorderList/Draggable.tsx): `core/components/organisms/listbox/reorderList/Draggable.tsx`

### AI Components

- [AI components](https://github.com/innovaccer/design-system/tree/master/core/ai-components): `core/ai-components`
- [AI icon button](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIIconButton/index.tsx): `core/ai-components/AIIconButton/index.tsx`
- [Sara icon](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIIconButton/SaraIcon.tsx): `core/ai-components/AIIconButton/SaraIcon.tsx`
- [AI response](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/index.tsx): `core/ai-components/AIResponse/index.tsx`
- [Chat box](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatBox.tsx): `core/ai-components/AIResponse/ChatBox.tsx`
- [Chat button](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatButton.tsx): `core/ai-components/AIResponse/ChatButton.tsx`
- [Chat action bar](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatActionBar.tsx): `core/ai-components/AIResponse/ChatActionBar.tsx`
- [Chat body](https://github.com/innovaccer/design-system/blob/master/core/ai-components/AIResponse/ChatBody.tsx): `core/ai-components/AIResponse/ChatBody.tsx`

### Accessibility

- [Accessibility helpers](https://github.com/innovaccer/design-system/tree/master/core/accessibility/utils): `core/accessibility/utils`
- [Stylesheet & theming](https://github.com/innovaccer/design-system/tree/master/css): `css`

### Other components

- **Application developer**
- **React application**

## Connections

- Application developer → Component exports: imports (evidence: `README.md`)
- Component exports → React application: used in (evidence: `README.md`)
- Component exports → Button: exports (evidence: `core/index.tsx`)
- Component exports → Checkbox: exports (evidence: `core/index.tsx`)
- Component exports → Chip: exports (evidence: `core/index.tsx`)
- Component exports → Chip group: exports (evidence: `core/index.tsx`)
- Component exports → Avatar: exports (evidence: `core/index.tsx`)
- Component exports → Avatar group: exports (evidence: `core/index.tsx`)
- Component exports → Backdrop: exports (evidence: `core/index.tsx`)
- Component exports → Breadcrumbs: exports (evidence: `core/index.tsx`)
- Component exports → Card: exports (evidence: `core/index.tsx`)
- Component exports → Grid: exports (evidence: `core/index.tsx`)
- Component exports → Table: exports (evidence: `core/index.tsx`)
- Component exports → Dropdown: exports (evidence: `core/index.tsx`)
- Component exports → Input: exports (evidence: `core/index.tsx`)
- Application developer → Stylesheet & theming: loads separately (evidence: `README.md`)
- AI icon button → Sara icon: renders (evidence: `core/ai-components/AIIconButton/index.tsx`)
- AI response → Chat box: renders (evidence: `core/ai-components/AIResponse/index.tsx`)
- AI response → Chat button: uses (evidence: `core/ai-components/AIResponse/index.tsx`)
- AI response → Chat action bar: uses (evidence: `core/ai-components/AIResponse/index.tsx`)
- AI response → Chat body: uses (evidence: `core/ai-components/AIResponse/index.tsx`)