Card

Displays a card with header, content, and footer.

Preview

Code

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Installation

CLI

Manual

Copy and paste the following code into your project.

import { CardStyles } from "./styles";
 
export interface CardRootProps extends React.ComponentProps<"div"> {}
 
export function CardRoot({ className, ...props }: CardRootProps) {
  return <div {...props} className={CardStyles.Root({ className })} />;
}
 
export interface CardHeaderProps extends React.ComponentProps<"header"> {}
 
export function CardHeader({ className, ...props }: CardHeaderProps) {
  return <header {...props} className={CardStyles.Header({ className })} />;
}
 
export interface CardTitleProps extends React.ComponentProps<"h3"> {}
 
export function CardTitle({ className, ...props }: CardTitleProps) {
  return <h3 {...props} className={CardStyles.Title({ className })} />;
}
 
export interface CardDescriptionProps extends React.ComponentProps<"p"> {}
 
export function CardDescription({ className, ...props }: CardDescriptionProps) {
  return <p {...props} className={CardStyles.Description({ className })} />;
}
 
export interface CardContentProps extends React.ComponentProps<"div"> {}
 
export function CardContent({ className, ...props }: CardContentProps) {
  return <div {...props} className={CardStyles.Content({ className })} />;
}
 
export interface CardFooterProps extends React.ComponentProps<"footer"> {}
 
export function CardFooter({ className, ...props }: CardFooterProps) {
  return <footer {...props} className={CardStyles.Footer({ className })} />;
}

Update the import paths to match your project setup.

Usage

Single import

import { Card } from "~/components/ui/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Multiple imports

import {
  CardRoot,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "~/components/ui/card";

<CardRoot>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</CardRoot>

Examples

Preview

Code

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Calendar Checkbox

On This Page

Installation
Usage
- Single import
- Multiple imports
Examples

Contribute