Card
A customizable container for displaying content with options for color themes, shadows, radius, and sizes—perfect for profiles, products, and more.
Usage
Simple
Lalisa Manobal aka LISA
Lisa from BLACKPINK is a talented rapper, dancer, and fashion icon, known for her charisma, versatility, and global influence.Product
Apple Watch Series 8 GPS + Cellular 45mm
$399.99$499.99
Profile
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, omnis!
Login Card
Welcome Back
Sign in to continue to your account
Dont have an account? Sign up
Or continue with
State Card
Total Revenue$24,345+12% from last month
$
New Users1,254+5% from last month
👤
Conversion Rate3.2%+0.5% from last month
%
Radial Pattern Achievement Card
AchievementApril 16, 2025
Congratulations!You have completed the challenge successfully.
100% of the challenge completed
Neumorphic Weather Card
San Francisco
Wednesday, 16 Apr
⋮
72°
Feels like 75°
Sunny · Humidity 45% · Wind 7 mph
Thu37°C
Fri37°C
Sat18°C
Sun37°C
Mon21°C
Notification Card
Information
Your account has been successfully updated.
Success
Your payment has been processed successfully.
Warning
Your subscription will expire in 3 days.
Features
- Customizable sizes, colors, shadow effects, and border radius
- Supports any content inside, making it suitable for various applications
- Easy to customize with additional class names for unique styling
- Can be used to build various types of cards like product cards, profile cards, notifications, etc.
Types of Cards
These are just a few examples of how the Card component can be used:
- Default Card: A basic card with default styling.
- Simple Card: A minimalistic card designed for basic content.
- Product Card: A card used to display product details like name, image, and price.
- Profile Card: Ideal for displaying user profile information such as name, bio, and avatar.
- Login Card: A card layout for containing login forms.
- Statics Card: A card designed to show statistics or key metrics.
- Radial Pattern Achievement Card: A card with a radial design for displaying achievements.
- Neumorphic Weather Card: A neumorphic-style card to show weather information.
- Notification Card: A card used for displaying notifications or alerts.
These card styles are built using the Card component, where different combinations of size, color, shadow, and radius properties are applied to suit each use case.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Content of the card (could be text, images, or other components). |
| color | "light" | "dark" | "light" | Card color theme. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "md" | Size of the card. |
| radius | "none" | "sm" | "md" | "lg" | "xl" | "md" | Border radius of the card. |
| shadow | "none" | "sm" | "md" | "lg" | "xl" | "md" | Shadow effect of the card. |
| className | string |