Bundle size

Importing one component bundles that component and what it renders, not the whole kit. JavaScript is tree-shaken by your bundler; styles come per component when you import styles/base.css and styles/<Component>.css instead of styles.css.

import "@sinups/ai-kit/styles/base.css";
import "@sinups/ai-kit/styles/Wizard.css";

Sizes

Import
JS gzip
CSS gzip
Total gzip
AgentChat
85.3 KB
12.7 KB
98.0 KB
MessageList
70.4 KB
9.9 KB
80.3 KB
InputBar
30.5 KB
7.1 KB
37.6 KB
Markdown
13.7 KB
3.0 KB
16.7 KB
BashTool
11.2 KB
3.0 KB
14.2 KB
DiffReview
19.0 KB
3.1 KB
22.1 KB
McpSettingsPanel
22.9 KB
2.9 KB
25.8 KB
SettingsLayout
2.6 KB
2.2 KB
4.8 KB
CommandPalette
4.3 KB
1.8 KB
6.1 KB
Wizard
4.0 KB
1.9 KB
5.9 KB
ChatLauncher
4.6 KB
3.2 KB
7.9 KB
LauncherActions
0.9 KB
2.1 KB
3.0 KB
ToolApprovalCard
3.7 KB
2.5 KB
6.2 KB
AiKitProvider
5.9 KB
3.3 KB
9.2 KB
mountChatLauncher
0.8 KB
none
0.8 KB
MessageActionButton
0.3 KB
1.5 KB
1.8 KB
MarkdownLinksProvider
0.2 KB
1.5 KB
1.7 KB
MediaPart
4.9 KB
3.1 KB
8.0 KB
ArtifactPanel
1.4 KB
1.8 KB
3.3 KB
ArtifactCard
1.7 KB
2.1 KB
3.9 KB
FileAttachment
3.9 KB
2.9 KB
6.9 KB
filterFiles
0.4 KB
none
0.4 KB
useFileIntake
0.7 KB
none
0.7 KB
ChatDropZone
2.0 KB
1.8 KB
3.8 KB
CommandToggles
0.7 KB
1.9 KB
2.5 KB
StarterCategories
0.9 KB
2.1 KB
3.0 KB
MicButton
2.4 KB
2.3 KB
4.7 KB
VoiceLevel
0.5 KB
1.8 KB
2.3 KB
SpeakingIndicator
1.8 KB
2.1 KB
3.9 KB
import *
218.9 KB
23.4 KB
242.2 KB
embed widget.js
9.7 KB
none
9.7 KB

How it is measured

Each row bundles a single import from the published build with esbuild, minified, with react, react-dom and @mantine/* left to your app. Icons and markdown-to-jsx are counted. CSS is base.css plus the component file, or styles.css for import *. The table is generated by yarn size --json, which also fails CI when an entry grows past its budget.