# How to declare a component as a Container Component

**URL:** <https://forum.inductiveautomation.com/t/how-to-declare-a-component-as-a-container-component/115574>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [May 18, 2026, 10:19am UTC](https://forum.inductiveautomation.com/t/how-to-declare-a-component-as-a-container-component/115574 "2026-05-18T10:19:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajaykmaurya15](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@ajaykmaurya15](https://forum.inductiveautomation.com/u/ajaykmaurya15)\
**Post date:** [May 18, 2026, 10:19am UTC](https://forum.inductiveautomation.com/t/how-to-declare-a-component-as-a-container-component/115574/1 "2026-05-18T10:19:40Z")

</div>

import \* as React from 'react';

import {

Component, ComponentMeta, ComponentProps, PComponent, PropertyTree, SizeObject,

} from 'inductiveautomation/perspective-client';

import { Card } from 'example/react-modules';

export const COMPONENT\_TYPE = 'example.custom.Card';

export interface CardProps {

title?: React.ReactNode;

size?: 'default' | 'small';

extra?: React.ReactNode;

hoverable?: boolean;

style?: React.CSSProperties;

variant?: 'vertical' | 'horizontal';

image?: React.ReactNode;

subtitle?: React.ReactNode;

metaEnabled?: boolean;

metaAvatar?: React.ReactNode;

metaTitle?: React.ReactNode;

metaDescription?: React.ReactNode;

metaStyle?: React.CSSProperties;

children?: React.ReactNode;

}

export class CardComponent extends Component\<ComponentProps, any\> {

render() {

const {

props: {

title, size, extra, hoverable, style, variant, image, subtitle,

metaEnabled, metaAvatar, metaTitle, metaDescription, metaStyle

},

emit, children

} = this.props;

return (

\<Card

title={title}

size={size}

extra={extra}

hoverable={hoverable}

style={style}

styles={{ body: { display: 'flex', flexDirection: 'column', flexGrow: 1, padding: '12px' } }}

variant={variant}

image={image}

subtitle={subtitle}

\>

{metaEnabled && (

\<AntCard.Meta

avatar={metaAvatar}

title={metaTitle}

description={metaDescription}

style={metaStyle}

/\>

)}

{/\* The native drop zone for Flex Containers and Embedded Views \*/}

\<div

className="card-content-fallback"

style={{

minHeight: '100px',

width: '100%',

position: 'relative',

flexGrow: 1,

zIndex: 10,

pointerEvents: 'auto'

}}

\>

{children}

);

}

}

export class CardMeta implements ComponentMeta {

getComponentType(): string { return COMPONENT\_TYPE; }

getViewComponent(): PComponent { return CardComponent; }

getDefaultSize(): SizeObject { return { width: 350, height: 300 }; }

isContainer = true; // Marks it as a Client Container

getPropsReducer(tree: PropertyTree): CardProps {

return {

title: tree.read('title', undefined),

size: tree.readString('size', 'default') as any,

extra: tree.read('extra', undefined),

hoverable: tree.readBoolean('hoverable', false),

style: tree.readObject('style', {}),

variant: tree.readString('variant', 'vertical') as any,

image: tree.read('image', undefined),

subtitle: tree.read('subtitle', undefined),

metaEnabled: tree.readBoolean('metaEnabled', false),

metaAvatar: tree.read('metaAvatar', undefined),

metaTitle: tree.read('metaTitle', undefined),

metaDescription: tree.read('metaDescription', undefined),

metaStyle: tree.readObject('metaStyle', {})

};

}

} this is react tsx code but it's not working.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [May 18, 2026, 12:41pm UTC](https://forum.inductiveautomation.com/t/how-to-declare-a-component-as-a-container-component/115574/2 "2026-05-18T12:41:45Z")

</div>

What’s not working?  
Or, if you format your code I’ll glance through it.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [May 18, 2026, 3:25pm UTC](https://forum.inductiveautomation.com/t/how-to-declare-a-component-as-a-container-component/115574/3 "2026-05-18T15:25:13Z")

</div>

Please see [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).