Shader
background="shader"
$48,210Monthly revenue+12.4%
A feature tile for a bento grid
A heading over a content area that holds anything, seated in a safe inset so it never runs under the heading, on a shader pair, a plain surface or nothing. Pass expanded content and the whole tile opens into an overlay.
Backgrounds
The default is a shader pair: a wash of light in the bottom-left corner with a line texture laid over it. Solid is the container surface alone, and transparent leaves only the border and the content.
Solid
background="solid"
$48,210Monthly revenue+12.4%
Transparent
background="transparent"
$48,210Monthly revenue+12.4%
Shader pairs
Six pairs, and pair N is ambient colour N with texture N. Tiles rotate through them by their position in the grid, so shader tiles side by side always differ, and highlight pins one. Both halves follow the theme’s ambient colours and share one strength.
Pair 1
Ambient 1 with dots
Pair 2
Ambient 2 with lines
Pair 3
Ambient 3 with rings
Pair 4
Ambient 4 with grid
Pair 5
Ambient 5 with waves
Pair 6
Ambient 6 with rays
Content
The content area takes anything. Align places it at the top, middle or foot of the space under the heading, and content that does not fit fades out at the edge it overflows rather than being cut. The area answers container queries against the tile’s own width, so a scene can drop a part when its tile is narrow instead of squeezing every part until something truncates.
Align start
Content
Align center
Content
Align end
Content
More than fits
Seven rows in a fixed height
12 seatsNorthwind
12 seatsHalcyon
12 seatsMeridian
12 seatsLumen
12 seatsBasalt
12 seatsCinder
12 seatsTessel
Answers its own width
The stat drops out in a narrow tile
41Active+6
$48,210Monthly revenue+12.4%
Expanding
With expanded content the whole tile is a control. Hovered, its border takes the action colour, and opening morphs the tile into an overlay where the browser supports it. Escape closes the overlay and returns focus to the tile.
Revenue that themes itself
$48,210Monthly revenue+12.4%
// From the npm package
import { BentoTile } from 'rift-ds/components/BentoTile/BentoTile';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/bento-tile.json