Tree-shaking and subpaths

The package is unbundled ESM with "sideEffects": ["**/*.css"]: one output file per source file, so a bundler can reduce an import to the component you use and its own dependencies.

Subpaths

Import path	Components
@jcsoftdev/ui/ai	15
@jcsoftdev/ui/atoms	17
@jcsoftdev/ui/brand	2
@jcsoftdev/ui/calendar	5
@jcsoftdev/ui/charts	95
@jcsoftdev/ui/containers	51
@jcsoftdev/ui/forms	21
@jcsoftdev/ui/navigation	8
@jcsoftdev/ui/overlays	39
@jcsoftdev/ui/palette	1
@jcsoftdev/ui/rich-text	2
@jcsoftdev/ui/shell	3
@jcsoftdev/ui/states	5
@jcsoftdev/ui/utils	0
@jcsoftdev/ui/xlsx	0

Also available: @jcsoftdev/ui/styles/* (CSS) and @jcsoftdev/ui/tokens/* (the tokens JSON).

Single-component entries

Inside a group, components that live in their own folder also have an entry point. 155 are available, for example:

import {} from "@jcsoftdev/ui/ai/attachment";
import {} from "@jcsoftdev/ui/ai/chain-of-thought";
import {} from "@jcsoftdev/ui/ai/chat-list";
import {} from "@jcsoftdev/ui/ai/chat-message";
import {} from "@jcsoftdev/ui/ai/code-block";
import {} from "@jcsoftdev/ui/ai/conversation";

Rules of thumb

• Prefer the group entry (@jcsoftdev/ui/atoms) in application code: it tree-shakes and reads well.
• Use a single-component entry when you need the smallest possible import graph, for example in an island that ships to the browser.
• Heavy features load lazily: the DataGrid chart panel and the XLSX writer are imported on demand.
• Add @source for the package dist folder so Tailwind generates the classes the components use.
• Compile the TypeScript yourself with the source export condition, which points at src/*/index.ts.