# Shadcn Card blocks > Card components for content display, data summaries, and interactive elements. - Type: Pro blocks (Application) - Page: https://web.dev.reui.io/blocks/application/card - Blocks: 43 - Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup ## When to use - Rows and grids of KPI tiles, each a value and a label with an optional trend badge or icon - Grids of small linked cards for features, setup steps, guides, integrations or partner logos - One record or offer per card: a profile, applicant, delivery, meeting, job, asset price or promo ## When not to use - A metric panel with a progress bar, a segmented gauge or supporting rows under the total: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md) - A KPI whose trend over time is plotted, with a period switcher or tooltips: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md) - A whole overview page: a header, a row of KPI tiles, then a work list or trend panel: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md) ## Agent notes - Every block centers itself in a padded `min-h-svh` wrapper in page.tsx or its root component; remove it when the card goes inside your own page ## Third-party libraries - Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), used by 1 of 43 blocks ## Blocks - [Brand Logo Grid](https://web.dev.reui.io/blocks/application/card/card-1.md): Brand logo grid card with centered icon tile and linked name per company. Best for a logo only wall that runs 5 across, each brand centered in an inverse panel above its linked name. - [Feature Highlights](https://web.dev.reui.io/blocks/application/card/card-2.md): Feature highlights grid of icon-tile cards with a faded dot-pattern background. Best for feature tiles with an elevated icon, a linked title and a one line blurb over a faded dot pattern. - [Investor Profile](https://web.dev.reui.io/blocks/application/card/card-3.md): Investor profile card with availability badge, stats strip, and ranked funding sources list. Best for a fundraising contact: photo tile, deal, ticket and fund size stats, 3 funding sources with amounts and a proposal button. - [KPI Report Links](https://web.dev.reui.io/blocks/application/card/card-4.md): Colorful dark KPI stat cards with trend badge, grid-mesh background, and footer report link. Best for fixed width tiles on saturated color panels, each a big figure, a trend badge and a full report footer link. - [Integration Connector](https://web.dev.reui.io/blocks/application/card/card-5.md): Integration Cards with Brand Logo, Connector Diagram, and Tier Badge over a Dotted Backdrop. Best for integration tiles where a brand logo sits on a dashed connector between 2 icons, with a plan tier badge. - [Numbered Setup Steps](https://web.dev.reui.io/blocks/application/card/card-6.md): Numbered setup-step card grid with ordinal labels and a responsive one to four column Frame layout. Best for a setup sequence of 4 numbered steps, 0.1 to 0.4, each a muted ordinal over a title and one sentence. - [Detail Fact Tiles](https://web.dev.reui.io/blocks/application/card/card-7.md): Detail stat card grid with label, value, and swappable logo, badge, or avatar group accent. Best for fact tiles for a company, endpoint, session and social handle, with an optional logo, Running badge or avatars. - [Service Status Tiles](https://web.dev.reui.io/blocks/application/card/card-8.md): Service status card grid with icon box, linked title, color-coded status dot and timestamp. Best for service health tiles with an icon box, a colored status dot and label, and a last backup or run time. - [Applicant Record](https://web.dev.reui.io/blocks/application/card/card-9.md): Applicant profile card with detail columns, copy-action contact fields, and skill badges. Best for a horizontal applicant record in labeled columns, with copy buttons on mobile and email and skill badges. - [Report Updates](https://web.dev.reui.io/blocks/application/card/card-10.md): Color-tinted stacked Frame cards with date header, actions menu, and category badges. Best for pastel tinted report cards with an uppercase date header, an Edit and Duplicate menu and 3 topic badges. - [Notice Cards](https://web.dev.reui.io/blocks/application/card/card-11.md): Minimal text-only notice card grid with accent label and faded dot-pattern background. Best for text only notices with an accent label such as Reminder or Tip over one line of copy, with no icons or links. - [Quick Link Tiles](https://web.dev.reui.io/blocks/application/card/card-12.md): Compact icon-and-title link card grid, no description text, built on ReUI Frame. Best for whole card links holding only an icon and a title, 6 finance shortcuts with hover and focus ring states. - [Partner Showcase](https://web.dev.reui.io/blocks/application/card/card-13.md): Two-column card grid with link title, description, and a row of bordered logo chips. Best for partner groups such as sponsors and affiliates, each a title, a blurb and a row of 4 bordered logo chips. - [Delivery Tracking](https://web.dev.reui.io/blocks/application/card/card-14.md): Delivery tracking card with icon-labeled detail rows, status badge, header menu, and notes section. Best for one shipment's delivery address with a Home badge, a timing row, a tracking number and a driver proof of delivery note. - [Meeting Agenda Cards](https://web.dev.reui.io/blocks/application/card/card-15.md): Meeting cards grid with attendee avatars, duration badge, and a Join Meeting link. Best for meeting agenda cards with start time, a duration badge, an avatar stack and a Google Meet or video join link. - [Installed Integration](https://web.dev.reui.io/blocks/application/card/card-16.md): Dark integration app card with patterned header, status badge, ellipsis menu and avatar group. Best for an installed integration tile under a dark dotted header band, with a Live badge, user avatars and a guide button. - [Shortcut Launcher](https://web.dev.reui.io/blocks/application/card/card-17.md): Shortcut cards grid with colored icon tiles, dotted canvas backdrop, and a labeled action link. Best for shortcut tiles with solid color icon tiles over a canvas dot field and a chevron link such as View Orders. - [Source Link Cards](https://web.dev.reui.io/blocks/application/card/card-18.md): Compact info card grid with icon-label header, description, and source link in framed panels. Best for source cards with an icon and label header, a short summary and a link that shows a shortened source URL. - [Crypto Price Quote](https://web.dev.reui.io/blocks/application/card/card-19.md): Crypto asset price card with ticker, large quote, percent-change delta and Follow plus Trade actions. Best for a market quote for one asset: ticker line, USD price with its percent and dollar gain, update stamp, Follow and Trade. - [Help Center Guides](https://web.dev.reui.io/blocks/application/card/card-20.md): Help center guide cards grid with colored icon badge and bordered article link list. Best for help topic cards that each end in a bordered list of 2 guide links with arrow icons. - [Project Deadline Cards](https://web.dev.reui.io/blocks/application/card/card-21.md): Project task cards grid with client name, due-date countdown, and share action. Best for project cards for client work with a share button, the client name and a due in countdown such as 1d 18h. - [Upsell Promo](https://web.dev.reui.io/blocks/application/card/card-22.md): Centered promo card with overlapping tilted image pair, pill badge, and rounded CTA button. Best for a centered upsell with 2 tilted overlapping thumbnails, a pill badge, a headline and a rounded demo button. - [Uptime Monitoring Promo](https://web.dev.reui.io/blocks/application/card/card-23.md): AI monitoring promo card with stacked Frame, 24/7 uptime metric, integration logo tiles, and CTA. Best for a 2 panel promo whose top panel pairs a large 24/7 figure with 4 AI tool logo tiles, then a headline and start button. - [Job Recommendation](https://web.dev.reui.io/blocks/application/card/card-24.md): Recommended job role card with company logo, location, work mode, and salary meta row. Best for a profile matched job opening with a dark logo tile, a 3 fact row ending in pay, Quick Apply and View Details. - [Account Balances](https://web.dev.reui.io/blocks/application/card/card-25.md): Account balance summary card grid with colored icon tiles and signed percent-change indicators. Best for account balance tiles in USD with a type label and a teal or rose change shown as percent and amount. - [Linked Metric Tiles](https://web.dev.reui.io/blocks/application/card/card-26.md): Three-column metric card grid with icon-and-label headers and linked titles in framed panels. Best for category cards whose header carries an icon and a metric label above a linked section title and summary. - [Application Summary](https://web.dev.reui.io/blocks/application/card/card-27.md): Horizontal application summary card with labeled metadata columns, status dot, and team avatar group. Best for a horizontal record row with a Ready status dot, a domain with a Main badge, timing and a team avatar stack. - [Shared KPI Panels](https://web.dev.reui.io/blocks/application/card/card-28.md): KPI metric card grid with two-tone numeric values and per-panel trend Badge with period label. Best for shared surface KPI panels: two tone figures with faded decimals over a label, then a period trend badge. - [KPI Area Charts](https://web.dev.reui.io/blocks/application/card/card-29.md): KPI metric stat grid in a bordered frame with per-cell area charts and trend badges. Best for one bordered KPI grid split into cells, each with an icon, a two tone figure, a delta badge and a decorative indigo area wedge. - [Logistics KPI Tiles](https://web.dev.reui.io/blocks/application/card/card-30.md): Stat card grid with icon tile, actions menu, and trend badge per metric. Best for logistics KPI tiles with an icon box, an Edit, Copy link and Delete menu, and a status badge under each figure. - [Audience Reach Stats](https://web.dev.reui.io/blocks/application/card/card-31.md): KPI stat cards in a responsive grid with faded line-grid backgrounds and glossy colored icon tiles. Best for audience reach cards for followers, stars and downloads: a glossy color icon tile above a large figure and label. - [Compliance Strip](https://web.dev.reui.io/blocks/application/card/card-32.md): Horizontal stats summary card with labeled metric columns, status icons, and a team avatar group. Best for a horizontal compliance strip of ratio metrics such as 42 of 73 controls, with status icons and a team column. - [Inventory Counters](https://web.dev.reui.io/blocks/application/card/card-33.md): Inventory stat card grid with gradient icon badge, dotted backdrop, and per-card actions menu. Best for inventory counters with a black glossy icon tile, a linked title over a per unit count and a 3 item actions menu. - [Period Trend KPIs](https://web.dev.reui.io/blocks/application/card/card-34.md): KPI metric cards with bold value, faint decimal fraction, and up or down trend badge per period. Best for separate KPI cards whose label sits in a header band above a two tone figure and a period trend badge. - [Deal Invoice Tiles](https://web.dev.reui.io/blocks/application/card/card-35.md): KPI stat card grid with metric label, large value, and halftone dot-pattern backdrop. Best for deal and invoice tiles with only a muted label above a bold figure, on a halftone dot pattern. - [Sales Outreach Counters](https://web.dev.reui.io/blocks/application/card/card-36.md): KPI stat card grid with big metric over label and a masked dot-grid backdrop. Best for sales outreach counters with the bold figure first and the muted label under it, on a dot grid. - [Company Snapshot](https://web.dev.reui.io/blocks/application/card/card-37.md): Compact KPI stat tile grid with muted labels and green metric icons. Best for a 6 tile company snapshot of MRR, revenue, customers, growth, order value and founding date with green icons. - [Profile Stat Strip](https://web.dev.reui.io/blocks/application/card/card-38.md): Horizontal stat strip card with divided metric columns and a dotted accent cell. Best for a compact 4 column profile stat strip, value over label with hairline dividers and a dotted last cell. - [Resource Hub Cards](https://web.dev.reui.io/blocks/application/card/card-39.md): Icon-badge resource card grid linking to help, docs, and platform sections. Best for resource hub cards with a muted icon box, a linked title and a full sentence summary on onboarding, security and support. - [Fitness Stats](https://web.dev.reui.io/blocks/application/card/card-40.md): Compact two-column metric stat grid with large value, unit, and muted label tiles. Best for a 2 by 2 tile grid of figures with a unit suffix such as bpm or km, for fitness and activity readouts. - [Topic Shortcuts](https://web.dev.reui.io/blocks/application/card/card-41.md): Topic Link Card Grid with Colored Icon Tiles and Hover Title Links. Best for topic shortcuts with a small solid color icon tile, a linked title and a short one line summary, 4 across. - [Customer Profile](https://web.dev.reui.io/blocks/application/card/card-42.md): Profile card with verified name, online badge, team avatar group, stats row, and connect button. Best for a customer profile with an online avatar badge, verified check, team avatars, an order stats strip and Connected state. - [Contributor Portfolio](https://web.dev.reui.io/blocks/application/card/card-43.md): Profile card with cover banner, verified avatar, and horizontal project portfolio rail. Best for a contributor profile with a desaturated cover banner, verified name, View Profile button and a scrolling project rail. Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.