
Little boxes of ready-made code you can plug straight into your app. Here’s what they are, how to use them, and a whole library to explore.
Think of an npm package as a little box of ready-made code. Someone else already built it, tested it, and shared it — so instead of writing a feature from scratch, you just add the package and use it instantly. Animations, charts, date formatting, dark mode toggles — there’s a package for almost everything.
npm is the public registry where all these packages live — hundreds of thousands of them, free to use, made by developers all over the world. Base44 lets you tap into that whole library, so you can add powerful features to your app in minutes instead of building them yourself.

Add advanced features without building from scratch.
Written and maintained by expert developers.
Animations, charts, utilities, UI, and more.
The npm registry is open and public.
In most tools, adding a package means command lines and config files. In Base44, you just chat with the AI. Here’s the whole flow.
Browse npmjs.com and pick the package you want. Each one has a README with instructions and examples.
In your app editor, just tell the Base44 AI chat which package you want to add. No install commands needed.
Base44 shows you the install request in the chat panel. You review it and approve it.
Publish your app so the change takes effect. Then the package is ready to use.

Packages are great, but there are a handful of quirks that catch people out. Learn these now and save yourself a headache.
Once it's added, it stays. An unused one won't hurt your app, but you can't remove it - so choose carefully before you add.

Changes don't take effect until you publish your app. Add the package, then hit publish.
Installing npm packages may require a paid Base44 plan, depending on your setup.
Occasionally Base44's AI adds a package but gets an import slightly wrong. If something breaks, check and fix the import manually.
Every package is made by someone else. Base44 can't guarantee their quality or security - so test anything you add.
None of this is scary — it’s just worth knowing before you start clicking install.
Since you can't easily remove a package once it's in, it's worth a two-minute check before you add one. Here's what to look at.

Check how many weekly downloads it has on npm. Big, steady numbers usually mean it's reliable and well-trusted.
A clear README with examples makes setup and troubleshooting far easier. Vague docs are a red flag.
Make sure the license fits your project, especially if it's commercial. Most popular packages use permissive licenses like MIT.
Lightweight, focused packages keep your app fast. Ones that drag in loads of extra dependencies can cause bloat and conflicts.

A handpicked set of genuinely useful npm packages. Each one includes what it does, when to reach for it, a link to npm, and a ready-made prompt you can paste straight into Base44.
The go-to library for animations in React. Use it when you want smooth page transitions, elements that animate in as you scroll, or satisfying hover and tap effects - all with simple, readable code.
View on npmFires celebratory confetti bursts on screen. Reach for it when you want a delightful moment - a signup success, a completed goal, or a fun little reward for the user.
View on npmAdds smooth motion to your UI with a single line. Use it when you want lists, cards, or layout changes to animate automatically without writing any animation code.
View on npmA large, clean, consistent icon set for React. Use it whenever you need crisp icons for buttons, menus, and cards that all share the same style.
View on npmBeautiful pop-up notifications (toasts) with almost no setup. Use it to confirm actions like 'Saved!', 'Copied!', or 'Something went wrong' without building your own notification system.
View on npmA modern, opinionated toast component with a lovely default look. A great alternative to react-hot-toast when you want polished notifications out of the box.
View on npmAccessible, unstyled UI building blocks you can style yourself. Use them when you need reliable dropdowns, dialogs, and menus that behave correctly for every user.
View on npmA lightweight, smooth carousel/slider. Use it for image galleries, testimonial sliders, or any swipeable row of content.
View on npmComposable, good-looking charts for React. Use it when you need bar, line, or pie charts on a dashboard without a steep learning curve.
View on npmA flexible charting library covering many chart types. Reach for it when you want a wide variety of chart styles and lots of customization.
View on npmA modern toolkit of date functions. Use it whenever you need to format dates ('3 days ago', 'MMM d, yyyy'), compare them, or do date math reliably.
View on npmA tiny, fast date library with a familiar API. A lightweight choice when you just need simple date formatting and don't want the extra weight.
View on npmFast, simple form handling with built-in validation. Use it for signup forms, settings pages, or any form where you want clean code and good performance.
View on npmChecks that data is exactly the shape you expect, with type safety. Use it to validate form inputs or API responses before you trust them - often paired with react-hook-form.
View on npmA schema validation library for forms and data. A solid alternative to zod, commonly used with Formik for form validation.
View on npmA big toolbox of helper functions for arrays, objects, and more. Use it when you need reliable utilities like grouping, sorting, or deep-cloning data without reinventing them.
View on npmCleanly combines CSS class names based on conditions. Use it whenever you're toggling classes - like an active tab, a disabled button, or a dark-mode style.
View on npmGenerates unique IDs. Use it when you need a guaranteed-unique identifier for new items, records, or list keys.
View on npmA tiny, fast unique ID generator. A lightweight alternative to uuid when you want short, URL-friendly IDs.
View on npmSmall, simple state management for React. Use it when useState isn't enough and you need to share state across many components without heavy setup.
View on npmA popular tool for making HTTP requests. Use it to fetch data from APIs with clean syntax and easy error handling.
View on npmHandles data fetching with smart caching and revalidation. Use it when you want your data to stay fresh automatically and load instantly from cache.
View on npmPlays video and audio from YouTube, Vimeo, files, and more. Use it when you need a media player that just works across many sources.
View on npmAdds drag-and-drop file uploads. Use it for upload areas where users can drag files in or click to browse.
View on npm
Fun fact: this guide is built with npm packages too — the toasts, the confetti, and these icons all come from ones on this page.Describe what you’re trying to build, and the AI will suggest npm packages that could help — with a one-line reason for each.
