Archive Modal | Sean Lynch

Made of something. Weathered green archive doors, aged metal trim and flickering candles recessed into side alcoves.

The moment. The doors unseat and part before the contents become interactive. Escape closes the archive and restores trigger focus.

Yours to adapt. Copy the component source, styles and materials. Functional text stays live, effects respect reduced motion, and the artwork requires no remote hosting.

Try it

Open the archive to part the doors. Escape closes it and returns focus.

Install

Add it with the shadcn CLI, or copy the source manually.

Release candidate: public installation becomes available after deployment. Use an existing React 19 project with shadcn initialized and a components.json file. The CLI installs the source, CSS, embedded materials, MIT licence and font notices together.

Terminal

npx shadcn@latest add https://seanportfol.io/r/grimkit-archive-modal.json

Prefer a namespace? Register the registry once.

Terminal

npx shadcn@latest registry add @seanlynch=https://seanportfol.io/r/{name}.json

Terminal

npx shadcn@latest add @seanlynch/grimkit-archive-modal

Usage

Copy this example into a separate file, not over the installed component. The @/ alias points to your source root. In Next.js this is a Client Component; Vite also accepts the directive. Replace demonstration actions with your application logic.

components/examples/archive-modal-demo.tsx

"use client";

import { ArchiveModal } from "@/components/grimkit/archive-modal";

export default function Example() {
  return <ArchiveModal title="The sealed archive" description="Records ready for inspection." triggerLabel="Open archive"><p>Your records are ready.</p></ArchiveModal>;
}

API Reference

Props on Archive Modal. Consult the included TypeScript source for supported native attributes.

PropTypeDefault

openControlled visibility.boolean–

defaultOpenInitial uncontrolled visibility.booleanfalse

onOpenChangeReports opening or dismissal, including keyboard dismissal.(open: boolean) => void–

titleLive heading and accessible name.string–

descriptionOptional description.string–

childrenLive React content, never baked into artwork.ReactNode–

triggerLabelOptional trigger label.string'Open archive'

triggerPropsOptional trigger props.Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled'>–

disabledDisables user interaction and cancels transient effects.booleanfalse

effectsAuto honours reduced motion; off suppresses decorative motion without changing values.'auto' | 'off''auto'

classNameAdditional surface class; does not replace material styles.string''

Native attributesUnclaimed native attributes, event handlers and aria-* attributes are forwarded. Inputs can be named with a surrounding label or aria-label.ButtonHTMLAttributes<HTMLButtonElement>–

Information

Category: GrimKit
Files: components/grimkit/archive-modal.tsx
components/grimkit/archive-modal.css
components/grimkit/archive-modal-materials.css
components/grimkit/LICENSE.txt
components/grimkit/Saira-OFL.txt
components/grimkit/JetBrainsMono-OFL.txt
Dependencies: React 19 and React DOM 19; no additional runtime packages
Compatibility: React 19, TypeScript, CSS imports, Modern browsers
Version: 0.3.0
Updated: Sep 24, 2026
Registry: grimkit-archive-modal