About
Responsive, theme-aware feature bento with composable content and media, subtle pointer tilt and spotlight, reduced-motion support, and accessible linked cards. Includes a light/dark workspace demo.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Bento to your project and fits it to your theme.
Code
How Feature Bento is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { BentoGrid } from "@/components/ui/feature-bento"
export default function BentoGridDemo() {
return (
<main
className="min-h-screen w-full bg-[hsl(0_0%_96%)] px-4 py-10 sm:px-8 sm:py-16 dark:bg-neutral-950"
style={{ fontFamily: '"DM Sans", ui-sans-serif, system-ui, sans-serif' }}
>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..500;1,9..40,400..500&display=swap"
/>
<BentoGrid />
</main>
)
}
Dependencies
More by Drew Sepeczi
View all
Builder OS Bento
115