shadcn.io is not affiliated with official shadcn/ui
Dark Inset Icon Grid Features Block for React
A card-in-card grid of six capabilities for a team knowledge base, each with an icon tile, a sentence and a row showing which of three plans include it.
Installation
Overview
A plan-aware features section for React with Base UI. A compact header sits above a card in card: a muted shell with + marks on its corners wraps a raised panel that follows your theme, so it is light on a light page and dark on a dark one. Inside, a small legend (filled means included) heads a three-by-two grid of cells that share their hairlines. Each cell is an icon tile, a title, one sentence and a row of the three plans, Free, Team and Business, filled in for the plans that include the capability. It's built from Badge and Guides, with CSS transitions for the entrance. For products with tiers, where the features themselves are the plan comparison.
FAQ
How do I change which plans include a capability?
Each entry in FEATURES has a from number: the index in PLANS of the first plan that includes it. Set it to 0 for every plan, 1 for Team and above, 2 for Business only. Rename the plans by editing PLANS; the row, the fills and the legend follow.
How does a screen reader hear the plan row?
Each plan is a list item that reads "Included in Team" or "Not included in Free": the words are visually hidden and the chip shows only the plan name. The icon tiles are decorative and hidden from assistive technology.
Is the inner panel really dark?
No. The old version forced a dark panel; this one has no dark scope, so the panel follows your theme in light and dark. The muted shell, the shadow and the ring keep it raised in both modes.
How does the grid change by width?
Three columns from lg, two from sm and one on a phone, always with six cells, so every row is full and the hairline colour never shows through a gap. Add or remove cells in multiples of six or three to keep that.
Related
- 010203Pro
Dark Inset Numbered Pillars Features
Card gridsThree numbered pillars on a card in card, each ending in a small drawing: a match bar, a runway sparkline and a stack of approvers.
- Pro
A bento for a security-posture tool in a card in a card that follows your theme: one wide cell with an area chart of the score, and four small cells with a score ring, a ranked findings list, control states and an asset count.
- Pro
Borderless Compact Icon Grid Features
Card gridsA searchable directory of nine capabilities: a search field with a live count marks matches in a borderless 3 by 3 icon grid and quiets the rest, with an empty state when nothing matches.
- Pro
Inset Border Card Grid Features
Live controlsSix ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.
- Pro
Feature Matrix Pricing
Comparison tablesA feature matrix you can interrogate: search the features, hide the rows every plan shares with a switch, and watch a live count in the table's corner, over four chat plans and twenty-eight features.
- 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.