Card

A container component with header, content, and footer sub-components.

PREVIEW

Default Card

This is a default card with muted description text.

Elevated Card

3 New

Hover over this card to see the outline border effect.

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@kennbalino/kui";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here.
  </CardContent>
  <CardFooter>
    <Button variant="ghost">Cancel</Button>
    <Button>Confirm</Button>
  </CardFooter>
</Card>

// Variants
<Card variant="default">Card 1</Card>
<Card variant="elevated">Card 2</Card>
<Card variant="outline">Card 3</Card>
<Card variant="ghost">Card 4</Card>

// Hoverable
<Card hoverable>Card 5</Card>

PROPS

Prop	Type	Default	Description
variant	default \| elevated \| outline \| ghost	default	Controls the visual style of the card.
padding	none \| sm \| md \| lg	md	Controls the inner padding of the card.
hoverable	boolean	false	Adds hover border and shadow effect.
onClick	() => void	—	Callback fired when the card is clicked.
className	string	—	Additional CSS classes to apply.
children*	ReactNode	—	Content rendered inside the card.