Card- The main Card component.CardHeader- The header of the card.CardBody- The body of the card.CardFooter- The footer of the card.CardTitle- The title of the card.CardDescription- The description of the card.
import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from "@dreamy-ui/react";A basic usage of the card component.
Card Title
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
<Card maxW="sm">
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.</>
</CardDescription>
</CardBody>
</Card>You can change the variant of the card by using the variant prop.
Elevated
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
Outline
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
<Card variant="elevated" maxW="sm">
<CardHeader>
<CardTitle>Elevated</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
</CardDescription>
</CardBody>
</Card>
<Card variant="outline" maxW="sm">
<CardHeader>
<CardTitle>Outline</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
</CardDescription>
</CardBody>
</Card>Example of a card with a dividers layout.
Dreamy UI
dreamy-ui.com
Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.
<Card maxW="sm">
<CardHeader row alignItems="center" pb={6} gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<Divider />
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<Divider />
<CardFooter pt={6}>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
Visit source code on GitHub <Icon h={4} as={HiExternalLink} />
</Link>
</CardFooter>
</Card>Example of a card with different sizes using the size prop.
Small Card
This is the small card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
Medium Card
This is the medium card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
Large Card
This is the large card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
<Card size="sm" maxW="sm">
<CardHeader>
<CardTitle>Small Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
This is the small card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
</CardDescription>
</CardBody>
</Card>
<Card size="md" maxW="sm">
<CardHeader>
<CardTitle>Medium Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
This is the medium card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
</CardDescription>
</CardBody>
</Card>
<Card size="lg" maxW="sm">
<CardHeader>
<CardTitle>Large Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
This is the large card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
</CardDescription>
</CardBody>
</Card>Example of a card with a multiple fields and a buttons.
Tip: full is an alias for width="full".
Form Card
Fill in the form below to create an account
<Card w="md">
<CardHeader>
<CardTitle>Form Card</CardTitle>
<CardDescription>
Fill in the form below to create an account
</CardDescription>
</CardHeader>
<CardBody gap={4}>
<Field label="Email" full>
<Input name="email" placeholder="Email" full />
</Field>
<Field label="Password" full>
<Input name="password" placeholder="Password" full />
</Field>
</CardBody>
<CardFooter justifyContent="end">
<Button variant="outline">Cancel</Button>
<Button variant="primary">Sign in</Button>
</CardFooter>
</Card>Example of a card as a link, that navigates to a different page.
<Card asComp={<a target="_blank" to="https://github.com/dreamy-ui/dreamy-ui" />} maxW="sm">
<CardHeader row alignItems="center" gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<CardFooter>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
Star on GitHub <Icon h={4} asComp={<HiExternalLink />} />
</Link>
</CardFooter>
</Card>