Item

A versatile list item component with media and action support.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/item

Lineage

Shadcn

Docs

Spoke

Anatomy

import {
	Item,
	ItemHeader,
	ItemMedia,
	ItemContent,
	ItemTitle,
	ItemDescription,
	ItemActions,
	ItemFooter,
} from "@/components/ui/item"

export default () => (
	<Item>
		<ItemHeader>
			<ItemMedia />
			<ItemContent>
				<ItemTitle />
				<ItemDescription />
			</ItemContent>
			<ItemActions />
		</ItemHeader>
		<ItemFooter />
	</Item>
)

Spoke utility classes

This component uses base design tokens for styling and has no whitelabel CSS variables.