Back to Widget blocks

Insight Recommendation Card

A reusable React Recommendation & Insight Card for dashboards, designed to build Dashboard Recommendation Cards, Analytics Recommendation Cards, Business Insight Cards, Financial Recommendation Cards, and intelligent recommendation widgets.

Set realistic budgets

Based on your spending history, consider increasing your Food & Dining budget.

Installation

npm i framer-motion

Step 1

Components

page.tsx

Select a file to view its code

Dark Mode

This component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).

Using <html>

<html className="dark">
  ...
</html>

Using <body>

<body className="dark">
  ...
</body>

Step 2

Use Linear Reveal

React Vibe

Command Palette

Insight Recommendation Card

Set realistic budgets

Installation

Dark Mode

Step 2