# Tree-shaking and subpaths

> Every @jcsoftdev/ui subpath and single-component entry point, and how to keep bundles small.

Source: https://ui.jcsoftdev.com/docs/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:

```ts
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`.