🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Card

A versatile card component for displaying content in a contained format

Card Title

This is a description of the card content.

This is the main content of the card. You can add any elements here.

Installation

The Card component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Card component into your React component.

import { Card } from 'reacui';

Basic Usage

The Card component provides a container for content with a consistent style.

This is a basic card with simple content.

<Card>
  <p>This is a basic card with simple content.</p>
</Card>

With Header & Footer

Add structure to your card with a header and footer.

Card Header

This is the main content of the card.

Card Footer

<Card>
  <Card.Header>
    <p className="font-medium">Card Header</p>
  </Card.Header>
  <Card.Content>
    <p>This is the main content of the card.</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card>

With Title & Description

Use Card.Title and Card.Description to add formatted text content.

Feature Highlight

Learn about this amazing feature that will improve your workflow.

This is the main content of the card.

<Card>
  <Card.Header>
    <Card.Title>Feature Highlight</Card.Title>
    <Card.Description>
      Learn about this amazing feature that will improve your workflow.
    </Card.Description>
  </Card.Header>
  <Card.Content>
    <p>This is the main content of the card.</p>
  </Card.Content>
</Card>

Complete Example

A full example showing all Card subcomponents working together.

Subscription Plan

Choose the right plan for your needs.

Pro Plan$29/mo

✓ Unlimited projects
✓ Advanced analytics
✓ Priority support

<Card>
  <Card.Header>
    <Card.Title>Subscription Plan</Card.Title>
    <Card.Description>Choose the right plan for your needs.</Card.Description>
  </Card.Header>
  <Card.Content>
    <div className="flex justify-between items-center mb-3">
      <span className="font-medium">Pro Plan</span>
      <span className="text-lg font-bold">$29/mo</span>
    </div>
    <ul className="space-y-1 text-sm">
      <li>✓ Unlimited projects</li>
      <li>✓ Advanced analytics</li>
      <li>✓ Priority support</li>
    </ul>
  </Card.Content>
  <Card.Footer>
    <Button variant="primary" className="w-full">
      Upgrade Now
    </Button>
  </Card.Footer>
</Card>

API Reference

The following props and subcomponents are available for the Card component.

Component	Description	Props
Card	Main container component	children, className
Card.Header	Container for the card header content	children, className
Card.Title	Styled heading for the card	children, className
Card.Description	Styled description text for the card	children, className
Card.Content	Container for the main card content	children, className
Card.Footer	Container for the card footer content	children, className