---
title: "Membership card"
description: "A member's studio membership: plan and price, class credits and firing allowance as meters, the card on file, and pause, change plan and cancel, each confirmed in the card."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/membership-card
---

# Membership card

A member's studio membership: plan and price, class credits and firing allowance as meters, the card on file, and pause, change plan and cancel, each confirmed in the card.

The plan and its price with the next renewal and a status badge (Active, Paused until 24 Nov, Ends 30 Nov), then what's left this period as meters: class credits (6 of 8 left) and the firing allowance in kiln shelves, and the card on file. Pause opens a short section in the card: a start date from a calendar (today until the period's last day), the 2 weeks it covers, how far the next charge moves and which booked classes it cancels, returning their credits. Once saved the badge reads Paused until 24 Nov and Resume now takes the actions' place. Change plan picks another plan from a Select and says what changes and when: a dearer plan starts today for the difference, prorated to the renewal, with the extra credits and shelves at once; a cheaper one starts at the renewal, with Keep in the card until then. Cancel says what the member keeps until the period ends and takes an optional reason; Keep membership undoes it. Each change shows a spinner in its button while it saves, then moves focus to the card's first action and announces the result. A failed save says so where it was asked for, with Retry; in the sample the first change fails once. Escape closes an open section.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/membership-card
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, badge, button, calendar, card, field, meter, popover, select, spinner, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More settings blocks

All 13, with install commands: https://ui.edbn.me/docs/blocks/settings (Markdown: https://ui.edbn.me/docs/blocks/settings.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt