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

# Components

> Query UI components

## List Components

Fetch a paginated list of components with optional search.

```graphql theme={null}
query GetComponents($search: String, $cursor: String, $limit: Int) {
  components(search: $search, cursor: $cursor, limit: $limit) {
    data {
      id
      name
      title
      description
      compiled
      schema
    }
    pagination {
      cursor
      hasMore
      limit
    }
  }
}
```

### Parameters

| Parameter | Type | Default | Description |
| - | - | - | - |
| `search` | String | - | Filter by name or title |
| `cursor` | String | null | Cursor for pagination |
| `limit` | Int | 20 | Items per page |

### Example

```graphql theme={null}
query {
  components(search: "Product", limit: 10) {
    data {
      id
      name
      title
      description
    }
    pagination {
      cursor
      hasMore
    }
  }
}
```

Response:

```json theme={null}
{
  "data": {
    "components": {
      "data": [
        {
          "id": "comp123",
          "name": "ProductCard",
          "title": "Product Card",
          "description": "Displays product information"
        },
        {
          "id": "comp124",
          "name": "ProductDetail",
          "title": "Product Detail",
          "description": "Full product detail view"
        }
      ],
      "pagination": {
        "cursor": "eyJsYXN0SWQiOiJjb21wMTI0IiwibGFzdFVwZGF0ZWRBdCI6IjIwMjQtMDEtMTVUMTA6MDA6MDBaIn0=",
        "hasMore": false
      }
    }
  }
}
```

## Get Single Component

Fetch a specific component by ID.

```graphql theme={null}
query GetComponent($id: ID!) {
  component(id: $id) {
    id
    name
    title
    description
    content
    compiled
    schema
    createdAt
    updatedAt
  }
}
```

### Parameters

| Parameter | Type | Required | Description |
| - | - | - | - |
| `id` | ID! | Yes | Component ID |

### Example

```graphql theme={null}
query {
  component(id: "comp123") {
    id
    name
    title
    compiled
    schema
  }
}
```

Response:

```json theme={null}
{
  "data": {
    "component": {
      "id": "comp123",
      "name": "ProductCard",
      "title": "Product Card",
      "compiled": "const body = (props) => { ... }",
      "schema": "{\"type\":\"object\",\"properties\":{...}}"
    }
  }
}
```

## Component Fields

| Field | Type | Description |
| - | - | - |
| `id` | ID! | Unique identifier |
| `name` | String! | Component name (used in code) |
| `title` | String! | Display title |
| `description` | String! | Component description |
| `content` | String! | Source code |
| `compiled` | String! | Compiled JavaScript |
| `schema` | String! | JSON Schema for props |
| `status` | String! | Component status |
| `createdAt` | DateTime! | Creation timestamp |
| `updatedAt` | DateTime! | Last update timestamp |


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