syncfusion-react-cards

Q: How do I install syncfusion-react-cards?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-cards in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-cards/ (personal) or .claude/skills/syncfusion-react-cards/ (project).

by syncfusionFrontend & Design

Build flexible card layouts for displaying content in React. The Card component is a lightweight container that supports headers, images, action buttons, horizontal layouts, and integration with other Syncfusion components. Use this skill whenever the user needs to create cards, build card-based UIs, display content cards, add action buttons to cards, customize card layouts, or embed components within cards.

Installs: 625
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-cards

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-cards automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing React Card Component

The Syncfusion React Card component is a lightweight, flexible container for displaying organized content with support for headers, images, dividers, action buttons, and integrated components.

When to Use This Skill

Use this skill when you need to:

Create simple or complex card-based layouts
Build a card with header, image, and action sections
Display content in a card with separators or dividers
Add action buttons (horizontal or vertical) to cards
Create horizontal card layouts with stacked content
Embed other Syncfusion components (ListView, Charts, etc.) inside cards
Customize card appearance with images, titles, and positioning
Build responsive card-based user interfaces

Navigation Guide

Follow this guide based on what you're implementing:

Getting Started

📄 Read: references/getting-started.md

Package installation and setup
Basic card structure and CSS imports
Simple card examples
Required dependencies

Card Structure & Headers

📄 Read: references/card-structure-headers.md

Card root element and classes
Header structure with title and subtitle
Header images and positioning
Content sections and organization

Images, Titles & Dividers

📄 Read: references/images-titles-dividers.md

Adding images to cards
Image titles and overlay effects
Dividers for section separation
Title positioning and customization

Action Buttons

📄 Read: references/action-buttons.md

Adding buttons and links to cards
Horizontal button layout (default)
Vertical button alignment
Icon buttons and styling

Layouts & Advanced

📄 Read: references/layouts-customization.md

Horizontal card layout
Stacked sections within cards
Image title position classes
CSS positioning and styling

Embedding Components

📄 Read: references/embedding-components.md

Integrating ListView with cards
Embedding charts and data components
Dynamic content patterns
Practical use cases

Quick Start Example

Basic Card with Header and Content:

import React from 'react';
import '@syncfusion/ej2-layouts/styles/tailwind3.css';

export default function BasicCard() {
  return (
    <div className="e-card">
      <div className="e-card-header">
        <div className="e-card-header-caption">
          <div className="e-card-header-title">Card Title</div>
          <div className="e-card-sub-title">Subtitle</div>
        </div>
      </div>
      <div className="e-card-content">
        This is the main content of the card. Add any HTML content here.
      </div>
    </div>
  );
}

Card with Action Buttons:

import React from 'react';

export default function CardWithButtons() {
  return (
    <div className="e-card">
      <div className="e-card-header-title">Product Card</div>
      <div className="e-card-content">
        High-quality product description goes here.
      </div>
      <div className="e-card-actions">
        <button className="e-card-btn">View</button>
        <button className="e-card-btn">Buy Now</button>
        <button className="e-card-btn">Share</button>
      </div>
    </div>
  );
}

Horizontal Layout Card:

import React from 'react';

export default function HorizontalCard() {
  return (
    <div className="e-card e-card-horizontal" style={{ width: '400px' }}>
      <img src="./image.png" alt="Card" style={{ height: '180px' }} />
      <div className="e-card-stacked">
        <div className="e-card-header">
          <div className="e-card-header-caption">
            <div className="e-card-header-title">Title</div>
          </div>
        </div>
        <div className="e-card-content">
          Content displayed vertically within horizontal layout
        </div>
      </div>
    </div>
  );
}

Common Patterns

Pattern 1: User Profile Card

Combine header images, titles, and action buttons to create profile cards for user listings or team pages.

<div className="e-card">
  <div className="e-card-header">
    <div className="e-card-header-image" style={{ backgroundImage: 'url(./profile.jpg)', width: '60px', height: '60px', borderRadius: '50%' }} />
    <div className="e-card-header-caption">
      <div className="e-card-header-title">John Doe</div>
      <div className="e-card-sub-title">Product Manager</div>
    </div>
  </div>
  <div className="e-card-content">
    Experienced in building user-centric products.
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Message</button>
    <button className="e-card-btn">Follow</button>
  </div>
</div>

Pattern 2: Product Card with Image

Use card images and titles for product listings with pricing and action buttons.

<div className="e-card">
  <div className="e-card-image" style={{ backgroundImage: 'url(./product.jpg)', height: '200px' }}>
    <div className="e-card-title">Product Name</div>
  </div>
  <div className="e-card-content">
    <p>$99.99</p>
    <p>High-quality product with excellent features</p>
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Add to Cart</button>
    <button className="e-card-btn">Buy Now</button>
  </div>
</div>

Pattern 3: Blog Post Card

Combine headers, dividers, and content sections to create blog post cards.

<div className="e-card">
  <div className="e-card-header-title">Blog Post Title</div>
  <div className="e-card-sub-title">Published on March 26, 2026</div>
  <div className="e-card-separator" />
  <div className="e-card-content">
    Blog post excerpt and content goes here...
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Read More</button>
    <button className="e-card-btn">Share</button>
  </div>
</div>

Key CSS Classes

Class	Purpose
`e-card`	Root container for the card
`e-card-header`	Header section container
`e-card-header-caption`	Wrapper for title and subtitle
`e-card-header-title`	Main title text
`e-card-sub-title`	Subtitle text
`e-card-header-image`	Header image element
`e-card-image`	Full-width card image
`e-card-title`	Title overlay on image
`e-card-content`	Main content section
`e-card-actions`	Button container
`e-card-btn`	Individual button styling
`e-card-vertical`	Vertical button alignment
`e-card-separator`	Divider element
`e-card-horizontal`	Horizontal card layout
`e-card-stacked`	Vertical stack within horizontal
`e-card-corner`	Rounded corners on images

Essential Setup

Install package:
```
npm install @syncfusion/ej2-layouts
```

Import CSS:

@import '@syncfusion/ej2-layouts/styles/tailwind3.css';

Create card element:
- Add e-card class to root div
- Add header, content, images, or buttons as needed
- Apply additional classes for layout and styling

Common Use Cases

Dashboard cards: Display key metrics or data summaries
Product listings: Showcase products with images and prices
Team members: Display user profiles and contact info
Blog posts: Show article previews with meta information
Feature highlights: Present features with descriptions
Data reports: Organize tabular or list data in cards
Notification cards: Display alerts or messages
Settings cards: Group related settings together

Next Steps: Choose a reference based on your specific need, then implement your card layout following the examples and patterns provided.

FAQ

What does the syncfusion-react-cards skill do?

How do I install syncfusion-react-cards?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-cards in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-cards/ (personal) or .claude/skills/syncfusion-react-cards/ (project).

Which AI agents can use syncfusion-react-cards?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-cards safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-cards?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 625 recorded installs.