Blocks
Asymmetric bento grid: one large anchor card and a constellation of small ones.
The unglamorous parts of great interfaces, handled once and handled well.
Three shared springs power every hover, reveal, and layout shift, so the whole page moves as one body. Entrances breathe a single time — nothing wobbles, nothing nags. Override per component only when the physics genuinely call for it.
Every color, radius, and shadow resolves through CSS variables. Flip one attribute for a full light theme.
Blocks accept plain content props — arrays in, polished sections out. No config files, no schema wrangling.
Focus rings, aria wiring, and keyboard paths ship in every component, with reduced-motion fallbacks throughout.
Transform-only animation and lazy ambient effects keep interaction under a frame, even on modest hardware.
Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.
npx lumora-ui@latest add featuresUsing the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.
import { FeatureBento } from "@lumora/ui/blocks/features";
// or from the barrel:
import { FeatureBento } from "@lumora/ui";items take { icon?, title, body } in display order — the first fills the large 2×2 anchor cell, the rest flow into small cells. heading and subheading top the section. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.