docs / patterns / checklist-card

ChecklistCard

a card of short reassurances, each one ticked. for the feature and privacy claims on a landing page, three to five at a time.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

feature and privacy claims on landing pages, three to five itemsa custom marker when the tick reads wrong for the contentnot a todo list. nothing here is interactive or checkableno paragraphs as items. a claim is one line

a11y

a real ul with the item count · markers are aria-hidden · the title is a headingjest-axe

dependencies

Card · List from the same package
live demo · try it out

Privacy

  • Runs entirely on your machine
  • No tracking, no analytics, no accounts
  • Open source, end to end
customize
titleheading above the list, empty to omit
markerdecorative glyph before each item
usagecopy
import { ChecklistCard } from "@usva-ui/react/patterns/checklist-card";

<ChecklistCard
  title="Privacy"
  items={["Runs entirely on your machine", "No tracking, no analytics, no accounts", "Open source, end to end"]}
/>

props

proptypedefaultnotes
itemsReact.ReactNode[]—the claims. strings or nodes.
titleReact.ReactNode—heading above the list. omitted entirely when absent.
markerReact.ReactNodetickoverrides the default tick. decorative either way.

get it

bun add @usva-ui/reactcopy
usagecopy
import { ChecklistCard } from "@usva-ui/react/patterns/checklist-card";

<ChecklistCard
  title="Privacy"
  items={["Runs on your machine", "No tracking", "Open source"]}
/>