Card

Container with dot notation sub-components for preview and info.

Preview

🎨

Card Title

Description text

Installation

npx drivn add card

Usage

1 import { Card } from "@/components/ui/card"
2 
3 export default function Page() {
4   return (
5     <Card>
6       <Card.Preview>
7         <span>Preview content</span>
8       </Card.Preview>
9       <Card.Info>
10         <span>Card title</span>
11       </Card.Info>
12     </Card>
13   )
14 }

API Reference

Prop	Type	Default	Description
`hover`	boolean	true	Enables hover lift effect and background transition
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Card sub-components (Preview, Info)

1	import { Card } from "@/components/ui/card"
2
3	export default function Page() {
4	return (
5	<Card>
6	<Card.Preview>
7	<span>Preview content</span>
8	</Card.Preview>
9	<Card.Info>
10	<span>Card title</span>
11	</Card.Info>
12	</Card>
13	)
14	}