Skip to content
FelicityUI

Product Card

Product summary surface.

Loading product-card…

Installation

terminal
npx felicityui add product-card --platform react

Usage

example.tsx
import { Button } from "@/components/ui/button"

<Button>Button</Button>

Felicity treatment: paper/ink surfaces, copper accent sparingly, hairline borders.

API Reference

PropTypeDefaultDescription
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Native semantics and keyboard support.
  • Visible focus indicator.
  • Sufficient contrast on semantic token pairs.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent used sparingly, hairline borders, and ruled layouts — not generic SaaS chrome.

  • Server Component compatible unless marked use client.
  • Uses data-slot attributes for anatomy.
  • Focus-visible rings use color.focus.ring.