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

# UI Components SDK

> Helper functions for building Plain UI components with full type safety.

The `@team-plain/ui-components` package provides typed helper functions for building `ComponentInput` objects. Instead of constructing JSON by hand, you get a concise, type-safe API.

## Installation

```bash theme={null}
npm install @team-plain/ui-components @team-plain/graphql
```

Requires `@team-plain/graphql` as a peer dependency.

## Usage

```ts theme={null}
import { uiComponent } from "@team-plain/ui-components";
```

## Available components

| Builder                                             | Description                             |
| --------------------------------------------------- | --------------------------------------- |
| `uiComponent.text({ text, size?, color? })`         | Rich text with optional size and color  |
| `uiComponent.plainText({ text })`                   | Plain unformatted text                  |
| `uiComponent.badge({ label, color? })`              | Colored badge                           |
| `uiComponent.divider()`                             | Horizontal divider                      |
| `uiComponent.spacer({ size })`                      | Vertical spacing                        |
| `uiComponent.linkButton({ label, url })`            | Button that opens a URL                 |
| `uiComponent.copyButton({ value, tooltip? })`       | Button that copies a value to clipboard |
| `uiComponent.workflowButton({ label, workflowId })` | Button that triggers a workflow         |
| `uiComponent.container({ content })`                | Groups components together              |
| `uiComponent.row({ mainContent, asideContent })`    | Two-column layout                       |

For details on each component's properties and how they render, see the [UI components reference](/ui-components).

## Example

```ts theme={null}
import { uiComponent } from "@team-plain/ui-components";

const components = [
  uiComponent.row({
    mainContent: [uiComponent.text({ text: "Customer Plan", size: "L" })],
    asideContent: [uiComponent.badge({ label: "Pro", color: "GREEN" })],
  }),
  uiComponent.divider(),
  uiComponent.text({ text: "Signed up 3 days ago", color: "MUTED" }),
  uiComponent.spacer({ size: "M" }),
  uiComponent.container({
    content: [
      uiComponent.linkButton({
        label: "View in Stripe",
        url: "https://dashboard.stripe.com/...",
      }),
      uiComponent.copyButton({
        value: "cus_abc123",
        tooltip: "Copy Stripe ID",
      }),
    ],
  }),
];
```

## Resources

* [UI components reference](/ui-components) — component properties and visual examples
* [UI components playground](https://app.plain.com/developer/ui-components-playground/) — build and preview components interactively
* [GitHub repository](https://github.com/team-plain/sdk/tree/main/packages/ui-components)