Nova waving hello

npm packages in Base44, made simple.

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.

Scroll to explore
The basics

Someone already wrote the code. You just plug it in.

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.

Why build it yourself when someone already did?
Nova, thinking and explaining
Ready in minutes

Add advanced features without building from scratch.

Well-tested code

Written and maintained by expert developers.

Hundreds of options

Animations, charts, utilities, UI, and more.

Free to use

The npm registry is open and public.

How to add one

Just ask. No terminal required.

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.

1
Find a package

Browse npmjs.com and pick the package you want. Each one has a README with instructions and examples.

2
Ask the AI

In your app editor, just tell the Base44 AI chat which package you want to add. No install commands needed.

3
Review & approve

Base44 shows you the install request in the chat panel. You review it and approve it.

4
Publish

Publish your app so the change takes effect. Then the package is ready to use.

Nova, working
There’s also an npm Playground built into Base44 — use it to preview a package in action before you plug it into your app.
Good to know

A few things worth knowing first.

Packages are great, but there are a handful of quirks that catch people out. Learn these now and save yourself a headache.

You can't uninstall a package

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.

Nova, thinking cautiously
You have to publish

Changes don't take effect until you publish your app. Add the package, then hit publish.

It might need a paid plan

Installing npm packages may require a paid Base44 plan, depending on your setup.

The AI sometimes fumbles imports

Occasionally Base44's AI adds a package but gets an import slightly wrong. If something breaks, check and fix the import manually.

Packages are third-party

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.

Choosing well

Not all packages are equal.

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.

Nova, pointing helpfully
Download numbers

Check how many weekly downloads it has on npm. Big, steady numbers usually mean it's reliable and well-trusted.

Good documentation

A clear README with examples makes setup and troubleshooting far easier. Vague docs are a red flag.

The right license

Make sure the license fits your project, especially if it's commercial. Most popular packages use permissive licenses like MIT.

Size & dependencies

Lightweight, focused packages keep your app fast. Ones that drag in loads of extra dependencies can cause bloat and conflicts.

Rule of thumb: popular, well-documented, and lightweight wins. When in doubt, pick the package more people already trust.
Nova
Common packages

Great packages, ready to add.

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.

Motion & Interaction
framer-motionAnimation

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 npm
Please add the framer-motion npm package and use it to add smooth animations and page transitions to my app.
canvas-confettiAnimation

Fires 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 npm
Please install the canvas-confetti npm package and use it to fire a celebratory confetti burst when a user completes a goal.
auto-animateAnimation

Adds 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 npm
Please add the auto-animate npm package and use it to automatically animate my lists and cards when they change.
Icons & UI
lucide-reactIcons

A 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 npm
Please install the lucide-react npm package so I can use its icons throughout my app.
react-hot-toastUI

Beautiful 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 npm
Please install the react-hot-toast npm package and set it up so I can show toast notifications when actions succeed or fail.
sonnerUI

A 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 npm
Please install the sonner npm package and use it to show polished toast notifications in my app.
shadcn/ui (via radix-ui)UI

Accessible, 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 npm
Please add the radix-ui npm package and use it to build accessible dropdowns and dialogs in my app.
embla-carousel-reactUI

A lightweight, smooth carousel/slider. Use it for image galleries, testimonial sliders, or any swipeable row of content.

View on npm
Please add the embla-carousel-react npm package and use it to create a swipeable image carousel on my page.
Charts & Data
rechartsCharts

Composable, 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 npm
Please add the recharts npm package and use it to create charts on my dashboard.
chart.jsCharts

A 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 npm
Please add the chart.js npm package and use it to render a variety of charts in my app.
date-fnsDates

A 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 npm
Please add the date-fns npm package and use it to format the dates in my app.
dayjsDates

A 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 npm
Please add the dayjs npm package and use it to format and manipulate dates in my app.
Forms & Validation
react-hook-formForms

Fast, 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 npm
Please add the react-hook-form npm package and use it to handle form submission and validation in my app.
zodValidation

Checks 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 npm
Please add the zod npm package and use it to validate my form inputs.
yupValidation

A schema validation library for forms and data. A solid alternative to zod, commonly used with Formik for form validation.

View on npm
Please add the yup npm package and use it to validate my form data.
Utilities
lodashUtility

A 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 npm
Please add the lodash npm package and use it for utility helpers like grouping and sorting in my app.
clsxUtility

Cleanly 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 npm
Please add the clsx npm package and use it to conditionally combine CSS classes in my components.
uuidUtility

Generates unique IDs. Use it when you need a guaranteed-unique identifier for new items, records, or list keys.

View on npm
Please add the uuid npm package and use it to generate unique IDs for new items in my app.
nanoidUtility

A tiny, fast unique ID generator. A lightweight alternative to uuid when you want short, URL-friendly IDs.

View on npm
Please add the nanoid npm package and use it to generate short unique IDs for my app.
Data & State
zustandState

Small, 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 npm
Please add the zustand npm package and use it for lightweight state management across my app.
axiosHTTP

A popular tool for making HTTP requests. Use it to fetch data from APIs with clean syntax and easy error handling.

View on npm
Please add the axios npm package and use it to fetch data from APIs in my app.
swrData

Handles 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 npm
Please add the swr npm package and use it to fetch and cache data from my API.
Media & Files
react-playerMedia

Plays 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 npm
Please add the react-player npm package and use it to play video and audio in my app.
react-dropzoneMedia

Adds drag-and-drop file uploads. Use it for upload areas where users can drag files in or click to browse.

View on npm
Please add the react-dropzone npm package and use it to add drag-and-drop file uploads to my app.
Nova, celebratingFun fact: this guide is built with npm packages too — the toasts, the confetti, and these icons all come from ones on this page.
Ask AI

Not sure what you need? Just ask.

Describe what you’re trying to build, and the AI will suggest npm packages that could help — with a one-line reason for each.

FAQ

Questions people actually ask.

Nova, ready to answer