AccordionOS

Interactive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay, and responsive design.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/accordionos

npx layro-cli add @iurvish/accordionos

npx layro-cli add @iurvish/accordionos

bunx layro-cli add @iurvish/accordionos

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

Code

Demo

"use client";

import React, { useState, useCallback, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";

// ==========================================
// 1. HYDRATION-SAFE TOOLTIP COMPONENTS
// ==========================================

export function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {