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