---
title: Using the Standard Library
description: Use the built-in OpenUI library from @openuidev/react-ui.
---

OpenUI ships with a prebuilt `openuiLibrary` for common layouts, forms, content, and charts.

## Install

```bash
npm install @openuidev/react-lang @openuidev/react-ui
```

## Render with OpenUI library

```tsx
import "@openuidev/react-ui/components.css";
import { Renderer } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";

<Renderer library={openuiLibrary} response={streamedText} isStreaming={isStreaming} />;
```

## Generate prompt

Use the CLI to generate the system prompt at build time:

```bash
npx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt
```

Or generate programmatically:

```ts
import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";

const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);
```

## Extend it

```ts
import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";
import { z } from "zod";

const ProductCard = defineComponent({
  name: "ProductCard",
  description: "Product tile",
  props: z.object({
    name: z.string(),
    price: z.number(),
  }),
  component: ({ props }) => <div>{props.name}: ${props.price}</div>,
});

const myLibrary = createLibrary({
  root: openuiLibrary.root ?? "Stack",
  componentGroups: openuiLibrary.componentGroups,
  components: [...Object.values(openuiLibrary.components), ProductCard],
});
```

## Notes

- Default root component is `Stack`.
- `Form` requires explicit `buttons`.
- Signature truth source is `openuiLibrary.prompt(openuiPromptOptions)`.
