Search

Search components and blocks

Sign in

Card Blocks

Pricing, profile, and product cards — self-contained surfaces built on shadcn primitives, ready to drop into a page.

Connectors Card

Pro

A settings-panel connector list with real brand marks (via @icons-pack/react-simple-icons) — each logo resolves out of a blur into focus one at a time as the list mounts (the same IconTransition used by the Connect button), while its name and description settle in with their own subtle fade-up a beat later, staggered row by row. Connect runs a real idle → connecting → connected sequence: a spinner while it 'works', then the button turns green with a check once done — independent per row. Hit Replay to reset every connector and watch the whole entrance sequence again.

pnpm dlx shadcn@latest add @ditherui/connectors-card

Connectors

  • Linear

    Linear

    Issues, projects & roadmaps

  • Notion

    Notion

    Docs, wikis & databases

  • Obsidian

    Obsidian

    Local-first knowledge base

  • Slack

    Team channels & DMs

  • Supabase

    Supabase

    Postgres, auth & storage

Props

Entrancerows stagger in; each logo resolves into focus one at a time (not overlapping) via the shared IconTransition blur effect, while the name/description settle in with their own subtle fade-up just after—
Connect buttonidle → connecting (spinner) → connected (green, check) — icon blur-swaps and label crossfades at each step—
Replay buttonremounts the list (via key) and resets every connector back to idle, retriggering the entrance sequence—
className / ...div propsReact.ComponentProps<"div">—

Suggested components