For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A KPI whose trend over time is plotted, with a period switcher or tooltips: use the Area Chart blocks
- A whole overview page: a header, a row of KPI tiles, then a work list or trend panel: use the Dashboard blocks
Agent notes
- Every block centers itself in a padded
min-h-svhwrapper in page.tsx or its root component; remove it when the card goes inside your own page
Third-party API docs
- Base UI v1: API reference, docs, llms.txt, used by 1 of 43 blocks
https://web.dev.reui.io/blocks/application/card.mdsearch({ query: "card", type: "block", category: "card" })Shadcn Card Blocks Built on the ReUI Frame
The free shadcn Card gives you a container with a header and a body. This category is about what fills it, and about what happens when a dozen of them sit on the same dashboard. Most blocks here are grids rather than single cards, tuned so alignment, value size, and label weight hold across a row instead of drifting per tile.
The visual language is the ReUI Frame and its FramePanel: a bordered outer surface with concentric inner panels, often over a masked dot grid, halftone, or square mesh pattern. Because the radius and border geometry come from the Frame, a KPI grid, a logo wall, and a profile card can share a page and still read as one system.
Several grids use container queries rather than viewport breakpoints, flowing from one to four columns based on the width of their own container. That matters when you drop a card grid into a sidebar, a split pane, or a narrow dashboard column instead of a full width page.
All Card Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Brand Logo Grid Brand logo grid card with centered icon tile and linked name per company
- Feature Highlights Feature highlights grid of icon-tile cards with a faded dot-pattern background
- Investor Profile Investor profile card with availability badge, stats strip, and ranked funding sources list
- KPI Report Links Colorful dark KPI stat cards with trend badge, grid-mesh background, and footer report link
- Integration Connector Integration Cards with Brand Logo, Connector Diagram, and Tier Badge over a Dotted Backdrop
- Numbered Setup Steps Numbered setup-step card grid with ordinal labels and a responsive one to four column Frame layout
- Detail Fact Tiles Detail stat card grid with label, value, and swappable logo, badge, or avatar group accent
- Service Status Tiles Service status card grid with icon box, linked title, color-coded status dot and timestamp
- Applicant Record Applicant profile card with detail columns, copy-action contact fields, and skill badges
- Report Updates Color-tinted stacked Frame cards with date header, actions menu, and category badges
- Notice Cards Minimal text-only notice card grid with accent label and faded dot-pattern background
- Quick Link Tiles Compact icon-and-title link card grid, no description text, built on ReUI Frame
- Partner Showcase Two-column card grid with link title, description, and a row of bordered logo chips
- Delivery Tracking Delivery tracking card with icon-labeled detail rows, status badge, header menu, and notes section
- Meeting Agenda Cards Meeting cards grid with attendee avatars, duration badge, and a Join Meeting link
- Installed Integration Dark integration app card with patterned header, status badge, ellipsis menu and avatar group
- Shortcut Launcher Shortcut cards grid with colored icon tiles, dotted canvas backdrop, and a labeled action link
- Source Link Cards Compact info card grid with icon-label header, description, and source link in framed panels
- Crypto Price Quote Crypto asset price card with ticker, large quote, percent-change delta and Follow plus Trade actions
- Help Center Guides Help center guide cards grid with colored icon badge and bordered article link list
- Project Deadline Cards Project task cards grid with client name, due-date countdown, and share action
- Upsell Promo Centered promo card with overlapping tilted image pair, pill badge, and rounded CTA button
- Uptime Monitoring Promo AI monitoring promo card with stacked Frame, 24/7 uptime metric, integration logo tiles, and CTA
- Job Recommendation Recommended job role card with company logo, location, work mode, and salary meta row
- Account Balances Account balance summary card grid with colored icon tiles and signed percent-change indicators
- Linked Metric Tiles Three-column metric card grid with icon-and-label headers and linked titles in framed panels
- Application Summary Horizontal application summary card with labeled metadata columns, status dot, and team avatar group
- Shared KPI Panels KPI metric card grid with two-tone numeric values and per-panel trend Badge with period label
- KPI Area Charts KPI metric stat grid in a bordered frame with per-cell area charts and trend badges
- Logistics KPI Tiles Stat card grid with icon tile, actions menu, and trend badge per metric
- Audience Reach Stats KPI stat cards in a responsive grid with faded line-grid backgrounds and glossy colored icon tiles
- Compliance Strip Horizontal stats summary card with labeled metric columns, status icons, and a team avatar group
- Inventory Counters Inventory stat card grid with gradient icon badge, dotted backdrop, and per-card actions menu
- Period Trend KPIs KPI metric cards with bold value, faint decimal fraction, and up or down trend badge per period
- Deal Invoice Tiles KPI stat card grid with metric label, large value, and halftone dot-pattern backdrop
- Sales Outreach Counters KPI stat card grid with big metric over label and a masked dot-grid backdrop
- Company Snapshot Compact KPI stat tile grid with muted labels and green metric icons
- Profile Stat Strip Horizontal stat strip card with divided metric columns and a dotted accent cell
- Resource Hub Cards Icon-badge resource card grid linking to help, docs, and platform sections
- Fitness Stats Compact two-column metric stat grid with large value, unit, and muted label tiles
- Topic Shortcuts Topic Link Card Grid with Colored Icon Tiles and Hover Title Links
- Customer Profile Profile card with verified name, online badge, team avatar group, stats row, and connect button
- Contributor Portfolio Profile card with cover banner, verified avatar, and horizontal project portfolio rail
The Five Card Clusters in This Category
- KPI and metric grids a large value over a muted label with a trend Badge carrying percent and period. Variants add per cell area charts, two tone values with a faint decimal tail, glossy colored icon tiles, or an actions menu per tile.
- Brand logo and integration walls compact logo tiles for partners, tech stack, and sponsors, plus integration cards with a dashed connector diagram and tier badge, and a dark app marketplace card with an avatar group and connect button.
- Profile and people cards investor, applicant, contributor, and contact cards with avatars, online and verified markers, three column stats strips, skill Badge rows, copy action contact fields, and a horizontal portfolio rail in a ScrollArea.
- Record and detail cards delivery tracking with icon labeled detail rows, a crypto or stock quote card with a percent delta and trade actions, meeting cards with attendee avatars and a join link, job recommendations with a salary meta row, and project cards with a due countdown.
- Link and shortcut grids icon tile cards for help center topics, docs hubs, category tiles, and quick launchers, with the whole card acting as the link and proper hover and focus ring states.
Stat Tiles Without a Chart Library
A large share of this category is metric tiles: value, label, delta. Some pair the number with a small area chart inside the cell, some use a segmented or dotted accent instead, and several are pure typography over a patterned panel. If you need a plotted series, use Charts. If you need a single richer metric panel with a progress meter, a breakdown, or its own range filter, use Stats.
Horizontal variants matter as much as grids. There is a stat strip with equal divided columns and hairline dividers, and single row summary cards that spread labeled metrics across columns with a status dot and a trailing team avatar group. Those work well as a page header above a table or a chart.
Primitives These Cards Are Built From
Blocks compose the ReUI Frame and Badge with shadcn Item, Avatar, Button, DropdownMenu, Separator, and AspectRatio. Installing a block pulls those dependencies through the registry, so you are adding components you can already read the docs for rather than a private card implementation.
- Header treatments include icon and label rows, uppercase date headers, patterned dark banners, and cover images with a ring avatar.
- Action affordances include kebab menus, footer report links, chevron action links, copy icon buttons, and full width outline buttons.
- Backgrounds include faded dot patterns, halftone dots, square mesh grids, grid mesh on color, and plain surfaces for dense dashboards.
Related Shadcn Application Block Categories
Card grids rarely ship alone. These are the categories teams most often combine them with.
- Stats (17) Single purpose KPI cards and metric panels with gauges, meters, breakdowns, and range filters.
- Charts (47) Bar, line, pie, and area chart layouts for plotted series and data storytelling.
- Dashboard (8) Complete overview screens that combine stat tiles, charts, and tables into one page.
- List (11) List layouts for contacts, records, activity rows, and compact action surfaces.
- Profile (10) Full profile pages with avatars, bios, activity feeds, and account sections.
- Empty State (14) No data placeholders and recovery actions for when a card grid has nothing to show.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
How is this different from the free shadcn Card component?
Can I use these card blocks for dashboard KPIs?
How do I install a card block?
Do these work with Next.js, Vite, and my Tailwind setup?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.