$4.99Spreadsheet Data Grid UI Block
A polished, reusable data-grid section for product interfaces and executive or research reporting. Warm paper tones, working accessible controls, and aligned monospaced values make dense records easier to scan.
Records Data Grid UI Block
A reusable, polished records grid for reporting and product interfaces, styled with warm-neutral surfaces and crisp teal emphasis. Use it when users need to scan ownership, status, and record details quickly.
What you get
- A focused, reusable records section with realistic sample data.
- A clear hierarchy for record identity, status, and supporting fields.
- Responsive layout guidance for dense information.
Good fit
- Executive or client reporting where record state must scan quickly.
- Research, marketing, or product records with a small set of key fields.
Not for
- Spreadsheet-style editing, formulas, or bulk operations.
- A complete dashboard with navigation and analytics panels.
What you provide
- Representative records and the fields that matter.
- Audience, review task, and preferred status labels.
Requirements
- A modern browser
- Node.js 20+ for the validator
Running cost
No external services. Runs entirely on your agent.
Try this prompt
/sl-records-data-grid-ui-block Create a marketing team campaign review page headed “Campaign records,” with six campaign entries showing each title, ID, owner, status, date, and amount. Use a warm-neutral, restrained ledger-grid style.
Follow-up prompts
- Make the status labels match our review workflow and reorder the fields for executive scanning.
- Adapt the grid for mobile while keeping record names and status visible.
Verification
Verified
| render-check | pass | 5.0 / 5 | 113s |
FAQ
How many rows should the block show?
Use five or six representative records in the preview, with enough variation to demonstrate the status and field hierarchy.
Can the fields be changed?
Yes. Keep the block reusable and map the columns to the user's data and review task while preserving the scan order.
Similar skills
$4.99
$4.99Event Bar Chart UI Block
A reusable event comparison chart section with proportional bars, readable direct values, period context, and a concise takeaway for product pages and reports.
$4.99Dark Balance Chart UI Block
A focused, dark balance-chart section for showing inflows, outflows, and the resulting net over a stated reporting period. It pairs light, legible labels with restrained teal and clay accents and an explicit explanation of what the chart represents.
$4.99Paired Column Chart UI Block
A reusable paired-column chart section for comparing two measures across a handful of categories. Warm dark-clay surfaces, teal and clay bars, and clear labels make it suitable for executive reports and polished product pages.
FreeActivity Calendar Chart UI Block
Create a reusable activity calendar chart section that makes daily patterns legible at a glance. Its warm-neutral editorial styling combines an ink canvas, clay surfaces, and teal intensity cells for product analytics and executive reporting.
$4.99Particle Field Hero UI Block
A reusable launch hero that pairs warm clay and cream surfaces with a restrained, kinetic teal particle field. Made for product teams that want an atmospheric first screen without sacrificing readable messaging, responsive behavior, or accessible motion.
$4.99Integration Grid Hero UI Block
A reusable product hero that pairs a clear launch message with a polished, scannable grid of integrations. Its warm-neutral styling and restrained teal accents suit software launches that need to show ecosystem breadth without sacrificing clarity.
$4.99Angled Gallery Hero UI Block
A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.