Documentation

Card

A container component with header, content, and footer slots for grouping related content.

Examples

Login to your account

Enter your email below to login to your account

import { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input } from 'kalki-design'

<Card>
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>Enter your email below to login to your account</CardDescription>
    <CardAction>
      <Button variant="link">Sign up</Button>
    </CardAction>
  </CardHeader>
  <CardContent className="space-y-3">
    <Input label="Email" type="email" placeholder="m@example.com" />
    <Input label="Password" type="password" />
  </CardContent>
  <CardFooter className="flex-col gap-2 border-t">
    <Button fullWidth>Login</Button>
    <Button variant="outline" fullWidth>Login with Google</Button>
  </CardFooter>
</Card>

Installation

npx kalki-design add card

Usage

import { Card } from 'kalki-design'

export default function Example() {
  return <Card />
}

API Reference

NameTypeDefaultDescription
NamehoverableTypebooleanDefaultfalseDescriptionAdds a shadow lift effect on hover.
NameclassNameTypestringDefault—DescriptionAdditional CSS classes for custom styling.
NamechildrenTypeReactNodeDefault—DescriptionContent rendered inside the card. Use CardHeader, CardContent, CardFooter sub-components.