react ~5 KB 0 deps v0.1.0 ↗ GitHub ↗ Updated May 8, 2026

@mshafiqyajid/react-card

Headless card hook and styled component. Four variants, six tones, clickable with keyboard support, header/body/footer sub-components.

Playground #

Elevated

Surface card with subtle shadow and border.

Filled Primary

Filled variant with primary tone background tint.

Outlined Success

Clickable card — try hovering or pressing.

Card title

This is the card body. It can hold any content — text, images, actions, or other components.

Props

variant

size

tone

radius

shadow

TSX

import { CardStyled } from "@mshafiqyajid/react-card/styled";
import "@mshafiqyajid/react-card/styles.css";

<CardStyled />

Install #

npm install @mshafiqyajid/react-card

Quick start #

import { CardStyled } from "@mshafiqyajid/react-card/styled";
import "@mshafiqyajid/react-card/styles.css";

// Simple card with shorthand slots
<CardStyled header="Title" footer="Footer">
  Card body content.
</CardStyled>

// Clickable card with tone
<CardStyled
  variant="outlined"
  tone="primary"
  clickable
  onClick={() => console.log("clicked")}
>
  Interactive card
</CardStyled>

// Selectable card (controlled)
<CardStyled
  clickable
  selected={isSelected}
  onSelect={setIsSelected}
>
  Toggle me
</CardStyled>

Sub-components #

import { Card } from "@mshafiqyajid/react-card/styled";
import "@mshafiqyajid/react-card/styles.css";

// Use Card.Header / Card.Body / Card.Footer for full control
<Card variant="elevated" size="lg">
  <Card.Header>
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <strong>Project Alpha</strong>
      <span>Active</span>
    </div>
  </Card.Header>
  <Card.Body>
    <p>Project description with custom layout inside the body.</p>
  </Card.Body>
  <Card.Footer>
    <button>View details</button>
  </Card.Footer>
</Card>

As a link #

// Renders as <a> automatically when href is provided
<CardStyled href="/projects/alpha" tone="info" variant="outlined">
  Link card — full keyboard accessible
</CardStyled>

Headless #

import { useCard } from "@mshafiqyajid/react-card";

function MyCard() {
  const { cardProps, isSelected, isFocused } = useCard({
    clickable: true,
    defaultSelected: false,
    onSelect: (selected) => console.log("selected:", selected),
  });

  return (
    <div
      {...cardProps}
      className={`my-card ${isSelected ? "my-card--selected" : ""}`}
    >
      Custom card
    </div>
  );
}

API — CardStyled / Card #

Prop	Type	Default	Description
variant	"elevated" \| "outlined" \| "filled" \| "ghost"	"elevated"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Controls padding of header, body, and footer
tone	"neutral" \| "primary" \| "success" \| "warning" \| "danger" \| "info"	"neutral"	Color accent applied to border and (filled) background
shadow	"none" \| "sm" \| "md" \| "lg"	auto	Box shadow. Defaults to `sm` for elevated, `none` otherwise
radius	"none" \| "sm" \| "md" \| "lg"	"md"	Border radius
clickable	boolean	false	Adds button role, keyboard handling, and hover/active styles
selected	boolean	—	Controlled selected state (shows indigo border)
defaultSelected	boolean	false	Uncontrolled initial selected state
disabled	boolean	false	Disables all interactions, reduces opacity
onClick	(e: MouseEvent) => void	—	Click handler
onSelect	(selected: boolean) => void	—	Called with new selected state on each toggle
href	string	—	Renders root as `<a>`
as	ElementType	"div"	Polymorphic element override
header	ReactNode	—	Shorthand for `Card.Header` content
footer	ReactNode	—	Shorthand for `Card.Footer` content
loading	boolean	false	Replaces children with a skeleton shimmer placeholder
hoverable	boolean	false	Adds hover lift effect without full clickable button semantics
bordered	boolean	false	Forces a visible border on filled and ghost variants
compact	boolean	false	Reduces padding to ~60% of the size-based default
className	string	—	Extra class on the root element
style	CSSProperties	—	Inline style override

API — Sub-components #

Component	Prop	Type	Description
Card.Header	children	ReactNode	Header content; gets a bottom border and bold weight
Card.Body	children	ReactNode	Main content area; receives padding from size prop
Card.Footer	children	ReactNode	Footer content; gets a top border
All	className, style	string / CSSProperties	Class and style overrides

API — useCard hook #

Option	Type	Description
clickable	boolean	Enable button semantics and keyboard handling
selected	boolean	Controlled selected state
defaultSelected	boolean	Uncontrolled initial selected state
disabled	boolean	Suppress all events
onClick	(e: MouseEvent) => void	Click callback
onSelect	(selected: boolean) => void	Selection change callback

Returns cardProps (spread onto your element), isSelected, and isFocused.

Edit this page on GitHub