Card

Karta s padding, radius, color variantami a sticky podporou

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/card.json

Usage

Preview

Barvy

white

light

primary

secondary

green

red

Padding

p=none

p=xs

p=sm

p=md

p=lg

p=xl

Rádiusy

Recenzní karta

Zákaznická recenze

Skvělé řešení a rychlé nasazení.

“Integrace byla hotová během jednoho dne.”

Matěj M.

Profil uživatele

Jana Novákovájana@example.com

AdminAktivní

Stat karta

Příjmy

$48,295+12%

Klienti

2,340+5%

Objednávky

841-2%

Konverze

3.8%+0.4%

Notifikační karta

Nová zpráva

2 min

Objednávka dokončena

1 hod

Přihlášení z nového zařízení

včera

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button"

Example

<Card className="max-w-sm" p="md" radius="xl"> <CardHeader> <CardTitle>Zákaznická recenze</CardTitle> <CardDescription>Skvělé řešení a rychlé nasazení.</CardDescription> </CardHeader> <CardContent className="space-y-3"> <div className="text-amber-500">★★★★★</div> <p className="text-sm text-muted-foreground">"Integrace byla hotová během jednoho dne."</p> </CardContent> <CardFooter className="justify-between"> <span className="text-sm font-medium">Matěj M.</span> <Button size="sm" variant="outline" color="grey" label="Detail" /> </CardFooter> </Card>

Dependencies

https://registry.ceskysoftware.cz/r/utils.json (registry)