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

# Available Packages

> Pre-approved npm packages and built-in libraries available in every Vybe app

Every Vybe app comes with a curated set of libraries pre-installed. In addition, a selection of pre-approved packages can be installed by the AI on request. This page covers everything that is available.

***

## Pre-installed packages

These packages are included in every Vybe app automatically. You do not need to install them — they are ready to use.

| Package          | Version | Description                                                        |
| ---------------- | ------- | ------------------------------------------------------------------ |
| **Next.js**      | 15      | React framework with App Router, server components, and API routes |
| **React**        | 19      | UI library for building component-based interfaces                 |
| **TypeScript**   | 5.5     | Type-safe JavaScript with full IDE support                         |
| **Tailwind CSS** | 4       | Utility-first CSS framework for rapid styling                      |
| **Shadcn UI**    | Latest  | Component library with 50+ accessible, production-grade components |
| **Recharts**     | Latest  | Charting library for bar, line, area, and pie charts               |
| **Lucide React** | Latest  | Icon library with thousands of SVG icons                           |
| **Sonner**       | Latest  | Toast notification library for success, error, and info messages   |
| **Prisma**       | Latest  | Database ORM for the built-in PostgreSQL database                  |

These form the core of every Vybe app. The AI uses them automatically when building your interfaces, charts, database queries, and notifications.

***

## Additional pre-approved packages

These packages can be installed by the AI when you need them. Ask the AI to add them to your project, or describe a feature that requires them and the AI will install the package as part of building it.

<CardGroup cols={2}>
  <Card title="Tiptap" href="https://tiptap.dev">
    Rich text editor framework. Build full-featured text editors with formatting toolbars, mentions, links, images, and collaborative editing capabilities.

    **Use it for:** Content management, note-taking, document editing, rich form fields.

    > Add a rich text editor for writing blog posts with bold, italic, headings, links, and bullet lists.
  </Card>

  <Card title="React Flow" href="https://reactflow.dev">
    Library for building interactive node-based diagrams, flowcharts, org charts, and graph visualizations with drag-and-drop support.

    **Use it for:** Workflow builders, org charts, process diagrams, pipeline visualizations.

    > Create a workflow builder where users can add steps, connect them with arrows, and configure each step.
  </Card>
</CardGroup>

***

## What comes with Shadcn UI

Shadcn UI deserves special mention because it provides the majority of UI components used in Vybe apps. Here is what is included:

**Layout:** Card, Separator, Sheet, Dialog, Drawer, Tabs, Accordion, Collapsible, ScrollArea, AspectRatio, Resizable

**Forms:** Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider, DatePicker, ComboBox, Form, Label

**Data Display:** Table, DataTable, Badge, Avatar, Progress, Calendar, HoverCard

**Feedback:** Alert, AlertDialog, Toast (via Sonner), Skeleton

**Navigation:** Breadcrumb, NavigationMenu, Sidebar, Menubar, Pagination, Command

**Overlays:** Dialog, Popover, Tooltip, DropdownMenu, ContextMenu

You do not need to install or import these separately. The AI uses them automatically based on your prompts. For the full component catalog, visit [ui.shadcn.com](https://ui.shadcn.com).

***

## Can I use other packages?

The package list is curated for security, compatibility, and stability. There are a few things to keep in mind:

**Why packages are restricted:**

* Every package is tested for compatibility with the Vybe runtime and Next.js 15
* Security review prevents supply chain risks
* Consistent dependencies across apps make debugging easier

**If you need a package that is not listed:**

* Contact the Vybe team at [team@vybe.build](mailto:team@vybe.build) to request it
* Include the package name, what you need it for, and a link to the npm page
* The team reviews requests and adds approved packages to the list

**In the meantime:**

* The AI can often implement similar functionality using existing packages
* For example, instead of a specialized date library, the AI can use native JavaScript `Date` with Shadcn's DatePicker
* For custom visualizations beyond Recharts, the AI can build SVG-based components with Tailwind

<Tip>
  Before requesting a new package, describe what you are trying to build to the AI. It may already have a way to accomplish it with the existing tools.
</Tip>

***

## What's next

* Learn what UI components are available: [Building Effective UIs](/tips/building-uis)
* Understand platform constraints: [Platform Limitations](/tips/platform-limitations)
* Review the full tech stack: [Tech Stack Reference](/reference/tech-stack)