Diamond Diamond

ui · 6 variants · 1 categories

Card

Versatile entity container — supports media, meta, title, description, footer slots; data-driven or composition.

npx "@rueda.dev/gems-diamond" add card
§01

Display

6 variants
ISSUE 04 · SPRING
Atlas Journal
Seasonal reflections on craft and culture.
hero
$ 28.00 · CERAMIC
Horizon Mug
⋆⋆⋆⋆⋆ 124 reviews
horizontal
AR
Aria Chen
2h ago
Just shipped v3.2 with faster builds.
♡ 42↺ 8💬 12
social
REPORT / 01
On the quiet discipline of shipping.
An essay on cadence, craft, and care.
8 MIN READL. REYES
editorial
NEW FEATURE
Realtime collaboration
See cursors, edits, and comments instantly.
feature
Revenue
$48.2k
▲ 12.4% vs. last month
metric

Usage Guide

How to wire up this component in your app — props, callbacks, customization, and the conventions Diamond shares across the library.

Slots per variant

  • hero / horizontal — media, meta, title, description.
  • editorial — meta, title, description, footer.
  • feature / metric — meta, title, description.
  • social — accepts arbitrary children. Build your own layout inside.

Click-to-act cards

For an entirely clickable card, wrap the Card in a button or anchor and set className="block w-full text-left".

Universal patterns

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

  • variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
  • accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
  • asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
  • className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
  • Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
  • Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.