> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Using Objects as Props

**Note:** This section assumes you've already read and understood the section in the [previous document](/code-sources/advanced-prop-configurations) around how to add and edit the "Prop Spec".

## Overview

This guide will illustrate how to effectively use objects within your prop configurations to streamline your component interfaces and improve code organization.

#### Step 1: Adding the "object" prop

The first step in the process involves adding the "object" prop and then editing the "Prop Spec".

#### Step 2: Update the "properties" key

For this example, let's edit the prop spec so that we can define our objects:

This example shows a "registration form" object prop with five properties.

```json
{
  "title": "A registration form",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    },
    "bio": {
      "type": "string",
      "title": "Bio"
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    }
  }
}
```

![Screenshot 2024-07-26 at 10.41.37 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/57f3bd1e52f1b9c2fe562f39b581f3618d74c41f08b74e179160a45a47f3cb49/docs/assets/images/51efb371-screenshot-2024-07-26-at-104137-am-upjnurdplgpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211403Z&X-Amz-Expires=604800&X-Amz-Signature=93f77484869ca48c723100a141d7220b05fe172dcf9529a272074ba7dbb40af4&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

#### Step 3: Format JSON and Save the Prop Spec

After you've added your JSON, click the "Format JSON" button followed by the blue "Save" button.

#### Step 4: Save changes to the component props

Lastly, click the blue "Save Changes" button at the bottom of the right fly-out.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/f02c3bf4a7f5ed6ff977bbc232ba7d2eea30b2074ee0ad1e519dfeb9760a82e2/docs/assets/images/33d1aa14-screenshot-2024-07-24-at-45050-pm-mrriwla14wpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211403Z&X-Amz-Expires=604800&X-Amz-Signature=5e841d5221d5448b2f71a13c35f66071e04e5882d114d24615a5dfd02ba00457&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

## Conclusion

Pulling it all together we can now add objects as props 🎉

![Screenshot 2024-07-26 at 10.43.25 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/74b3d9a93231c353431e14f22344ada9a2a22917a1652c74d8e04a0bbad43497/docs/assets/images/bac9b4d1-screenshot-2024-07-26-at-104325-am-fhcanguvyvpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211403Z&X-Amz-Expires=604800&X-Amz-Signature=dfdb1f88a94111c5f0d892f00135323410abfee0cb3766ec3c9827d16f93c32d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)