Future UI Logo

Basic Card

A modern, highly flexible card component with multiple variants and built-in animations. Designed to be clean and minimal, it avoids heavy shadows in favor of subtle borders and glassmorphism. Perfect for profiles, feature blocks, and data display.

Live Interactive Preview
AH

Aryan Hooda

Full Stack Developer

Building scalable web apps with React, Node.js & MongoDB. Passionate about clean UI and high-performance backend systems.

24

Projects

3+

Years

1.2k

Followers
AH

John Doe

Product Designer

Building scalable web apps with React, Node.js & MongoDB. Passionate about clean UI and high-performance backend systems.

24

Projects

3+

Years

1.2k

Followers
Source
npx futureuikit add basic-card
Details

Built with Framer Motion for smooth entry and hover animations.Supports Modern (Glass), Clean (Solid), and Minimal (Outline) variants.Fully customizable color scheme for icons and primary actions.Minimalist design without heavy shadows for a clean look.Responsive layout that adapts to any container.Easily configurable stats and call-to-action buttons.

How to Use?
  • Import BasicCard into your React component.
  • Choose a variant: 'modern', 'clean', or 'minimal'.
  • Pass a custom color for the avatar and primary button.
  • Provide stats and descriptions as needed to fit your use case.
  • Add onClick handlers for primary and secondary actions.