# BentoGrid

> Bento-style grid layout with slot-based and props-based card variants.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Cards
- Tags: grid, layout, bento, cards, dashboard
- Docs: https://fancy-ui.rama.app/docs/components/bento-grid
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/bento-grid

## Import

```svelte
<script lang="ts">
  import { BentoGrid } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { BentoGrid } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | BentoGridItem components to arrange in the grid |

## Examples

### Basic Usage

Slot-based BentoGridItem.

```svelte
<script lang="ts">
	import { BentoGrid, BentoGridItem } from "fancy-ui-svelte";
</script>

<BentoGrid>
	<BentoGridItem class="md:col-span-2">
		{#snippet header()}
			<div
				class="flex h-full min-h-[6rem] w-full flex-1 rounded-xl bg-gradient-to-br from-violet-500 to-purple-500"
			></div>
		{/snippet}
		{#snippet title()}Feature One{/snippet}
		{#snippet description()}A powerful feature that helps you build faster.{/snippet}
	</BentoGridItem>

	<BentoGridItem>
		{#snippet header()}
			<div
				class="flex h-full min-h-[6rem] w-full flex-1 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-500"
			></div>
		{/snippet}
		{#snippet title()}Feature Two{/snippet}
		{#snippet description()}Streamline your workflow.{/snippet}
	</BentoGridItem>

	<BentoGridItem>
		{#snippet header()}
			<div
				class="flex h-full min-h-[6rem] w-full flex-1 rounded-xl bg-gradient-to-br from-orange-500 to-yellow-500"
			></div>
		{/snippet}
		{#snippet title()}Feature Three{/snippet}
		{#snippet description()}Beautiful by default.{/snippet}
	</BentoGridItem>

	<BentoGridItem class="md:col-span-2">
		{#snippet header()}
			<div
				class="flex h-full min-h-[6rem] w-full flex-1 rounded-xl bg-gradient-to-br from-pink-500 to-rose-500"
			></div>
		{/snippet}
		{#snippet title()}Feature Four{/snippet}
		{#snippet description()}Ship with confidence using robust tooling.{/snippet}
	</BentoGridItem>
</BentoGrid>
```

### Card Variant

Props-based BentoGridCard.

```svelte
<script lang="ts">
	import { BentoGrid, BentoGridCard } from "fancy-ui-svelte";
</script>

<BentoGrid>
	<BentoGridCard
		class="md:col-span-2"
		name="Analytics Dashboard"
		description="Real-time insights into your data with interactive charts."
		href="#"
		cta="Learn more"
	>
		{#snippet background()}
			<div class="absolute inset-0 bg-gradient-to-br from-violet-500/20 to-purple-500/20"></div>
		{/snippet}
	</BentoGridCard>

	<BentoGridCard
		name="API Integration"
		description="Connect with any service in minutes."
		href="#"
		cta="View docs"
	>
		{#snippet background()}
			<div class="absolute inset-0 bg-gradient-to-br from-cyan-500/20 to-blue-500/20"></div>
		{/snippet}
	</BentoGridCard>

	<BentoGridCard
		name="Authentication"
		description="Secure auth out of the box."
		href="#"
		cta="Get started"
	>
		{#snippet background()}
			<div class="absolute inset-0 bg-gradient-to-br from-orange-500/20 to-yellow-500/20"></div>
		{/snippet}
	</BentoGridCard>

	<BentoGridCard
		class="md:col-span-2"
		name="Deployment"
		description="One-click deployment to any cloud provider."
		href="#"
		cta="Deploy now"
	>
		{#snippet background()}
			<div class="absolute inset-0 bg-gradient-to-br from-pink-500/20 to-rose-500/20"></div>
		{/snippet}
	</BentoGridCard>
</BentoGrid>
```