Componentsstable

Card

A versatile and accessible container that groups related content with support for multiple visual variants.

Default

Standard variant

General use

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add card

When to use

Use the Card to group related information in a visual and hierarchical way, such as user profiles, blog articles, products in an online store, or any content that benefits from a container with defined borders and spacing.

The component is ideal for creating grid layouts or item lists that need to stand out from the page background, maintaining visual consistency through the available variants.

Best practices

Use CardHeader for titles and descriptions, keeping the visual hierarchy clear and predictable.
Prefer CardContent for the main content and CardFooter for actions or secondary metadata.
Choose variants that convey the card's function: use gradient to highlight premium items or lifted for interactive elements.
Avoid overloading a single card with too much information; prefer splitting content into multiple cards when necessary.
Combine with components like Button and Badge to create complete and functional interfaces.

Accessibility

The Card is rendered as a semantic div, but you can add ARIA attributes when it contains interactive content or is part of a navigation pattern.

When using clickable cards, wrap all content in a button or a element to ensure that keyboard users can access the main action without difficulty.

Make sure variant colors maintain adequate contrast in both light and dark mode, especially in decorative variants like crosshair and corners.

Examples

Combine variants and sizes to meet your needs.

Product card

A typical card for displaying products in e-commerce, combining image, title, description, price, and purchase action.

Premium Bluetooth Headphones

Active noise cancellation and 30h battery life

$149.90

User profile

Card with lifted variant to highlight profile information on dashboards or team pages.

Sarah Johnson

Product Designer

📍 San Francisco, CA

✉️ sarah.johnson@example.com

🔗 linkedin.com/in/sarahjohnson

Premium pricing card

Gradient variant to highlight premium plans or special offers on pricing pages.

Premium Plan

$49/month

✓Unlimited access to all features
✓24/7 priority support
✓Advanced data export
✓Custom integrations

Statistics card

ShadowRight variant for dashboards with metrics and performance indicators.

Sales this month

1,234

↑ 23%vs. last month

Custom shadow colors

Demonstration of shadowRight variant with different custom shadow colors to match your brand or design system.

Neon Green

Perfect for highlighting premium content.

Blue

Great for information indicators.

Red

Ideal for urgent notifications.

Purple

Works well for premium features.

Blog post card

Default card for article listings with featured image, title, description, and metadata.

How to create reusable components

Learn best practices for building a scalable and maintainable component library.

By John Smith•5 min read

Notification card

Corners variant to highlight notifications, alerts, or important messages.

New message

5 minutes ago

You received a reply to your comment on the design system project.

Gradient feature card

Gradient variant with custom colors to highlight premium features or special offers.

Pro Feature

Unlock advanced capabilities

Get access to AI-powered insights, advanced analytics, and priority support with our Pro plan.

Technical specification

Crosshair variant for technical documentation, API specs, or development-related content.

API Endpoint

GET

/api/v1/users/:id

Response

{
  "id": "123",
  "name": "John Doe",
  "email": "john@example.com"
}

Status:200 OK

All variants

Visual demonstration of all available variants.

Default

Standard variant

General use

Lifted

3D effect

Interactive elements

Shadow Right

Side shadow

Dashboards

Gradient

Gradient border

Premium content

Properties

TSX interface that combines variants and default attributes.

Prop	Type	Default	Description
`variant`	`'default' \| 'crosshair' \| 'lifted' \| 'shadowRight' \| 'gradient' \| 'corners'`	`'default'`	Defines the visual style of the card. Each variant offers a unique appearance suitable for different contexts.
`shadowColor`	`string`	—	Custom color for the shadow when variant='shadowRight'. Accepts any valid CSS color (hex, rgb, color name). Defaults to black.
`gradientClassName`	`string`	—	Custom Tailwind classes for the border gradient when variant='gradient'. Overrides the default gradient.
`className`	`string`	—	Additional Tailwind classes to customize the card style.

Search Components