How innovaccer/design-system works
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 Component exports · AIResponse/index.tsx AI response · AIIconButton/index.tsx AI icon button · Button.tsx Button
Components 27
Public API
- Component exports
core/index.tsx
Core Controls
Layout & Data
- Avatar
core/components/atoms/avatar/Avatar.tsx - Avatar group
core/components/atoms/avatarGroup/AvatarGroup.tsx - Backdrop
core/components/atoms/backdrop/Backdrop.tsx - Breadcrumbs
core/components/atoms/breadcrumbs/Breadcrumbs.tsx - Card
core/components/atoms/card/Card.tsx - Grid
core/components/organisms/grid - Table
core/components/organisms/table - Draggable list
core/components/organisms/listbox/reorderList/Draggable.tsx
AI Components
- AI components
core/ai-components - AI icon button
core/ai-components/AIIconButton/index.tsx - Sara icon
core/ai-components/AIIconButton/SaraIcon.tsx - AI response
core/ai-components/AIResponse/index.tsx - Chat box
core/ai-components/AIResponse/ChatBox.tsx - Chat button
core/ai-components/AIResponse/ChatButton.tsx - Chat action bar
core/ai-components/AIResponse/ChatActionBar.tsx - Chat body
core/ai-components/AIResponse/ChatBody.tsx
Accessibility
- Accessibility helpers
core/accessibility/utils - Stylesheet & theming
css
Other components
- Application developer
- React application
Connections 21
- Application developer → Component exports: imports
README.md - Component exports → React application: used in
README.md - Component exports → Button: exports
core/index.tsx - Component exports → Checkbox: exports
core/index.tsx - Component exports → Chip: exports
core/index.tsx - Component exports → Chip group: exports
core/index.tsx - Component exports → Avatar: exports
core/index.tsx - Component exports → Avatar group: exports
core/index.tsx - Component exports → Backdrop: exports
core/index.tsx - Component exports → Breadcrumbs: exports
core/index.tsx - Component exports → Card: exports
core/index.tsx - Component exports → Grid: exports
core/index.tsx - Component exports → Table: exports
core/index.tsx - Component exports → Dropdown: exports
core/index.tsx - Component exports → Input: exports
core/index.tsx - Application developer → Stylesheet & theming: loads separately
README.md - AI icon button → Sara icon: renders
core/ai-components/AIIconButton/index.tsx - AI response → Chat box: renders
core/ai-components/AIResponse/index.tsx - AI response → Chat button: uses
core/ai-components/AIResponse/index.tsx - AI response → Chat action bar: uses
core/ai-components/AIResponse/index.tsx - AI response → Chat body: uses
core/ai-components/AIResponse/index.tsx