uix-uiCard
Content container. 3 styles.
Sylhet green
Grassy and light, 100g loose leaf.
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardActions, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
export default function Example() {
return (
<Card style={{ width: 340, maxWidth: "100%" }}>
<CardHeader>
<div>
<CardTitle>Sylhet green</CardTitle>
<CardDescription>Grassy and light, 100g loose leaf.</CardDescription>
</div>
<Badge color="success">In stock</Badge>
</CardHeader>
<CardActions>
<Button size="sm">Add for ৳420</Button>
<Button size="sm" variant="ghost">Details</Button>
</CardActions>
</Card>
);
}
Installation
$ npx uix-ui@latest add cardThis copies the file into components/ui/card.tsx in your project. npx shadcn@latest add @uix/card works too.
Usage
import { Card, CardMedia, CardHeader, CardTitle, CardDescription, CardActions, CardFooter } from "@/components/ui/card";
<Card style={{ width: 340, maxWidth: "100%" }}>
<CardHeader>
<div>
<CardTitle>Sylhet green</CardTitle>
<CardDescription>Grassy and light, 100g loose leaf.</CardDescription>
</div>
<Badge color="success">In stock</Badge>
</CardHeader>
<CardActions>
<Button size="sm">Add for ৳420</Button>
<Button size="sm" variant="ghost">Details</Button>
</CardActions>
</Card>
Examples
Appearances
outlined
Masala chai, 250g.
elevated
Masala chai, 250g.
filled
Masala chai, 250g.
import { Card, CardDescription, CardTitle } from "@/components/ui/card";
export default function Example() {
return (
<div className="flex flex-wrap gap-4">
{(["outlined", "elevated", "filled"] as const).map(a => (
<Card key={a} appearance={a} style={{ width: 200, maxWidth: "100%" }}>
<CardTitle>{a}</CardTitle>
<CardDescription>Masala chai, 250g.</CardDescription>
</Card>
))}
</div>
);
}
With a footer
Order #1042
Packing2 tins of Darjeeling and a clay cup for Israt Jahan, Mirpur.
Placed today at 10:20 am
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export default function Example() {
return (
<Card appearance="elevated" style={{ width: 340, maxWidth: "100%" }}>
<CardHeader>
<CardTitle>Order #1042</CardTitle>
<Badge color="warning">Packing</Badge>
</CardHeader>
<CardDescription>2 tins of Darjeeling and a clay cup for Israt Jahan, Mirpur.</CardDescription>
<CardFooter>Placed today at 10:20 am</CardFooter>
</Card>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | outlined | elevated | filled | "outlined" |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts
This file exports 7 parts: Card, CardMedia, CardHeader, CardTitle, CardDescription, CardActions, CardFooter. Use only the ones you need.