Card

A flexible container component for grouping related content.

tsx

import { 
    Card, 
    CardHeader, 
    CardTitle, 
    CardDescription, 
    CardContent, 
    CardFooter 
} from '@xdev-asia/x-ui-react';

Basic Usage

Card description goes here

Your content here

Manage your subscription

You are on the Pro plan.

With shadow effect

With border

With muted background

With backdrop blur

Nice hover effect

With ring effect

Prop	Type	Default
`variant`	'elevated' \| 'outlined' \| 'filled' \| 'glass'	'elevated'
`padding`	'none' \| 'sm' \| 'md' \| 'lg'	'md'
`isInteractive`	boolean	false
`isSelected`	boolean	false
`children`	ReactNode	-

Navigation