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

# Component

> Published UI components with compiled code

The `Component` type represents a published UI component ready for execution in native apps.

## Type Definition

```graphql theme={null}
type Component {
  id: ID!
  name: String!
  title: String!
  description: String!
  content: String!
  compiled: String!
  schema: String!
  status: String!
  createdAt: DateTime!
  updatedAt: DateTime!
}
```

## Fields

| Field         | Type      | Description                                    |
| ------------- | --------- | ---------------------------------------------- |
| `id`          | ID!       | Unique identifier                              |
| `name`        | String!   | Component name (used in code references)       |
| `title`       | String!   | Human-readable display title                   |
| `description` | String!   | Component description                          |
| `content`     | String!   | TypeScript source code                         |
| `compiled`    | String!   | JavaScript compiled code (ready for execution) |
| `schema`      | String!   | JSON Schema defining component props           |
| `status`      | String!   | Component status (e.g., "draft", "published")  |
| `createdAt`   | DateTime! | Creation timestamp                             |
| `updatedAt`   | DateTime! | Last update timestamp                          |

## Field Details

### name

The component name is used when referencing the component in code. It follows PascalCase naming convention.

```javascript theme={null}
// In BindJS code, components are referenced by name
ProductCard({ title: "Widget", price: 9.99 })
```

### compiled

The compiled field contains JavaScript code that can be executed by the BindJS runtime. This is generated from the TypeScript source during the publish process.

```javascript theme={null}
// Example compiled output
const body = (props) => {
  return VStack([
    Text(props.title),
    Text(`$${props.price}`)
  ])
}
```

### schema

The schema field contains a JSON Schema that defines the component's props:

```json theme={null}
{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Product title"
    },
    "price": {
      "type": "number",
      "description": "Product price"
    },
    "imageUrl": {
      "type": "string",
      "format": "uri",
      "description": "Product image URL"
    }
  },
  "required": ["title", "price"]
}
```

## Example Query

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

Response:

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

## Related Types

* [Package](/graphql/types/package) - Components are bundled into packages
* [ComponentPreview](/graphql/types/subscription-types) - Preview versions of components