Default Card

This is the default card style

This card uses the default variant with default size.

Card Component

A customizable card component for containing content with various styles and layouts.

Multiple variants: default, glass, gradient, outline, and elevated
Different size options: default, small, and large
Supports spotlight effect for enhanced hover interactions
Includes sub-components for structured content organization

Installation

The Card component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the card in your project.

React TSX
1import { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription } from "@/components/modern-ui/card"

Examples

Default Card

A standard card with basic styling and layout.

Default Card

This is a default card with standard styling

This is the card content area, which can contain any elements.

Outline Card

A card with a border outline that highlights on hover.

Outline Card

Card with an outline border style

This card has a border that highlights when you hover over it.

Elevated Card

A card with enhanced shadow effects for a raised appearance.

Elevated Card

Card with enhanced shadow effects

This card has a more prominent shadow to create a raised effect.

Interactive Card

A card that scales and adds shadow on hover.

Interactive Card

This card has interactive hover effects

Hover over this card to see it slightly scale up and add a shadow effect.

Dashed Card

A card with a dashed border style.

Dashed Card

A card with dashed border styling

This card uses a dashed border style to create a distinct look.

Card with Badge

A card featuring the CardBadge component.

New

Card with Badge

A card featuring a badge component

The CardBadge component can be placed anywhere within the card.

Card with Decoration

A card with decorative visual elements.

Custom Card

Custom styling combination

This card uses custom class combinations with the interactive variant.

Custom

API Reference

Card Component Props

Prop	Type	Default	Description
`variant`	`'default' \| 'gradient' \| 'outline' \| 'elevated' \| 'dashed' \| 'interactive'`	`'default'`	Controls the visual style of the card
`size`	`'default' \| 'sm' \| 'lg' \| 'xl'`	`'default'`	Controls the size of the card
`childClassname`	`string`	-	Additional CSS classes to apply to the card content wrapper
`className`	`string`	-	Additional CSS classes to apply to the card
`children`	`ReactNode`	-	The content of the card

Sub-components

The Card component comes with several sub-components for structuring content:

CardHeader: Container for the top section of the card
CardTitle: Heading element for the card
CardDescription: Text element for additional information
CardContent: Main content area of the card
CardFooter: Container for the bottom section of the card
CardBadge: Small badge component that can be placed anywhere within the card
CardDecoration: Decorative element for adding visual interest

Variant Classes

The card supports the following variants:

default: Standard card with background and subtle hover effect
outline: Card with a border that highlights on hover
elevated: Card with enhanced shadow effects
interactive: Card that scales slightly and adds shadow on hover
dashed: Card with a dashed border style
destructive: Card with destructive/error styling

Size Classes

The card supports the following size options:

default: Standard padding (p-6)
sm: Small padding (p-4)
lg: Large padding (p-8)
xl: Extra large padding (p-10)