Getting started

Package exports

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

View as Markdown

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.