Card Component
Relevant source files
The following files were used as context for generating this wiki page:
The Card Component is a foundational layout element within the @pcstyle/ui library. It provides a flexible container for grouping related content and actions, featuring built-in support for the library's dual-theme architecture. Depending on the active theme—Cyber or Minimal—the component automatically adjusts its visual styles, including backgrounds, borders, and special effects.
The component is designed to be highly customizable through variants and standard CSS class injections. In the "Cyber" theme specifically, it includes additional decorative elements like top-border gradients to enhance the cyberpunk aesthetic.
Sources: src/components/layout/Card.tsx:1-45, src/index.ts:7
Architecture and Theming
The Card component relies on the UIProvider context to determine its visual state. It utilizes the useUI hook to consume the current theme value, which dictates which style object to apply.
Theme Integration Flow
The following diagram illustrates how the Card component retrieves theme data from the provider to apply specific styles.
A visual representation of the data flow from the UI Context to the Card's conditional styling logic.
Sources: src/provider/index.tsx:36-42, src/components/layout/Card.tsx:17-18
Styling Logic
The component defines two primary style dictionaries: cyberStyles and minimalStyles. Each dictionary contains configurations for the three supported variants: default, glass, and outline.
| Variant | Cyber Style Description | Minimal Style Description |
|---|---|---|
| default | Semi-transparent black background with a neon pink border. | Solid white background with a light zinc border and small shadow. |
| glass | High blur backdrop with subtle neon glow and shadow. | Medium blur backdrop with white border and large shadow. |
| outline | Transparent background with a neon pink border. | Transparent background with a zinc border. |
Sources: src/components/layout/Card.tsx:22-34
Component Definition
Properties (CardProps)
The Card component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to be rendered inside the card. |
className | string | "" | Additional CSS classes for custom styling. |
variant | "default" | "glass" | "outline" | "default" | Determines the visual preset applied to the card. |
Sources: src/components/layout/Card.tsx:6-15
Design Tokens
While the Card uses hardcoded color values for its internal variant logic (e.g., #ff00ff for Cyber), it operates within a system defined by global design tokens. These tokens manage typography, spacing, and radii across the library. For instance, the Card uses a padding of p-6, which corresponds to 1.5rem in the spacing system.
// Example of spacing tokens used by layout components
export const tokens = {
spacing: {
6: "1.5rem", // Standard Card padding
},
radii: {
lg: "8px", // Minimal theme rounded corners
}
};
Sources: src/theme/tokens.ts:47, src/theme/tokens.ts:59, src/components/layout/Card.tsx:20
Visual Effects
The Card component includes conditional rendering for aesthetic enhancements unique to the "Cyber" theme.
Cyber Gradient Top-Border
When the theme is set to cyber and the variant is not outline, a decorative absolute-positioned div is rendered at the top of the card. This creates a horizontal gradient line using the secondary neon pink color (#ff00ff) at 20% opacity.
Diagram showing the conditional logic for rendering theme-specific decorative elements.
Sources: src/components/layout/Card.tsx:40-42, src/theme/colors.ts:9
Implementation Example
import { Card } from "@pcstyle/ui";
export function ProfileCard() {
return (
<Card variant="glass" className="max-w-md">
<h3>User Profile</h3>
<p>Content within the themed container.</p>
</Card>
);
}
Sources: src/components/layout/Card.tsx:1-16
Summary
The Card component serves as a versatile layout container that bridges the gap between raw content and the PCSTYLE design system. By abstracting complex CSS logic for two distinct themes—Cyber and Minimal—into a simple variant API, it ensures visual consistency across the application while allowing for specific customizations through className overrides.