Card

A sophisticated card component with Vercel-inspired design. Features multiple variants, interactive states, and flexible layouts for content organization and visual hierarchy.

Basic Usage

Project Alpha

A modern web application built with React and TypeScript for scalable development.

This project demonstrates advanced patterns in modern web development, including server-side rendering, real-time updates, and responsive design principles.

Variants

Default

Clean design with subtle shadows

Perfect for general content and standard layouts with balanced visual weight.

Elevated

Enhanced depth and prominence

Ideal for highlighting important content and creating visual hierarchy.

Modern

Vercel-inspired sophisticated shadows

Contemporary design with custom shadow values for premium feel.

Minimal

Clean design without borders

Great for content-focused layouts and dashboard interfaces.

Outline

Transparent with defined borders

Excellent for overlays and transparent background layouts.

Glass

Backdrop blur with transparency

Modern glass morphism effect with sophisticated backdrop blur.

Interactive Cards

Fast Performance

Lightning fast load times and optimal rendering

Secure by Design

Enterprise-grade security and data protection

User Friendly

Intuitive interface with accessibility focus

Team Member Cards

JD

John Doe

Lead Developer & Architecture Specialist

Passionate about creating scalable web applications and mentoring junior developers. Expert in React ecosystem, Node.js, and cloud architecture patterns.

ReactNode.jsTypeScript
SW

Sarah Wilson

Senior UX Designer & Research Lead

Specializes in user research, interaction design, and creating delightful user experiences for complex applications and design systems.

FigmaResearchPrototyping

Product Showcase

UIpulse Pro

Professional component library with advanced features

$49/month
Popular
  • • 200+ Premium Components
  • • Advanced Customization
  • • Priority Support

UIpulse Enterprise

Complete design system solution for large teams

$199/month
Enterprise
  • • Unlimited Components
  • • Custom Design Tokens
  • • Dedicated Support

UIpulse Custom

Tailored solution designed specifically for your needs

Custompricing
Custom
  • • Bespoke Components
  • • Full Source Code
  • • Implementation Support

Sizes

Small Card

Compact padding perfect for tight layouts and sidebars

Ideal for dashboard widgets and condensed information displays.

Large Card

Generous spacing for important content and feature highlights

Perfect for highlighting key information, creating focal points in your layout, or showcasing important features with plenty of breathing room.

Header Alignments

Left Aligned

Default alignment for most content

Center Aligned

Perfect for feature cards and CTAs

Right Aligned

Useful for statistics and numbers

Footer Layouts

Space Between

Actions spread across full width

Updated 2h ago

End Aligned

Actions grouped at the end

Card Component
tsx
1import { HTMLAttributes, ReactNode, forwardRef } from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/cn";
4

5const cardVariants = cva(
6  [
7    "rounded-xl border transition-all duration-200 ease-out",
8    "bg-white text-neutral-900",
9    "dark:bg-neutral-900 dark:text-neutral-100",
10    "group",
11  ],
12  {
13    variants: {
14      variant: {
15        default: [
16          "border-neutral-200/60 dark:border-neutral-800/60",
17          "shadow-sm hover:shadow-md",
18          "hover:border-neutral-300/80 dark:hover:border-neutral-700/80",
19        ],
20        elevated: [