# Package exports

> Choose focused JavaScript and CSS entry points for smaller bundles, predictable style order, and server-rendered React applications.

Web: https://velvet-ui.watermelons.workers.dev/docs/package-exports

Velvet ships focused ESM and CommonJS entry points. Importing a composition does not pull every other composition into the application bundle.

## Public entry points

| Import | What it contains | CSS |
| --- | --- | --- |
| `velvet-ui/sheet` | Sheet and SheetStack only | `velvet-ui/sheet.css` |
| `velvet-ui/motion` | Framework-free springs, WAAPI, and travel interpolation | none |
| `velvet-ui/motion/react` | Lifecycle-owned motion hooks | none |
| `velvet-ui/utilities` | Scroll, accessibility, fixed, island, and overlay helpers | `velvet-ui/sheet.css` |
| `velvet-ui/sheet-morph` | Shared-origin geometry | `velvet-ui/sheet.css` |
| `velvet-ui/theme-backdrop` | Backdrop plus browser theme tint | `velvet-ui/sheet.css` |
| `velvet-ui/bottom-sheet` | Styled mobile/task sheet | `sheet.css` + `bottom-sheet.css` |
| `velvet-ui/depth-sheet` | Recursive iOS-like depth stack | `sheet.css` + `depth-sheet.css` |
| `velvet-ui/card-expansion` | Trigger-to-modal expansion | `sheet.css` + `card-expansion.css` |
| `velvet-ui/persistent-sheet` | Non-modal collapsed surface | `sheet.css` + `persistent-sheet.css` |
| `velvet-ui/lightbox` | Full-screen media surface | `sheet.css` + `lightbox.css` |
| `velvet-ui/toast` | Toaster and imperative toast API | `toast.css` or `toast-theme.css` |
| `velvet-ui` | Every public export | Import the CSS you use |

## Smallest reliable imports

```tsx
import { Sheet } from "velvet-ui/sheet";
import { animate } from "velvet-ui/motion";
import { CardExpansion } from "velvet-ui/card-expansion";
import { toast, Toaster } from "velvet-ui/toast";

import "velvet-ui/sheet.css";
import "velvet-ui/card-expansion.css";
```

Use the root `velvet-ui` entry when convenience matters more than the last few bytes. `motion` has no React import; `motion/react` adds hooks; `sheet` does not pull either React hooks or optional compositions. CSS remains explicit because it is a side effect and bundlers must preserve its order.

## React and server rendering

React 18 and 19 are peer dependencies. Trigger markup renders on the server. Portalled surfaces and document managers activate after hydration.

Call `toast()` from client code or an event handler. The `Toaster` itself can appear in an SSR tree because its portal host is discovered after mount.

## Tree-shaking checklist

- Import from focused subpaths.
- Use `motion`, not `motion/react`, outside React components.
- Import `sheet.css` or `toast.css` instead of `base.css` when only one primitive family is present.
- Import only the composition CSS you use.
- Do not re-export the entire root package from a local barrel.
- Keep `sideEffects: ['**/*.css']` when repackaging Velvet.
- Measure a minified consumer build, not the dev graph or raw source chunks.