Components
Card
A glassmorphic static surface with a fixed soft shadow.
Installation
- $npx litefy@latest add card
- $pnpm dlx litefy@latest add card
- $yarn dlx litefy@latest add card
- $bun --bun litefy@latest add card
Usage
A simple card with title, description, and actions.
Litefy Card
A static glassmorphic surface with subtle border and soft shadow.
import { Button, Card } from "@/ui";
export default function CardBasicDemo() {
return (
<Card className="w-full max-w-sm p-6">
<h3 className="text-lg font-semibold">Litefy Card</h3>
<p className="text-muted-foreground mt-2 text-sm">
A static glassmorphic surface with subtle border and soft shadow.
</p>
<div className="mt-4 flex gap-2">
<Button>Action</Button>
<Button variant="outline">Cancel</Button>
</div>
</Card>
);
}
API Reference
Card
A glassmorphic static surface with a fixed shadow-base (rounded-lg) — no hover lift or effects, so static containers never masquerade as clickable. For an interactive card, use CardButton.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"div"> | - | Supports all native div props |