Docs·Mini Archive

Mini Archive

A 3D glass folder with hinged cover, frosted blur, and quote cards that fan out on open.

Installation

$pnpm dlx shadcn@latest add @spiderui/mini-archive

Usage

A 3D glassmorphism folder that hinges open on click, revealing quote cards side by side with spring motion. Hover for a subtle peek; click outside to close. Use the personalize panel to tweak colors and cover text. Design inspired by Aditya Sur.

API Reference

PropTypeDefault
titlePrimary label on the front cover.
string"集めたもの"
subtitleSecondary label below the title.
string"Mini Archive"
accentColorFolder tint for the glass cover and back panel.
"yellow" | "pink" | "cyan" | "violet" | "orange" | "emerald" | "black""orange"
quotesPair of quote cards revealed inside the folder. Defaults to two funny movie lines.
[MiniArchiveQuote, MiniArchiveQuote]—
classNameAdditional classes on the outer wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

“Leave the gun. Take the cannoli.”

— The Godfather

“I am serious. And don't call me Shirley.”

— Airplane!

集めたもの

Mini Archive

import { MiniArchive } from "@/components/ui/mini-archive"
export default function Page() {
  return (
    <MiniArchive
      title="集めたもの"
      subtitle="Mini Archive"
      accentColor="orange"
    />
  )
}