Apple Accordion

Accordion whose items morph from pills into cards, inspired by Apple’s product pages.

Installation

terminal

pnpm dlx layro-cli add @ncdai/apple-accordion

npx layro-cli add @ncdai/apple-accordion

npx layro-cli add @ncdai/apple-accordion

bunx layro-cli add @ncdai/apple-accordion

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

Code

Demo

"use client"

import {
  Children,
  createContext,
  isValidElement,
  use,
  useId,
  useLayoutEffect,
  useRef,
  useState,
} from "react"
import type { ComponentProps, RefObject } from "react"
import { mergeProps } from "@base-ui/react/merge-props"

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 8, 2026
First release.