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
66.8 KB
10.4 KB
77.2 KB
MessageList
54.6 KB
8.5 KB
63.1 KB
InputBar
25.9 KB
5.7 KB
31.5 KB
Markdown
11.3 KB
2.5 KB
13.8 KB
BashTool
10.1 KB
2.7 KB
12.8 KB
DiffReview
18.9 KB
2.8 KB
21.6 KB
McpSettingsPanel
22.4 KB
2.6 KB
25.0 KB
SettingsLayout
2.6 KB
2.0 KB
4.5 KB
CommandPalette
4.3 KB
1.5 KB
5.8 KB
Wizard
4.0 KB
1.6 KB
5.7 KB
ChatLauncher
3.5 KB
2.2 KB
5.7 KB
AiKitProvider
5.7 KB
3.0 KB
8.7 KB
mountChatLauncher
0.8 KB
none
0.8 KB
import *
181.3 KB
17.7 KB
198.9 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.