Expandable Card

Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware.

Cards & Expandables · React · Free · MIT · v1.0.1 · updated 2026-10-15 · Live demo

Install

velocityx add expandable-card

Free tier — no licence key needed. MIT: copy it, own it, edit it.

---
import ExpandableCard from '../components/velocity/expandable-card/ExpandableCard.jsx';
---
<ExpandableCard client:visible />

Props

Prop	Type	Default	Description
eyebrow	—	—	—
title	—	—	—
tagline	—	—	—
expandedTitle	—	—	—
description	—	—	—
preview	—	—	—
previewLarge	—	—	—
previewGradient	string	'bg-gradient-to-br from-primary-100 via-primary…	—
ctaPrimary	—	—	—
ctaSecondary	—	—	—
bullets	—	—	—
links	—	—	—
compact	boolean	false	—
mobileBar	boolean	false	—
className	string	''	—
cursorText	string	'Expand'	—

Files written

velocityx drops these into your project:

• components/velocity/expandable-card/ExpandableCard.jsx
• components/velocity/expandable-card/useSheetDrag.js

Peer dependencies

react, react-dom — nothing else. Zero external dependencies is the point.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

MIT. Once installed it is yours — no attribution, no revocation.