Card

Use Card to group related information, actions, and descriptions into a surface with clear spatial hierarchy.

Starter workspace

Ship a consistent docs and component experience across React and Vue.

Use cards for summaries, settings surfaces, marketing CTAs, and denser information blocks that need a clear frame.

import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@tile-ui/vue';
 
export default function CardDemo() {
	return (
		<Card>
			<CardHeader>

Registry install

pnpm dlx shadcn@latest add @tile-ui/card

Package usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tile-ui/vue';

<Card>
	<CardHeader>
		<CardTitle>Starter workspace</CardTitle>
		<CardDescription>Ship a consistent docs and component experience.</CardDescription>
	</CardHeader>
	<CardContent>
		<p>Use cards for summaries, settings surfaces, marketing CTAs, and denser information blocks.</p>
	</CardContent>
	<CardFooter>
		<Button variant="outline">Preview</Button>
		<Button>Install</Button>
	</CardFooter>
</Card>