Bento Grid
svelte-animations/bento-gridFreeBlock
A flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/bento-grid.jsonSource
1<script lang="ts">2 import { cn } from "$UTILS$";3 import type { Snippet } from "svelte";4 import type { HTMLAttributes } from "svelte/elements";56 interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {7 children: Snippet;8 class?: string;9 }1011 let { children, class: className, ...props }: BentoGridProps = $props();12</script>1314<div class={cn("grid w-full auto-rows-[22rem] grid-cols-3 gap-4", className)} {...props}>15 {@render children()}16</div>
What it pulls in
npm packages
Files it writes
More from Svelte Animations
All 66 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Animated Beamanimated-beam | Svelte Animations | Blocks | Free | 1 dep · 6 files | |
| Animated Circular Progress Baranimated-circular-progress-bar | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Animated Gradient Textanimated-gradient-text | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Animated Grid Patternanimated-grid-pattern | Svelte Animations | Blocks | Free | 1 dep · 2 files | |
| Animated Listanimated-list | Svelte Animations | Blocks | Free | 1 dep · 2 files | |
| Animated Shiny Textanimated-shiny-text | Svelte Animations | Blocks | Free | no deps | |
| Animated Theme Toggleranimated-theme-toggler | Svelte Animations | Blocks | Free | no deps · 2 files | |
| Arc Timelinearc-timeline | Svelte Animations | Blocks | Free | no deps · 3 files |
