# Entry points


Importing `chroma-panel` registers all five modes. Import the shell and add modes
yourself to cut that down.

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";

<ChromaPanel modes={["wheel"]} />;
```

| What you import     | Added to your app |
| ------------------- | ----------------- |
| all five modes      | 22.2 kB           |
| shell plus one mode | 14.1 kB           |

## The subpaths

| Entry point                 | What it holds                              |
| --------------------------- | ------------------------------------------ |
| `chroma-panel`              | Everything, with all five modes registered |
| `chroma-panel/panel`        | The panel shell, no modes                  |
| `chroma-panel/core`         | The colour engine, no React                |
| `chroma-panel/wheel`        | The wheel mode                             |
| `chroma-panel/sliders`      | The sliders mode                           |
| `chroma-panel/palettes`     | The palettes mode                          |
| `chroma-panel/image`        | The image mode                             |
| `chroma-panel/pencils`      | The pencils mode                           |
| `chroma-panel/named-colors` | The 148 CSS colour names                   |
| `chroma-panel/contrast`     | APCA and WCAG helpers                      |
| `chroma-panel/image-worker` | The worker for off-thread sampling         |
| `chroma-panel/style.css`    | The stylesheet                             |

<Callout variant="note" title="Import modes for the side effect">
  A mode entry point registers itself. Write `import "chroma-panel/wheel"`, not
  a named import, or a bundler may drop it.
</Callout>