MiniDev UI

Feature Bento Motion

Motion

A four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.

src/registry/premium/feature-bento-motion.tsx/r/feature-bento-motion.json

Realtime

Every change syncs across devices in under 100ms.

Secure

SSO, audit logs and encryption by default.

Motion

Reduced-motion first.

Open

A typed API and webhooks for everything you see.

Bento

Installation#

bash
npx shadcn@latest add @minidev/feature-bento-motion

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/feature-bento-motion.json

Usage#

tsx
import { FeatureBentoMotion } from "@/components/ui/feature-bento-motion"

export function Example() {
  return (
    <FeatureBentoMotion />
  )
}

API reference#

FeatureBentoMotion props
PropTypeDefault
classNamestring-

Dependencies#

npm

motion

Built from

No other MiniDev files

Examples#

MotionKinetic type, sticky story, magnetic CTA

Related landing pages components#

Agency PortfolioAn agency portfolio page with a marketing navbar, animated headline, project cards that fade up in sequence as they scroll in, and a mega footer.Blog HomeA blog index page with a marketing nav, tag filter chips for all, design and engineering, a grid of post cards with excerpts and dates, and a footer.Brand Kit PageA brand showcase page combining poster type, a typographic marquee, tilt cards, a text scramble, a grid reveal, a price morph and a magnetic CTA.Careers PageA React careers page with a marketing nav, animated headline, open roles listing location and employment type with apply buttons, and a mega footer.Changelog MarketingA marketing changelog with a gradient masked headline, a subscribe CTA and a timeline of versions with highlight dots and bullet lists that slide in.Changelog MotionA React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.
All Landing page sections for React and Tailwind

Learn more

What is Bento grid?GlossaryAll feature sections7 blocks