A container that groups related content and actions.
The Card is a copy-paste component in the UI Elements collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/lightswind/card"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import {2 Card,3 CardHeader,4 CardTitle,5 CardDescription,6 CardContent,7 CardFooter,8} from "@/components/lightswind/card";9import { Button } from "@/components/lightswind/button";1011export function CardDemo() {12 return (13 <Card>14 <CardHeader>15 <CardTitle>Create project</CardTitle>16 <CardDescription>Deploy your new project in one-click.</CardDescription>17 </CardHeader>18 <CardContent>19 <p>Card content goes here.</p>20 </CardContent>21 <CardFooter>22 <Button>Deploy</Button>23 </CardFooter>24 </Card>25 );26}
Different visual and behavioral variants of the component
Standard card with header, content, and action button.
Deploy your new project in one-click.
Get started by choosing a build environment template.
A product byＭＵＨＩＬＡＮ and Team❤️.
