Card

Source code
A summary of your account.
import { 
  Card,
  CardHeader,
  CardHeading,
  CardBody,
  CardFooter
} from "rfui-package";

#Basic

A summary of your account.
<Card>A summary of your account.</Card>

#CardBody

A summary of your account.
<Card>
  <CardBody>A summary of your account.</CardBody>
</Card>

#CardHeader and CardBody

Summary
A summary of your account.
<Card>
  <CardHeader>Summary</CardHeader>
  <CardBody>A summary of your account.</CardBody>
</Card>

#CardHeading

Summary

A summary of your account.
<Card>
  <CardHeader>
    <CardHeading>Summary</CardHeading>
  </CardHeader>
  <CardBody>A summary of your account.</CardBody>
</Card>

#CardBody and CardFooter

A summary of your account.
<Card>
  <CardBody>A summary of your account.</CardBody>
  <CardFooter>
    <Button>Close</Button>
  </CardFooter>
</Card>

#CardHeader, CardBody and CardFooter

Summary
A summary of your account.
<Card>
  <CardHeader>Summary</CardHeader>
  <CardBody>A summary of your account.</CardBody>
  <CardFooter>
    <Button>Close</Button>
  </CardFooter>
</Card>

#Rounded

Set rounded to "square", "sm", or "lg". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack className="gap-5">
  <Card rounded="square">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card rounded="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card rounded="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Width

Set width to "sm", "md", "lg", or "full". Defaults to "md".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack className="gap-5">
  <Card width="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="full">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Shadow

Set shadow to "sm", "md", or "lg". Defaults to "sm".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack className="gap-5">
  <Card shadow="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card shadow="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card shadow="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Padding

Set padding to "sm", "md", or "lg". Defaults to "md".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack className="gap-5">
  <Card padding="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card padding="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card padding="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Realistic

Profile

Please fill out the following information.
<Card>
  <CardHeader>
    <CardHeading>Profile</CardHeading>
  </CardHeader>
  <CardBody>
    <div className="mb-6">
      Please fill out the following information.
    </div>
    <Stack className="gap-3">
      <FormField label="Name">
        <Input name="name" />
      </FormField>
      <FormField label="Email">
        <Input type="email" name="email" />
      </FormField>
      <FormField label="Age">
        <Input type="number" name="age" />
      </FormField>
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex className="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#Top accent

Set topAccent to true. You'll also probably want to set rounded to "square".

Profile

Please fill out the following information.
<Card topAccent rounded="square">
  <CardHeader>
    <CardHeading>Profile</CardHeading>
  </CardHeader>
  <CardBody>
    <div className="mb-6 text-neutral-700">
      Please fill out the following information.
    </div>
    <Stack className="gap-3">
      <FormField label="Name">
        <Input name="name" />
      </FormField>
      <FormField label="Email">
        <Input type="email" name="email" />
      </FormField>
      <FormField label="Age">
        <Input type="number" name="age" />
      </FormField>
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex className="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#Left accent

Set leftAccent to true. You'll also probably want to set rounded to "square".

Profile

Please fill out the following information.
<Card leftAccent rounded="square">
  <CardHeader>
    <CardHeading>Profile</CardHeading>
  </CardHeader>
  <CardBody>
    <div className="mb-6 text-neutral-700">
      Please fill out the following information.
    </div>
    <Stack className="gap-3">
      <FormField label="Name">
        <Input name="name" />
      </FormField>
      <FormField label="Email">
        <Input type="email" name="email" />
      </FormField>
      <FormField label="Age">
        <Input type="number" name="age" />
      </FormField>    
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex className="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#As link

To make the Card act as a link, wrap it in Link. You'll probably also want to add pointer-events: none; to Card.
Click to visit example.com
<Link href="https://example.com">
  <Card className="pointer-events-none">
    <CardBody>
      Click to visit example.com
    </CardBody>
  </Card>
</Link>

#Collapsible

If you set collapsible to true, when you click on the CardHeader it will toggle the CardBody and the CardFooter.

Summary

A summary of your account.
<Card collapsible>
  <CardHeader>
    <CardHeading>Summary</CardHeading>
  </CardHeader>
  <CardBody>A summary of your account.</CardBody>
  <CardFooter>
    <Button>Close</Button>
  </CardFooter>
</Card>

#Props

PropRequiredDefaultType and notes
rounded--
"square" | "sm" | "lg"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
width-"md"
"sm" | "md" | "lg" | "full"
shadow-"sm"
"sm" | "md" | "lg"
topAccent-false
boolean
leftAccent-false
boolean
padding-"md"
"sm" | "md" | "lg"
collapsible-false
boolean
isCollapsedByDefault-false
boolean
children-
ComponentChild
...rest--
Omit<ComponentProps<"div">, "size">
See the docs for rest parameters. For Card, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div className={containerClass} {...restWithoutClass}>
  {children}
</div>

CardHeader

PropRequiredDefaultType and notes
children-
ComponentChild
...rest--
ComponentProps<"div">

CardHeading

PropRequiredDefaultType and notes
children-
ComponentChild
...rest--
ComponentProps<"h1">

CardBody

PropRequiredDefaultType and notes
children-
ComponentChild
...rest--
ComponentProps<"div">

CardFooter

PropRequiredDefaultType and notes
children-
ComponentChild
...rest--
ComponentProps<"div">