Bento Grid
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
Save your files
We automatically save your files as you type.
Full text search
Search through all your files in one place.
Multilingual
Supports 100+ languages and counting.
Installation
The component itself has no icon dependency. To copy the feature demo, install:
bash
pnpm add @iconify/vueCopy the following files into src/components/spark-ui/bento-grid/:
vue
<script setup lang="ts">
import { computed } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
name: string;
class?: string;
}>();
const className = computed(() =>
cn(
"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
// light styles
"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
// dark styles
"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
props.class,
),
);
</script>
<template>
<div :key="props.name" :class="className">
<slot />
</div>
</template>vue
<script setup lang="ts">
import { computed } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
class?: string;
}>();
const classStyle = computed(() =>
cn("grid w-full auto-rows-[22rem] grid-cols-3 gap-4", props.class),
);
</script>
<template>
<div :class="classStyle">
<slot />
</div>
</template>