> ## 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

UI components are a way of describing some UI when creating threads or [events](https://plain.support.site/article/events) or building [customer cards](https://plain.support.site/article/customer-cards).

For example - this is a button that links to Stripe.

```json theme={null}
{
  "componentLinkButton": {
    "linkButtonUrl": "http://stripe.com/",
    "linkButtonLabel": "View in Stripe"
  }
}
```

and it looks like this:

<Frame>
  <img src="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-link-button-stripe.png?fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=5a0db8257af49456ee808657eb879aa1" alt="Example button linking to stripe" width="1664" height="300" data-path="public/images/ui-component-link-button-stripe.png" />
</Frame>

In the GraphQL API schema, we have two separate unions for Custom Timeline Entry Components and Customer Card
Components, but both unions share the same types therefore they can be treated as the same.

<Note>
  Using TypeScript? Check out our [UI Components SDK](/ui-components/sdk) for typed helper functions.
</Note>

To see UI components in action you can experiment with them in the [UI components playground](https://app.plain.com/developer/ui-components-playground/)