An example Framer X code component.

ComponentBoilerplate.tsx

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

type Props = Partial<FrameProps> &
    Partial<{
        // optional props
        color: string,
        text: string,
    }> & {
        // required props
    }

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

    return (
        <Frame
            // First, declare any custom props that may be overrided
            
            // Next, spread in all the container props
            {...rest}
            // Finally, declare any forced props
            style={{
                color: color,
                // If you're using style, spread in props.style too
                ...style,
            }}
        >
            {text}
        </Frame>
    )
}

UserCard.defaultProps = {
    height: 375, // set default props to control starting size on canvas
    width: 240,
    text: "My Component", // and set defaults for any required props
}

addPropertyControls(UserCard, {
    text: {
        title: "Text",
        type: ControlType.String,
        defaultValue: "My Component",
    },
    color: {
        title: "Color",
        type: ControlType.Color,
        defaultValue: "#fff",
    },
})