Primitives

Card

Surface container in 3 variants and 3 sizes. Near black with a border that lights up on hover. The header wraps instead of clipping.

view .md

Preview

latest postapr 12 · 1 min

Plain markdown beats Notion.

Two years of notes moved out of a database and into plain text and git. What held up.

read →draft

open-source-kitFEATURED

Components, in React.

A dark-first kit of typed primitives. Copy-paste, own the source, ship faster.

shipped 2025-11github ↗

oss '26+11

repos shipped

consistentupdated 21:14

Installation

terminal

bash

npx @entrepta/cli@latest add card

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

card.tsx

tsx

import {
  Card, CardHeader, CardLabel, CardMeta, CardTitle,
  CardDescription, CardFooter, CardNote,
} from "@/components/entrepta/card"

<Card>
  <CardHeader>
    <CardLabel>latest post</CardLabel>
    <CardMeta>apr 12 · 1 min</CardMeta>
  </CardHeader>
  <CardTitle>
    Plain markdown beats <em>Notion</em>.
  </CardTitle>
  <CardDescription>Two years of notes, back in plain text.</CardDescription>
  <CardFooter>
    <span>read →</span>
    <CardNote>draft</CardNote>
  </CardFooter>
</Card>

Props

Prop	Type	Default	Description
variant	"default" \| "featured" \| "data"	"default"	Background and border style
size	"sm" \| "md" \| "xl"	"md"	Padding, gap and radius
as	"span" \| "h2" \| "h3"	"span"	Render CardLabel as a heading (CardLabel only)
icon	Icon \| ReactElement	-	A Phosphor icon, or an icon element, in front of the label (CardLabel only)