Skip to content
Uxelith
Sign in
Prov1.0.0Marketing blocks

Bento Feature Grid

A features section as a bento grid: five tiles with live CSS illustrations (motion curves, a theme cycling, frameworks, a typing terminal, a focus ring stepping with Tab), a shared spotlight and scroll-driven entrances.

Installs with Uxelith ProHow
Customise in StudioPricing
Licence
Pro
Packages
2
Updated
9 Oct 2026
Live

Installation

Usage

example.tsx
import { BentoGrid } from "@/components/bento-grid"

export default function Page() {
  return <BentoGrid />
}

Props

PropTypeDefaultDescription
eyebrow / title / subtitlestring—Section intro.
tiles{ title; body }[]five tilesText for the five tiles in order: motion, theming, frameworks, source, keyboard.

Accessibility

  • Tiles are headings plus text, so the section reads as a plain list of features; the illustrations are decorative and hidden.
  • Everything moves in CSS, with no script per frame; under prefers-reduced-motion the illustrations hold still and tiles appear in place.

Changelog

  1. v1.0.0Latest

    First release.

More in Marketing blocks

All 8 in Marketing blocks
  • Marketing blocksPro

    FAQ Section

    Frequently asked questions: a large heading, an animated accordion, an optional search that narrows and highlights answers, a contact card and FAQPage structured data.

  • Marketing blocksFree

    Hero Section

    A landing-page hero: a large headline that comes into focus, a magnetic call to action, customer marks and a live product shot with a self-drawing chart, a visiting cursor and floating cards.

  • Marketing blocksPro

    Pricing Section

    A monthly/yearly switch with the saving shown, three plans whose prices roll to their new value (the monthly price struck through on yearly), a full comparison table and a no-script FAQ.