Card

Data Display

Container component with header, body, footer composition, variant system including glass morphism effects

Card

Flexible content container for grouping information, actions and media with glassmorphism-ready variants.

Variants

Use different visual variants to match a wide range of layouts and surfaces.

Default Card

A standard card with shadow

This is a default card with a clean, modern design.

Glass Card

Beautiful glassmorphism effect

Features a modern glass effect with backdrop blur.

Strong Glass

Enhanced glass effect

A stronger glass effect with more blur.

Subtle Glass

Lighter glass effect

A more subtle glass effect for delicate designs.

Bordered Card

Card with border accent

Clean bordered design for a different look.

Extra Padding

More spacious layout

This card has extra padding for a more spacious feel.

Visual Surfaces

Combine card variants with content to create dashboards, features and marketing sections.

Monthly Revenue

Performance overview

$24,890

+18.3% vs last month

Updated 5 min ago

Getting Started

Quick introduction

  • Install Saha UI via npm or pnpm
  • Wrap your app with the theme provider
  • Start using components like Card, Button and more

Premium Upgrade

Unlock advanced glassmorphism layouts

Get access to premium themes, advanced components and priority updates.

  • ✓ Advanced component variants
  • ✓ Ready-made page templates
  • ✓ Design tokens & theming

Layout Examples

Use cards to build settings panels, content previews, and user profiles.

SS

Sudepto Saha

Product Designer

Working on Saha UI component system and documentation examples.

Notifications

Manage your notification settings

Email updates
Product announcements
Security alerts

Usage Guidelines

When to Use

  • Content grouping
  • Product cards
  • Dashboard widgets

Accessibility

  • Semantic heading hierarchy
  • Interactive cards keyboard accessible

Performance

  • Static rendering
  • No JavaScript overhead

Common Mistakes

  • Nesting too many interactive elements
  • Cards that are too content-heavy

Frequently Asked Questions

Yes, wrap Card in a Link component or make it clickable while maintaining accessibility.
Yes, Card has a glass variant with backdrop blur effects.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

Calendar

Next

Carousel