Cards and panels

477 components, 458 with React code

The largest category: content cards, integration cards, settings panels, plan rows, activity feeds and summary panels that fill the space between charts and tables.

Overview gridsIntegrations and connections pagesSettings and billing sections

Workspace, W component preview
Workspace, WLoopoCodeFree
Account component preview
AccountLoopoCodeFree
Schedule cards component preview
Schedule cardsLoopoCodeFree
Day grid component preview
Day gridLoopoCodeFree
Time row component preview
Time rowLoopoCodeFree
Readability component preview
ReadabilityLoopoCodeFree
Exit rule component preview
Exit ruleLoopoCodeFree
Note component preview
NoteLoopoCodeFree
Filter chips component preview
Filter chipsLoopoCodeFree
Pagination component preview
PaginationLoopoCodeFree
Action, Unsubscribe component preview
Action, UnsubscribeLoopoCodeFree
Devices component preview
DevicesLoopoCodeFree
Schedule component preview
ScheduleLoopoCodeFree
Draft note component preview
Draft noteLoopoCodeFree
Stripe integration card component preview
Shopify integration card component preview
Square POS integration card component preview
Slack integration card component preview
Google Analytics integration card component preview
PayPal integration card component preview
Instagram integration card component preview
Meta Ads integration card component preview
WordPress integration card component preview
Webflow integration card component preview
Browse and filter all 477

Every cards and panels component, by system

Loopo70

MailPulse91

Auton53

Veriq61

Vantage171

Questions

Why so many card components?

Each was harvested from a real product screen, so cards come in the shapes products actually need rather than one generic card with slots.

Can I change the colours?

Yes. Every component reads the system tokens, so switching the token file changes the whole look.

Guides