Getting Started
Templates
Components
A bento grid layout showcasing workflow automation features with connected cards, status indicators, and dot patterns.
import { WorkflowBentoGrid } from "@/components/ui/workflow-bento-grid"
export default function Page() {
return (
<
WorkflowBentoGrid| Prop | Type | Default | Description |
|---|---|---|---|
badge | string | undefined | Optional badge text displayed above the title |
title | string | "Streamline" | Main title text (displayed in italic) |
titleHighlight | string | "your workflow." | Highlighted secondary title text |
subtitle | string | "Leverage intelligent automation..." | Subtitle description text (displayed in semibold) |
className | string | undefined | Additional CSS classes for the section |
The component includes a pre-built bento grid with 4 cells:
Smart Data Classification (Top Left):
Instant Report Generation (Top Right):
Real-time Intelligence (Bottom Left):
Custom Query Builder (Bottom Right):
The grid uses several internal components:
This component requires:
motion for animations@/components/ui/dot-pattern for background patterns@/lib/utils for className utilitiesAction cards support three highlight colors:
blue - Blue border and icon backgroundpurple - Purple border and icon backgroundorange - Orange border and icon backgroundCards can show connection points at different positions:
bottom - Centered at bottom edgeright - Centered at right edgeleft - Centered at left edgetop - At top edgetop-center - Centered at top edge