Card Component Library
Relevant source files
The following files were used as context for generating this wiki page:
The Card Component Library is a foundational set of presentational React components designed to display structured information across the SuperClaude website. These components provide a unified visual language for documentation navigation, team profiles, project contributors, and general informational highlights.
The library relies heavily on a specialized GlowingEffect component to provide interactive visual feedback and uses GradientText for emphasized typography. Most components are designed as wrappers around specific data structures (such as documentation metadata or GitHub user objects), ensuring consistent layout and styling across different pages like the Home, About Us, and Documentation pages.
Sources: src/components/DocCard.js, src/components/InfoCard.js, src/components/TeamMemberCard.js, src/components/ContributorCard.js, src/components/glowing-effect-demo.js
Core Component Architecture
The card library follows a consistent structural pattern where a parent container manages the layout (often using absolute positioning for effects), a GlowingEffect component handles background animations, and an inner content div contains the actual data.
Component Hierarchical Relationship
The following diagram illustrates how the specialized card components utilize the shared GlowingEffect and UI primitives.
This diagram shows the dependency of specialized card components on the central GlowingEffect and GradientText modules.
Sources: src/components/DocCard.js:7-25, src/components/InfoCard.js:7-21, src/components/TeamMemberCard.js:8-25, src/components/ContributorCard.js:7-24, src/components/glowing-effect-demo.js:28-52
Documentation and Information Cards
These components are used primarily for navigation and conveying project status.
DocCard
The DocCard component facilitates navigation within the framework's documentation. It transforms a documentation object into a clickable link that points to a specific category and file.
- Target:
/docs/${doc.category}/${doc.name} - Styling: Uses a semi-transparent border and a centered, bold title with the first letter capitalized.
Sources: src/components/DocCard.js:5-26
InfoCard
Used on the About Us page, the InfoCard displays key project values or features. It accepts title and description props and uses GradientText for the heading.
Sources: src/components/InfoCard.js:5-22
GridItem (Feature Card)
Found within the GlowingEffectDemo, this component acts as a high-visibility feature card. It supports both internal routing via react-router-dom and external links.
Sources: src/components/glowing-effect-demo.js:27-72
Profile and Contributor Cards
These components manage the display of user-related data, specifically for team members and open-source contributors.
| Component | Data Source | Key Fields | Interaction |
|---|---|---|---|
TeamMemberCard | Local Object | name, githubUrl, avatarUrl, role | Links to GitHub Profile |
ContributorCard | GitHub API | login, html_url, avatar_url, contributions | Links to GitHub Profile |
Sources: src/components/TeamMemberCard.js:5-27, src/components/ContributorCard.js:5-26
Profile Card Data Flow
The following sequence shows how a ContributorCard renders data fetched from the external API via the page controller.
This sequence demonstrates the simple data injection pattern used by profile-related card components.
Sources: src/components/ContributorCard.js:5-26, src/pages/ContributorsPage.js:33-40
Visual Effects Implementation
GlowingEffect Component
The GlowingEffect is the engine behind the interactive borders of all cards. It uses mouse/pointer proximity to calculate angles and activate CSS variables.
- Logic: It calculates the distance from the center of the element and the angle of the pointer relative to that center to update the
--startand--activeCSS variables. - Implementation: Uses
requestAnimationFramefor performance and themotionlibrary for smooth angle transitions.
// src/components/ui/glowing-effect.js:63-71
const currentAngle = parseFloat(element.style.getPropertyValue("--start")) || 0;
let targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90;
const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
const newAngle = currentAngle + angleDiff;
animate(currentAngle, newAngle, {
duration: movementDuration,
onUpdate: (value) => { element.style.setProperty("--start", String(value)); },
});
Sources: src/components/ui/glowing-effect.js:5-135
Component Property Specifications
The following table details the required props for each card component in the library.
| Component | Prop | Type | Description |
|---|---|---|---|
DocCard | doc | Object | Documentation metadata (category, name, title) |
InfoCard | title | String | Bolded heading text |
InfoCard | description | String | Supporting body text |
TeamMemberCard | name | String | Name of the team member |
TeamMemberCard | githubUrl | String | URL to their GitHub profile |
ContributorCard | contributor | Object | GitHub user data including contributions count |
Sources: src/components/DocCard.js:5, src/components/InfoCard.js:5, src/components/TeamMemberCard.js:5, src/components/ContributorCard.js:5
Conclusion
The Card Component Library provides a standardized, interactive UI layer for the SuperClaude website. By abstracting complex CSS effects (like the conic-gradient glowing borders) into the GlowingEffect component, the library allows for clean, data-driven card implementations that maintain visual consistency across diverse data types.