Ai Approval

A card displays a question and options for human approval. When an option is chosen, it expands while others collapse. It is used in AI workflows to get irreversible decisions from users.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-approval

npx layro-cli add @educlopez/ai-approval

npx layro-cli add @educlopez/ai-approval

bunx layro-cli add @educlopez/ai-approval

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useState } from "react";

const SPRING_DEFAULT = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};
const EASE_OUT = [0.23, 1, 0.32, 1] as const;
const CHOICE_STAGGER = 0.03;