DocsPackages
Packages
Components and blocks pull in these packages when an item needs them. Pick a package manager and copy the install command for that package.
The component or block page lists the exact set for that item. Registry setup is in Installation.
Animation
Motion, timelines, and smooth scrolling. The motion package is imported from motion/react.
motionAnimation for components and blocks.
npm install motiongsapTimelines, SVG morphs, and scroll-linked motion.
npm install gsaplenisSmooth scrolling.
npm install lenis@number-flow/reactAnimated number transitions.
npm install @number-flow/reactframer-motionAnimation package installed by Encrypt Button.
npm install framer-motionWebGL
Three.js and the React bindings used by backgrounds, shaders, and 3D scenes.
threeWebGL scenes and shaders.
npm install three@react-three/fiberReact renderer for Three.js.
npm install @react-three/fiber@react-three/dreiHelpers for React Three Fiber scenes.
npm install @react-three/dreithreejs-componentsWebGL effects for Neon Tubes.
npm install threejs-components@types/threeTypeScript types for three.
npm install -D @types/threePhysics
The 2D physics stack used by Gravity Pills.
matter-js2D physics.
npm install matter-jspoly-decompConvex decomposition used with Matter.js.
npm install poly-decompsvg-path-commanderSVG path data for physics shapes.
npm install svg-path-commander@types/matter-jsTypeScript types for matter-js.
npm install -D @types/matter-jsInterface
Primitives, carousels, themes, and embeds that some items install.
@base-ui/reactUnstyled UI primitives.
npm install @base-ui/react@radix-ui/react-accordionAccordion primitives.
npm install @radix-ui/react-accordionembla-carousel-reactCarousel for React.
npm install embla-carousel-reactembla-carouselCarousel core used with the React package.
npm install embla-carouselnext-themesLight and dark theme state.
npm install next-themesqr-code-stylingStyled QR codes.
npm install qr-code-styling@calcom/embed-reactCal.com embed.
npm install @calcom/embed-reactplanet-avatarGenerated avatars.
npm install planet-avatarIcons
Icon sets. Install the set named on the item you are adding.
lucide-reactIcons.
npm install lucide-react@tabler/icons-reactIcons.
npm install @tabler/icons-react@phosphor-icons/reactIcons.
npm install @phosphor-icons/reactreact-iconsIcons.
npm install react-iconsClassnames
Class name helpers. A shadcn project already includes clsx and tailwind-merge in lib/utils.
clsxBuilds class name strings.
npm install clsxtailwind-mergeMerges Tailwind classes.
npm install tailwind-mergeclass-variance-authorityVariant class names.
npm install class-variance-authority