Croupier

Framework-agnostic swipe deck component — Tinder-like card stack for any "one card at a time" triage workflow.

Croupier renders a stack of cards and lets the user triage them one at a time using keyboard arrows, mouse drag, touch drag, or on-screen buttons. It is a self-contained, zero-dependency JavaScript library with no build step required.

The interaction pattern is inspired by the Tinder swipe-card UX, but the API is intentionally domain-agnostic — use it for links, jobs, profiles, tasks, flashcards, or any "decide yes/no on this item" workflow.

Quick start

<script src="https://cdn.jsdelivr.net/gh/nicolaslima/croupier@v1.0.0/dist/croupier.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nicolaslima/croupier@v1.0.0/dist/croupier.css">
<div id="deck"></div>
<script>
const deck = Croupier.create('#deck', {
  items: myItems,
  renderCard: (item) => `<h3>${item.title}</h3><p>${item.desc}</p>`,
  actions: {
    reject: { label: 'Skip',   keys: ['ArrowLeft'],  theme: 'negative' },
    accept: { label: 'Keep',   keys: ['ArrowRight'], theme: 'positive' },
    save:   { label: 'Save',   keys: ['ArrowUp'],    theme: 'neutral' },
  },
  hooks: {
    onAction: ({ action, item }) => console.log(`${action}: ${item.title}`),
  },
});
</script>

Screenshots

Links	Jobs	Profiles	Tasks	Flashcards

Documentation

Croupier documentation follows the Diátaxis framework:

Quadrant	What you'll find
Tutorial	Step-by-step: download, create data, render cards, first use
How-to guides	Practical tasks: embed, customize, add actions
Reference	API docs, design tokens, CSS classes
Explanation	Architecture, animation system, design decisions

Planning docs:

• PRD — Product requirements and vision
• ADRs — Architecture Decision Records
• Specs — Technical specifications
• CHANGELOG — Release history

For AI agents:

• llms.txt — Curated index for AI coding assistants
• llms-full.txt — Full documentation for deep ingestion
• Agent skill — Reusable skill for any code agent

Use cases

Domain	How you'd use it
Link bookmarking	One card per article from RSS / browser tabs
Job posting review	Quickly accept/reject listings
Photo / product curation	Pick keepers from a batch
Quiz flashcard study	Mark each card as known / review
Email triage	Show one email at a time, swipe to archive / reply / star
Inventory QC	Inspect items one by one, flag defects

Keyboard

Key	Action	Default label
←	Reject / dismiss	ARCHIVE
→	Accept / keep	READ
↑	Save for later	SAVE
Z	Undo last action	UNDO
Escape	Cancel in-progress drag	—

Actions and their key bindings are fully configurable. The defaults above are just a preset.

Customization

All colors live in CSS custom properties prefixed with --cr-. Override them to re-skin the component:

:root {
  --cr-accent:        #E8553A;
  --cr-action-accept: #16786E;
  --cr-action-reject: #9E3E2B;
  --cr-action-save:   #E8A33D;
}

Architecture

Single source file (src/croupier.js, ~980 lines). No external dependencies. No React, Vue, jQuery, or build tool. Vanilla HTML/CSS/JS opens in any modern browser.

See the architecture explanation for the full rationale.

Browser support

Modern evergreen browsers. Uses CSS custom properties, color-mix(), WAAPI, AbortController, @layer, @property, and inert — all baseline supported since 2023-2024.

Tested in:

• Chrome / Edge (Chromium) 120+
• Safari 17+
• Firefox 121+

License

MIT. Free to use, modify, and embed.