Installation
Run the following command
npx vibes@latest add card
Usage
import { Card } from '@/vibes/soul/primitives/card';function Usage() { return ( <Card> <h3>Card Title</h3> <p>Card content goes here</p> </Card> );}
API Reference
CardProps
| Prop | Type | Default |
|---|
as
| ElementType
| 'div'
|
className
| string
| |
children*
| ReactNode
| |
href
| string
| |
ariaLabel
| | |
CardSkeletonProps
| Prop | Type | Default |
|---|
className
| string
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --card-focus: var(--primary); --card-border-color: var(--contrast-200); --card-background: var(--background); --card-hover-background: color-mix(in oklab, var(--contrast-100) 50%, transparent);}
