shadcn.io is not affiliated with official shadcn/ui
Rounded Tile Card Grid Features Block for React
Six rounded feature tiles for a team workspace, each led by a small greyscale interface in a muted well (a room, a gauge, sharing levels, a branch, a thread, a reminder) instead of an icon, in hairline frames with plus marks.
Installation
Overview
A feature grid of rounded tiles for React with Base UI. Six tiles for a team workspace sit under a centred header, three across from lg, two from sm and one on a phone. Each tile leads with a small interface drawn in greyscale inside a muted well: a room with its people and a typing chip, a capacity gauge, three sharing levels with one chosen, a document branch that rejoins the main line, a comment thread with its Resolve chip and a reminder with its switch. Its title and two lines of copy sit under the well, and the tile stands in a hairline frame with + marks on its corners, the lines running a little past them. The drawings are decoration: they are hidden from assistive technology and inert, and the title and sentence carry the meaning. It's built from Guides and plain CSS, with SVG for the gauge and the branch, and your theme's tokens for every colour. For product pages that want a grid of habits rather than a grid of icons.
FAQ
How do I change a tile's drawing?
Each drawing is its own small component (RoomDrawing, GaugeDrawing, SharingDrawing, BranchDrawing, ThreadDrawing, ReminderDrawing) passed to Tile as its children, so swap one for your own. The gauge is driven by LOAD, and the branch by two arrays of node heights. All of them use the same few ingredients (a bordered card, skeleton bars, initials, one filled chip) so a new one will match.
Where is the colour?
There is none: the drawings are greyscale from the theme's tokens, and the single filled element in each (the speaker, the chosen level, the Resolve chip, the switch) is the foreground colour. The primary colour stays free for your own call to action, and the tiles look the same under any preset.
Are the drawings accessible?
They are aria-hidden and inert, so a screen reader hears only each tile's title and sentence, and Tab skips them. The gauge's SVG still carries a title for tools that read inside it. Each tile is a list item, so the six are announced as a list.
What are the lines around each tile?
Each tile sits in a frame drawn by Guides: four hairlines at the cell's edge that run a few pixels past the corners, with a + on each corner. The tile inside has its own rounded border, so the frame reads like a mount. The page's side rails and top rule come from the same component, so the block lines up with its neighbours.
Related
- Pro
Floating Icon Sextet Features
Card gridsSix features of a cloud-storage app on a framed stage, each an icon tile floating at its own height in a wave that lifts on hover or focus, with a title, a sentence and a link under it.
- Pro
Framed Preview Card Trio Features
Card gridsThree tall cells, each opening with a framed greyscale drawing: a photo contact sheet, a shoot timeline and a comment thread.
- Pro
Aspect Ratio Mockup Cards Features
Card gridsA six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.
- Pro
With Logos Trust Row Features
Proof and comparisonsA features section for a team workspace: a 2 by 3 of feature cells in shared hairlines, each led by a small drawing, then a trust row of five customer cells, each with a fictional wordmark and the result that customer measured.
- Pro
Bento Grid Features
BentosA bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.
- Pro
Animated Icons Features
Card gridsA three-by-three grid of hand-drawn SVG icons that each play their own animation on hover, keyboard focus or tap: a bell rings, a check draws, an arrow uploads.