Workspace Card

ProNew

A card for a workspace or team with a generated cover and logo tile, plan, member faces, project and storage stats and an actions menu.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/workspace-card

Prop	Type	Default	Description
`workspace`	`Workspace`	-	The workspace to show. Optional only while `loading`.
`href`	`string`	-	Makes the card clickable through its title link.
`onOpen`	`() => void`	-	Called when the title button is pressed, when there is no `href`.
`current`	`boolean`	`false`	Mark it as the current workspace.
`actions`	`{ label: string; onSelect: () => void; destructive?: boolean }[]`	`[]`	Items in the more menu. Empty hides the menu.
`loading`	`boolean`	`false`	Show a placeholder.

Also accepts all <article> props.

Prop	Type	Default	Description
`name`	`string`	-	Workspace name. Also seeds the cover and tile colors.
`description`	`string`	-	One line about the workspace.
`plan`	`string`	-	Plan label.
`members`	`{ name: string; image?: string }[]`	-	Members shown as faces. Up to four are shown.
`memberCount`	`number`	-	Total members, when larger than `members`.
`projects`	`number`	-	Number of projects.
`storage`	`{ used: number; total: number; unit: string }`	-	Storage in use and included.
`lastActive`	`string`	-	Text such as "Active 2 hours ago".

The cover gradient and tile color come from a hash of the name, so they stay stable across renders.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/workspace-card

Prop	Type	Default	Description
`workspace`	`Workspace`	-	The workspace to show. Optional only while `loading`.
`href`	`string`	-	Makes the card clickable through its title link.
`onOpen`	`() => void`	-	Called when the title button is pressed, when there is no `href`.
`current`	`boolean`	`false`	Mark it as the current workspace.
`actions`	`{ label: string; onSelect: () => void; destructive?: boolean }[]`	`[]`	Items in the more menu. Empty hides the menu.
`loading`	`boolean`	`false`	Show a placeholder.

Also accepts all <article> props.

Prop	Type	Default	Description
`name`	`string`	-	Workspace name. Also seeds the cover and tile colors.
`description`	`string`	-	One line about the workspace.
`plan`	`string`	-	Plan label.
`members`	`{ name: string; image?: string }[]`	-	Members shown as faces. Up to four are shown.
`memberCount`	`number`	-	Total members, when larger than `members`.
`projects`	`number`	-	Number of projects.
`storage`	`{ used: number; total: number; unit: string }`	-	Storage in use and included.
`lastActive`	`string`	-	Text such as "Active 2 hours ago".

The cover gradient and tile color come from a hash of the name, so they stay stable across renders.