Skip to content
syntaqx

Components · Data display

Card

shadcn's Card: a header, content and footer in one rounded panel, in two sizes, with a title that can be a real heading.

Deploy key
Read-only access to one repository.

Added 12 days ago, last used 3 hours ago from a CI runner.

Installation

npx shadcn@latest add https://www.syntaqx.com/r/card.json

Changes from shadcn

It installs over shadcn's Card and keeps its API, variants and data-slots, so code written for it keeps working. On top of that:

  • asChild on CardTitle, so the title can be a heading (<CardTitle asChild><h2>) and the page's outline includes it.

Examples

Small, with ruled header and footer

size="sm" tightens the spacing for a sidebar. A border-b on the header and a border-t on the footer run edge to edge, since the card pads its sections, not itself. asChild makes the title an h2, so it shows up in the page's outline.

How it works

  1. Your browser encrypts the secret with a key it makes.
  2. Only the ciphertext is sent; the key stays in the link.
  3. The server deletes it the moment it's read.
Up to 64 KB per secret.