> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Use npm packages

> Add charts, drag-and-drop, animations, and other features by asking Vibely to install npm packages into your project.

Every Vibely project can use npm packages: ready-made JavaScript libraries for features like drag-and-drop, charts, animations, and rich text editing. You don't install anything yourself. Name a package in the project chat, or just describe the feature you want, and Vibely installs the package and wires it into your app.

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/build-npm-packages.webp" alt="Use npm packages" width="1200" height="675" />
</Frame>

<Info>
  **What is npm?**

  npm is the public registry where JavaScript developers share reusable code. You can browse it at [npmjs.com](https://www.npmjs.com/).
</Info>

## Ask for a package in the chat

Say you want to rearrange tasks on a Kanban board. You could ask Vibely to build drag-and-drop from scratch, but a dedicated package gets you robust behavior faster:

```text wrap theme={"system"}
Use the @hello-pangea/dnd package to add drag-and-drop to my Kanban board. Let users add cards, move them between columns, and reorder them.
```

Vibely installs the package and uses it in the same change, so your preview updates with the working feature.

You can also describe the outcome without naming a package, for example "add drag-and-drop to my board". For well-understood problems, the agent picks an established library over hand-written code.

## What's already included

New projects start with a set of packages already installed, so you don't need to ask for the basics:

* **Web projects** include a UI component library (shadcn/ui) in `src/components/ui`.
* **Mobile projects** include a component kit in `src/components/kit`, icons from `lucide-react-native`, animation with `react-native-reanimated`, and navigation with `expo-router`.

## How installs work

* **Web projects** install with Bun. The exact version of every package is recorded in `bun.lock`.
* **Mobile projects** install with `npx expo install`, which picks the version of a native module that matches your Expo SDK.

Leave the lock file in place. If you run the project outside Vibely, install dependencies with the same tool so your versions stay in sync. See [External hosting](/features/deploy/external-hosting).

### Packages that don't work on mobile

Some popular packages are built for the web and don't work in a React Native app. On mobile projects, Vibely refuses these and uses the built-in replacement instead:

| Package | Use instead |
| - | - |
| `nativewind`, `tailwindcss`, `clsx`, `tailwind-merge` | `StyleSheet` styles with the theme tokens |
| `lucide-react`, `@expo/vector-icons`, `react-native-vector-icons` | `lucide-react-native` (included) |
| `framer-motion` | `react-native-reanimated` (included) |
| `react-router`, `react-router-dom`, `@react-navigation/*` | `expo-router` (included) |
| `date-fns`, `dayjs`, `luxon`, `moment` | The built-in date formatting helpers |
| `next`, `@radix-ui/*`, `@headlessui/*` | The mobile component kit |

## Choose packages carefully

Vibely installs any public npm package you ask for, but it can't vouch for the quality, security, or reliability of third-party code. Test features built on a package before you rely on them.

Before adding a package, check:

* **Downloads.** A high weekly download count on the package's npm page means it's widely used.
* **Maintenance.** Recent releases and an active repository are good signs. A package that hasn't been updated in years is more likely to break with current tooling.
* **Community feedback.** Read the package's open issues for reports of problems.

Your web app runs in the browser, with Supabase Edge Functions as its only server-side code. Packages built for other environments, such as Node.js servers or Electron desktop apps, may install but won't work in your published app.

<Tip>
  The [Security view](/features/security/project-view) audits your packages for known vulnerabilities as part of a Deep scan, and **Auto-fix deps** can upgrade vulnerable packages to fixed versions.
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to install packages myself?">
    No. Ask for the package or the feature in the chat and Vibely adds it to your project's dependencies. There's no terminal step or manual `package.json` editing.
  </Accordion>

  <Accordion title="How do I update or remove a package?">
    Ask in the chat. Prompts like "remove the moment package" or "update recharts to the latest version" work the same way as installing.
  </Accordion>

  <Accordion title="Can I use private packages?">
    Yes, on the Enterprise plan. Add your registry token as a [build secret](/features/build/build-secrets) and point your package scope at your registry, or publish internal packages to your workspace's [managed registry](/features/build/managed-registry).
  </Accordion>

  <Accordion title="What is the bun.lock file in my project?">
    It belongs to Bun, the tool web projects use to install packages. It records the exact version of every package so your app builds the same way everywhere, including when you sync to [GitHub](/integrations/github). Leave it in place.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Build secrets" icon="key" href="/features/build/build-secrets">
    Tokens for installing private packages.
  </Card>

  <Card title="Managed registry" icon="box" href="/features/build/managed-registry">
    Publish private packages inside your workspace.
  </Card>

  <Card title="Code editor" icon="code" href="/features/projects/code-editor">
    See `package.json` and the rest of your code.
  </Card>

  <Card title="Security view" icon="shield-check" href="/features/security/project-view">
    Find packages with known vulnerabilities.
  </Card>
</CardGroup>


## Related topics

- [Build secrets](/features/build/build-secrets.md)
- [Managed registry](/features/build/managed-registry.md)
- [Vibely for Enterprise](/introduction/enterprise.md)
- [Workspace security center](/features/workspace/security-center.md)
- [Mobile app templates](/features/mobile-apps/templates.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.