Entity

Display a collection of related information of a resource entity.

Fields

Code Editor
<Entity placeholder={!isMounted}>
<EntityField title="GitHub" description="Kevin Wang" />
<EntityField active={false} title="Inactive" description="This field is inactive" />
<EntityField width="20%" title="Fixed Width" description={<Link color tab href="/docs">Open docs</Link>} />
<EntityField label width={100} title="Label" description={<i>Encrypted</i>} />
<EntityField right description="Right Aligned" avatar={<Avatar size={24} src="https://thekevinwang.com/image/kevin.webp" />} />
</Entity>

Thumbnail

Code Editor
<>
<Entity
placeholder={!isMounted}
thumbnail={
<EntityThumbnail size={24}>
<GitHub width={24} height={24} />
</EntityThumbnail>
}
>
<EntityField title="GitHub" description={<>Derpy Derp (<Link color tab href="https://github.com/thiskevinwang">@thiskevinwang</Link>)</>} />
<EntityField right description="Connected 1h ago" />
</Entity>
<Spacer/>
<Entity
placeholder={!isMounted}
thumbnail={
<EntityThumbnail wrap size={36}>
<Avatar size={36} src="https://thekevinwang.com/image/kevin.webp" />
</EntityThumbnail>
}
>
<EntityField title="Derpy Derp" description="Thumbnail size and wrap options"/>
<EntityField right description="Connected 1h ago"/>
</Entity>
</>

Menu

Code Editor
<Entity
placeholder={!isMounted}
thumbnail={
<EntityThumbnail size={24}>
<GitHub width={24} height={24} />
</EntityThumbnail>
}
menuItems={<>
<MenuItem onClick={() => alert('clicked')}>
Inspect
</MenuItem>
<MenuItem style={{ color: 'var(--geist-error)' }} onClick={() => alert('clicked')}>
Remove
</MenuItem>
</>}
>
<EntityField title="PUBLIC_KEY" description="Production"/>
<EntityField label title="VALUE" description="6863EFA205B4680BE7928E"/>
<EntityField right width={200} description="Added 1h ago" avatar={<Avatar size={24} src="https://thekevinwang.com/image/kevin.webp" />}/>
</Entity>

Footer

Code Editor
<>TODO:
<Link href="https://vercel.com/design/entity#footer">
<a rel="noopener" target="_blank">https://vercel.com/design/entity#footer</a>
</Link>
</>

Actions

Code Editor
<Entity
placeholder={!isMounted}
thumbnail={
<EntityThumbnail wrap size={32}>
<Avatar size={32} src="https://thekevinwang.com/image/kevin.webp" />
</EntityThumbnail>
}
menuItems={<>
<MenuItem onClick={() => alert('clicked')}>
Inspect
</MenuItem>
<MenuItem style={{ color: 'var(--geist-error)' }} onClick={() => alert('clicked')}>
Remove
</MenuItem>
</>}
footer={<Container row vcenter>
<GitHub size={14} /><Spacer x={.4}/>thiskevinwang
<Spacer x={.8}/>
<Facebook size={14} /><Spacer x={.4}/>thekevinwang
<Spacer x={.8}/>
<Google size={14} /><Spacer x={.4}/>thekevinwang
</Container>}
actions={<Container row gap={.5}>
<Container>
<Button size={"small"} type="secondary">Decline</Button>
</Container>
<Container>
<Button size={"small"} type="success">Accept</Button>
</Container>
</Container>}
>
<EntityField title="Kevin Wang" description="derp"/>
</Entity>

Checkbox

Code Editor
<Entity
placeholder={!isMounted}
checkbox={<Checkbox onChange={() => alert('clicked')}/>}
actions={<Button size={"small"} type="secondary">Revoke</Button>}
>
<EntityField title="Derpy CLI on localhost" description="Last used just now"/>
</Entity>

Mixed

Code Editor
<>TODO:
<Link href="https://vercel.com/design/entity#mixed">
<a rel="noopener" target="_blank">https://vercel.com/design/entity#mixed</a>
</Link>
</>

Skeleton

Code Editor
<>
<Entity
placeholder
thumbnail={
<EntityThumbnail wrap size={32}>
<Avatar size={32} src="https://thekevinwang.com/image/kevin.webp" />
</EntityThumbnail>
}
checkbox={
<Checkbox
onChange={e => alert('clicked')}
checked
/>
}
menuItems={<>
<MenuItem>
Foo
</MenuItem>
</>}
actions={<>
<Button size={"small"} type="success">Accept</Button>
</>}
>
<EntityField width={160} title="GitHub" description="Kevin Wang" titleSkeletonWidth="50%" descriptionSkeletonWidth="80%" />
<EntityField label width="20%" title="VALUE" description="6863EFA205B4680BE7928E" descriptionSkeletonWidth="100%" />
<EntityField right description="Connected 1h ago"/>
</Entity>
<Entity
placeholder
thumbnail={
<EntityThumbnail wrap size={32}>
<Avatar size={32} src="https://thekevinwang.com/image/kevin.webp" />
</EntityThumbnail>
}
menuItems={<>
<MenuItem>
Foo
</MenuItem>
</>}
footer={<Container row vcenter>
<GitHub size={14} /><Spacer x={.4}/>thiskevinwang
<Spacer x={.8}/>
<Facebook size={14} /><Spacer x={.4}/>thekevinwang
<Spacer x={.8}/>
<Google size={14} /><Spacer x={.4}/>thekevinwang
</Container>}
actions={<Container row gap={.5}>
<Container>
<Button size={"small"} type="secondary">Decline</Button>
</Container>
<Container>
<Button size={"small"} type="success">Accept</Button>
</Container>
</Container>}
>
<EntityField width={120} title="GitHub" description="Kevin WAng"/>
<EntityField label title="VALUE" description="6863EFA205B4680BE7928E"/>
<EntityField right width="50%" description="Connected 1h ago"/>
</Entity>
</>

Disabled

Code Editor
<Entity placeholder={!isMounted} disabled>
<EntityField title="GitHub" description="Guillermo Rauch" />
<EntityField active={false} title="Inactive" description="This field is inactive" />
<EntityField width="20%" title="Fixed Width" description={<Link color tab href="/docs">Open docs</Link>} />
<EntityField label width={100} title="Label" description={<i>Encrypted</i>} />
<EntityField right description="Right Aligned" avatar={<Avatar size={24} username="rauchg" />} />
</Entity>

Form

Code Editor
<>Todo</>

Form with Entities

Code Editor
<>Todo</>

Form as Entity Footer

Code Editor
<>Todo</>