An example Framer X code component.

Example.tsx

import * as React from "react"
import {
    Frame,
    FrameProps,
    addPropertyControls,
    ControlType,
} from "framer"

type Props = Partial<FrameProps> &
    Partial<{
        // optional props
        photo: string
    }> & {
        // required props
        userName: string
    }

export const UserCard = (props: Props) => {
    // Destructure out all the custom props
    const { userName, photo, style, ...rest } = props

    return (
        <Frame
              // First, declare any custom props that may be overrided
            borderRadius={"100%"}
            // Next, spread in all the container props
            {...rest}
            // Finally, declare any forced props
            backgroundColor={"#0099ff"}
            image={photo}
            style={{
                fontSize: 32,
                fontWeight: 600,
                color: "#FFF",
                // If you're using style, spread in props.style too
                ...style,
            }}
        >
            {userName}
        </Frame>
    )
}

UserCard.defaultProps = {
    height: 240, // set default props to control starting size on canvas
    width: 240,
    userName: "Ivan Bunin", // and set defaults for any required props
}

addPropertyControls(UserCard, {
    userName: {
        title: "User Name",
        type: ControlType.String,
        defaultValue: "Ivan Garcia-Kamp",
    },
    photo: {
        title: "Photo",
        type: ControlType.Image,
    },
})